MVC Part Four (Models)

This is the fourth part of the tutorial series about MVC.

In the first part, we have dig into a quick start of creating an empty ASP.NET MVC application and defined some basics. In this part, we will try to explain the mechanism of MVC and make the previous example work for the first time.

In the second part, we have given some basic definitions and information about controllers, what they are and how they work.

In the third part, we have concentrated on the Views and the organization of the UI elements.

In this part, we will talk about the model concept. A Model is a business specific portion of the MVC architecture, isolated from the other components.

A model is simply a class which holds all the required bussiness logic for the application. A model can be added to the project simply right clicking the Models folder and selecting Add>Class option.

Add a class named Demo.cs and change its contents with the following code.

33

namespace MVC_DemoApp.Models
{
 public struct Customer
 {
 public int customerID;
 public string customerName;
 public string customerCountry;

public Customer(int customerID, string customerName, string customerCountry)
 {
 this.customerID = customerID;
 this.customerName = customerName;
 this.customerCountry = customerCountry;
 }
 }

public class Demo
 {
 public Customer[] customerList()
 {
 return new Customer[]
 {
 new Customer(customerID: 1, customerName: "David", customerCountry:"ENGLAND"),
 new Customer(customerID: 2, customerName: "Michelle", customerCountry:"GERMANY"),
 new Customer(customerID: 3, customerName: "Laura", customerCountry:"GERMANY"),
 new Customer(customerID: 4, customerName: "Eva", customerCountry:"FRANCE"),
 new Customer(customerID: 5, customerName: "Nancy", customerCountry:"ENGLAND")
 };
 }
 }
}

 

This is for the model layer of our MVC Demo Application. Now lets combine all the things to have a working sample of an MVC application.

Open the DemoController in the Controllers folder and add the following action method which return the MyAction2 view:

 public ActionResult MyAction2()
 {
 return View("MyAction2");
 }

Run the application and type the URL as: localhost:xxxxx/Demo/MyAction2

This will bring the default layout of MyAction2 view to the screen. In order to show the Customer data there ase several ways to bring model data to the controller and pass it to the view.

For simplicity we will use ViewData which is a dictionary, that will contains data to be passed between controller and views. Controller will add items to this dictionary and view reads from it.

Add a using directive to the DemoController.cs for the model as:

using MVC_DemoApp.Models;

Modify action method MyAction2 as follows:

public ActionResult MyAction2()
{
ViewData[“Customers”] = new Demo().customerList();
return View(“MyAction2”);
}

To display the customers in ViewData[“Customers”] modify the MyAction2 view as follows:

@{
 ViewBag.Title = "MyAction2";

MVC_DemoApp.Models.Customer[] customers =
 (MVC_DemoApp.Models.Customer[])ViewData["Customers"];
}

<h2>MyAction2</h2>

<table>
 <thead>
 <tr>
 <th>Customer ID</th>
 <th>Customer Name</th>
 <th>Customer Country</th>
 </tr>
 </thead>

<tbody>


 @foreach (MVC_DemoApp.Models.Customer c in customers)
 {
 <tr>
 <td>@c.customerID</td>
 <td>@c.customerName</td>
 <td>@c.customerCountry</td>
 </tr>
 }

</tbody>

</table>

 

In the code block presented above, we have used razor (@) syntax to get the customer information embedded in view. We will explain that later but for now just run the application and see the result as the following:

34

That is the end of the basic concepts and brief explanation of MVC and how it is working. Be creative and dont be shy to go into details and create similar projects to get used to the basics…

 

 

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: