Model in an MVC Application

In Brief:

In this article let us make use of the most important part of the MVC pattern i.e. Model. Description about how the model can be used as data layer in mvc application. In the Introduction to MVC article explained role of the model and also about passing data from controller to view. 

In Detail:

Consider the example where we need to display the employee details as follows,

Employee Id: 011

Name: David

Gender: Male

Designation: HR Manager

City: Bangalore

Let us proceed by adding the new model class to the project, 

right click on model folder->select class->named as clsEmploee->Add. Now new model 

class has been added to the project. 

Now this employee class needs to have the properties to encapsulate the employee data by giving the get and set access of which is an auto implemented properties.

public class clsEmployee
    {
        public int EmployeeId { get;set;}
        public string Name { get; set; }
        public string Gender { get; set; }
        public string Designation { get; set; }
        public string City { get; set; }
    }

Now let us  add controller  to the project and name it as Employee. Inside the EmployeeController class change the default Index method as “fnDetails”, as we need to display the employee details.

Now from the controller we need to make use of the employee class defined in the Model. To access employee class without using the fully qualified name need to add model namespace.

Using MvcSample.Models;

Now let us instantiate clsEmployee with value defined inside the controller itself.

public ActionResult fnDetails()
        {
            clsEmployee objEmployee = new clsEmployee()
            {
                EmployeeId= 011,
                Name="David",
                Gender="Male",
                Designation="HR Manager",
                City="Bangalore"
            };
            return View(objEmployee);
        }

We need to pass this employee object over view and which is rendered in View[last line in the above code] 

Now  add new View to the project.

Before adding the View need to build the project because here we are using strongly typed view as shown.

In this Details View, closely observe the first Line, 

@model MvcSample.Models.clsEmployee

 which indicates that this view is strongly typed view of Type clsEmployee. Here “model” is object of class clsEmploee, by using this object “model” we can get access to all the properties of class inside this view.

Now change the Details View to Display the employee details as follows.

In the bellow code to get employee id, on typing @model [object of class clsEmployee] it shows all the properties of clsEmployee.

@model MvcSample.Models.clsEmployee

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


Employee Details

    


        
Employee Id:
        
@Model.EmployeeId
    

        
Name:
        
@Model.Name
    

        
Gender:
        
@Model.Gender
    

        
Designation:
        
@Model.Designation
    

        
City:
        
@Model.City
    

On running the we should get the following output: 

Final Touch:

All the three major pillars of MVC pattern has seen here. Where Controller responds to the URL request and communicates with Model and Sends back the processed data to View for Rendering.

Please comment your suggestion/feedback about this article and keep visiting to get more advanced article.