MVC - Models

In this post, lets discuss about ASP.Net Models










Models play a very important role in all MVC applications.

Let's understand models with a simple example. 
Suppose if we want to retrieve a customer information from tblCustomers table and display it as shown below.

 

To encapsulate Customer information, add Customer model class to the Models folder. 
Follow the below steps to do so..
1. Right click on "Models" folder ==> Add ==> Class
2. Name the class as Customer.cs
3. Click on "Add"

Copy and paste the following code in Customer.cs class file.
public class Customer
{
    public int CustomerId { get; set; }
    public string Name { get; set; }
    public string Gender { get; set; }
    public string City { get; set; }
}

Now let's Add CustomerController class to "Controllers" folder. To do this
1. Right click on "Controllers" folder ==> Add ==> Controller
2. Write CustomerController as the name
3. Click on "Add"

We want to use "Customer" model class in CustomerController. 

Do not forget to add this "using" statement in "CustomerController.cs"
 
using MVCDemo.Models;

By default an Index() Action method is created in CustomerController. 

Change the name of the function to Details(). Create an instance of Customer class. 

For now we will hard code Customer data in this class.

At this point CustomerController should look as shown below.
 
public ActionResult Details()
{
    Customer customer = new Customer()
    {
        CustomerId = 1001,
        Name = "Willston",
        Gender = "Female",
        City = "Ottava"
    };
            
    return View();
} 


Now, we need to pass the customer model object that we constructed in CustomerController to a view, so the view can generate the HTML and send it to the requested client. To do this we first need to add a view. 

In ordrer to add a view, please follow the below steps...

1. Right click on Details() action method and select "Add View" from the context menu
2. Set
    a)View Name = Details
    b)View Engine = Razor
    c)Select "Create strongly typed view" check box
    d)From the "Model class" dropdownlist, select "Customer (MVCDemo.Models)"

Here some times you may not see the Customer class, hence, please build(shift+F5) your application and then try adding the view again.
 
3. Finally click "Add"

At this point, Details.cshtml should be added to "Customer" folder. Please note that "Customer" folder is automatically created and added to "Views" folder.

Copy and paste the following code in Details.cshtml file.
@model MVCDemo.Models.Customer

@{
    ViewBag.Title = "Customer Details";
}

<h2>Customer Details</h2>

<table style="font-family:Arial">
    <tr>
        <td>
            Customer ID:
        </td>
        <td>
            @Model.CustomerId
        </td>
    </tr>
    <tr>
        <td>
            Name:
        </td>
        <td>
            @Model.Name
        </td>
    </tr>
    <tr>
        <td>
            Gender:
        </td>
        <td>
            @Model.Gender
        </td>
    </tr>
    <tr>
        <td>
            City:
        </td>
        <td>
            @Model.City
        </td>
    </tr>
</table> 

At this point if you run the project, and if you navigate to the following URL, you get a runtime error stating - Object reference not set to an instance of an object.
http://localhost/MVCDemo/Customer/Details

To fix this error, pass "Customer" object to the view. The "return" statement in Details() action method need to be modified as shown below.
return View(customer);

That's it. Run the application and navigate to http://localhost/MVCDemo/Customer/Details. 

Now we can see the output as expected. 

The end.