August 1, 2014

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 

Add new Model class


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.
Add strongly typed View
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: 

Output-Model in MVC Application

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.

Protected by Copyscape Plagiarism Detector