Models In ASP.NET MVC 5

In this article we will learn the use of Models in ASP.Net MVC5 With Examples.

Introduction

 
MVC is used for the development of Web Applications. MVC stands for Model View Controller. Whenever the user requests a webpage, first the request goes to the Controller, the Controller interacts with the appropriate Model and retrieves the data from the Model and binds the data to the View.
 
Whenever we develop any kind of Application using MVC, the best practice is to assign the data to Models. Using Models we can access the properties or data easily from anywhere in the application.
 
Whenever we create a new MVC  project by default we will get the following folders structures such as App_Data, App_Start, Content, Controllers, Fonts, Models, Scripts, Views, etc.
 
From the above Folders, we mainly work with Models, Views & Controllers.
 
Models Folder Contains all the Models or the data required for the web application for example if we want to store the Employee related Information then we will create a Model with the name, say, EmployeeInfo.cs with the properties to assign and retrieve the data.
 
Let's create an ASP.NET MVC5 Web Application.
 
Open Visual Studio 2017 or any version based on your choice. In my case, I am using Visual Studio 2017.

Click on File --> New --> Project. Select "Web" from the left window. From the right window, select "ASP.Net Web Application (.NET Framework)". Give some name for the application & click OK. Select the MVC template and click OK. 
 
Models In ASP.NET MVC 5
 
Models In ASP.NET MVC 5
 
Models In ASP.NET MVC 5
 
Once the new project is created, we will get the following project's folder structure.
 
Now, in order to add a Model class in Models folder, right click on the Models folder, click on Add, and select the class template as shown in the below image.
 
Models In ASP.NET MVC 5
 
Select a class template from the "Add New Item" window and give the Model Name as EmployeeInfo.cs. With this, a new Model is created.
 
Models In ASP.NET MVC 5
 
Add the properties to the EmployeeInfo.cs as shown below.
 
Models In ASP.NET MVC 5
  1. namespace MVCDemo.Models  
  2. {  
  3.     public class EmployeeInfo  
  4.     {  
  5.         public int EmployeeId { getset; }  
  6.         public string EmployeeName { getset; }  
  7.         public string EmployeeDesignation { getset; }  
  8.         public string DateOfJoining { getset; }  
  9.         public string EmployeeAddress { getset; }  
  10.         public string EmployeePassport { getset; }  
  11.         public int EmployeePhone { getset; }  
  12.         public int EmployeeAge { getset; }  
  13.         public string EmployeeGender { getset; }  
  14.         public string City { getset; }  
  15.         public string Project { getset; }  
  16.         public string EmployeeBloodGroup { getset; }  
  17.         public string CompanyName { getset; }  
  18.         public int PinCode { getset; }  
  19.   
  20.     }  
  21. }  
In order to add a controller, right-click on the Controllers folder, click on Add, and select Controller as shown below.
 
Models In ASP.NET MVC 5
 
Select MVC5 Controller-Empty and click on Add.
 
Models In ASP.NET MVC 5
 
And give the Controller name as "EmployeeInfoController" and click on Add. With this, a new Controller is added to the Controllers folder. 
 
Models In ASP.NET MVC 5
 
Create an Action Method as GetEmployeeInfo() in the above-created Controller that is "EmployeeInfoController.cs" by Creating an object of EmployeeInfo.cs and assigning the values to the Properties. 
 
Models In ASP.NET MVC 5
  1. public ActionResult GetEmployeeInfo() 
  2.        {  
  3.            EmployeeInfo employeeInfo = new EmployeeInfo()  
  4.            {  
  5.                EmployeeId = 1701,  
  6.                EmployeeName = "Khaja Moizuddin",  
  7.                EmployeeDesignation = "Software Engineer",  
  8.                DateOfJoining = "22/04/2010",  
  9.                EmployeeAddress = "16-1-10/3/4/C Swathi Apartments",  
  10.                EmployeePassport = "B-123-45-67",  
  11.                EmployeePhone = 0123456789,  
  12.                EmployeeAge = 30,  
  13.                EmployeeGender = "Male",  
  14.                City = "Hyderabad",  
  15.                Project = "RPA Tools",  
  16.                EmployeeBloodGroup = "AB+",  
  17.                CompanyName = "ABC Technologies",  
  18.                PinCode = 500045  
  19.            };  
  20.            return View(employeeInfo);  
  21.        }  
Here we are passing the EmployeeInfo reference as a parameter in View, which returns the EmployeeInfo object to the View or .cshtml file. The .cshtml file uses the EmployeeInfo object for rendering as displaying to the end user.
 
In order to return List of EmployeeInfo object, we have added another Action Method called EmployeeInfoList, which is used for returning
list of  EmployeeInfo objects from View. 
 
Models In ASP.NET MVC 5
  1. public ActionResult EmployeeInfoList()    
  2.         {    
  3.             List<EmployeeInfo> employeeInfoList = new List<EmployeeInfo>();    
  4.     
  5.             employeeInfoList.Add(new EmployeeInfo()    
  6.             {    
  7.                 EmployeeId = 1701,    
  8.                 EmployeeName = "Khaja Moizuddin",    
  9.                 EmployeeDesignation = "Software Engineer",    
  10.                 DateOfJoining = "22/04/2010",    
  11.                 EmployeeAddress = "16-1-10/3/4/C Swathi Apartments",    
  12.                 EmployeePassport = "B-123-45-67",    
  13.                 EmployeePhone = 0123456789,    
  14.                 EmployeeAge = 30,    
  15.                 EmployeeGender = "Male",    
  16.                 City = "Hyderabad",    
  17.                 Project = "RPA Tools",    
  18.                 EmployeeBloodGroup = "AB+",    
  19.                 CompanyName = "ABC Technologies",    
  20.                 PinCode = 500045    
  21.             });    
  22.     
  23.             employeeInfoList.Add(new EmployeeInfo()    
  24.             {    
  25.                 EmployeeId = 1702,    
  26.                 EmployeeName = "Vikas Biradar",    
  27.                 EmployeeDesignation = "Senior Software Engineer",    
  28.                 DateOfJoining = "22/04/2016",    
  29.                 EmployeeAddress = "11-1-101/6/9/D Banjara Hills Colony",    
  30.                 EmployeePassport = "A-123-45-67",    
  31.                 EmployeePhone = 0123456789,    
  32.                 EmployeeAge = 24,    
  33.                 EmployeeGender = "Male",    
  34.                 City = "Hyderabad",    
  35.                 Project = "E-Commerce App",    
  36.                 EmployeeBloodGroup = "O+",    
  37.                 CompanyName = "Microsoft Corporation",    
  38.                 PinCode = 500036    
  39.             });    
  40.     
  41.             employeeInfoList.Add(new EmployeeInfo()    
  42.             {    
  43.                 EmployeeId = 1703,    
  44.                 EmployeeName = "Pavan",    
  45.                 EmployeeDesignation = "Senior Software Engineer",    
  46.                 DateOfJoining = "22/04/2014",    
  47.                 EmployeeAddress = "Flat No 105-Jubilee Hills Road",    
  48.                 EmployeePassport = "C-123-45-67",    
  49.                 EmployeePhone = 0123456789,    
  50.                 EmployeeAge = 21,    
  51.                 EmployeeGender = "Male",    
  52.                 City = "Hyderabad",    
  53.                 Project = "PaymentGatewayApp",    
  54.                 EmployeeBloodGroup = "B+",    
  55.                 CompanyName = "Infosys",    
  56.                 PinCode = 500035    
  57.             });    
  58.     
  59.             employeeInfoList.Add(new EmployeeInfo()    
  60.             {    
  61.                 EmployeeId = 1704,    
  62.                 EmployeeName = "Sree",    
  63.                 EmployeeDesignation = "Senior Software Engineer",    
  64.                 DateOfJoining = "22/04/2016",    
  65.                 EmployeeAddress = "Flat No 101- Akshay Apartment Kukatpally",    
  66.                 EmployeePassport = "D-123-45-67",    
  67.                 EmployeePhone = 0123456789,    
  68.                 EmployeeAge = 23,    
  69.                 EmployeeGender = "Female",    
  70.                 City = "Hyderabad",    
  71.                 Project = "GamingPortal",    
  72.                 EmployeeBloodGroup = "A+",    
  73.                 CompanyName = "Infosys",    
  74.                 PinCode = 500035    
  75.             });    
  76.     
  77.     
  78.             return View(employeeInfoList);    
  79.         }    
In the above code, we have added a list of EmployeeInfo reference as a parameter in View Method, which, in turn, returns to the View or .cshtml file for rendering and displaying the data to the End User.
 
To add a .cshtml file we need to right click on GetEmployeeInfo() Action Method & Click on Add View.
 
Models In ASP.NET MVC 5
 
From the Add View Window, give the View Name as GetEmployeeInfo, Template as Create, and Model class as EmployeeInfo.cs and click on Add, with this GetEmployeeInfo.cshtml file will be added in Views Folder. 
 
Models In ASP.NET MVC 5
 
Models In ASP.NET MVC 5
 
Add the below code in the GetEmployeeInfo.cshtml file. 
  1. @model MVCDemo.Models.EmployeeInfo    
  2.     
  3. @{    
  4.     ViewBag.Title = "GetEmployeeInfo";    
  5. }    
  6.     
  7. <style>    
  8.     table {    
  9.         font-family: arial, sans-serif;    
  10.         border-collapse: collapse;    
  11.         width: 100%;    
  12.     }    
  13.     
  14.     td, th {    
  15.         border: 1px solid #dddddd;    
  16.         text-align: left;    
  17.         padding: 8px;    
  18.     }    
  19. </style>    
  20.     
  21. <h2>GetEmployeeInfo Using Model</h2>    
  22. <hr />    
  23.     
  24.     
  25. <table>    
  26.     <tr>    
  27.         <th>EmployeeId</th>    
  28.         <th>EmployeeName</th>    
  29.         <th>EmployeeDesignation</th>    
  30.         <th>DateOfJoining</th>    
  31.         <th>EmployeeAddress</th>    
  32.         <th>EmployeePassport</th>    
  33.         <th>EmployeePhone</th>    
  34.         <th>EmployeeAge</th>    
  35.         <th>EmployeeGender</th>    
  36.         <th>City</th>    
  37.         <th>Project</th>    
  38.         <th>EmployeeBloodGroup</th>    
  39.         <th>CompanyName</th>    
  40.         <th>PinCode</th>    
  41.     </tr>    
  42.     
  43.     <tr>    
  44.             
  45.         <td>@Model.EmployeeId</td>    
  46.         <td>@Model.EmployeeName</td>    
  47.         <td>@Model.EmployeeDesignation</td>    
  48.         <td>@Model.DateOfJoining</td>    
  49.         <td>@Model.EmployeeAddress</td>    
  50.         <td>@Model.EmployeePassport</td>    
  51.         <td>@Model.EmployeePhone</td>    
  52.         <td>@Model.EmployeeAge</td>    
  53.         <td>@Model.EmployeeGender</td>    
  54.         <td>@Model.City</td>    
  55.         <td>@Model.Project</td>    
  56.         <td>@Model.EmployeeBloodGroup</td>    
  57.         <td>@Model.CompanyName</td>    
  58.         <td>@Model.PinCode</td>    
  59.             
  60.     </tr>    
  61. </table>    
  62.     
  63. <h2>GetEmployeeInfo Using HTML Helper Method</h2>    
  64. <hr />    
  65.     
  66. <table>    
  67.     <tr>    
  68.         <th>@Html.DisplayNameFor(x => x.EmployeeId)</th>    
  69.         <th>@Html.DisplayNameFor(x => x.EmployeeName)</th>    
  70.         <th>@Html.DisplayNameFor(x => x.EmployeeDesignation)</th>    
  71.         <th>@Html.DisplayNameFor(x => x.DateOfJoining)</th>    
  72.         <th>@Html.DisplayNameFor(x => x.EmployeeAddress)</th>    
  73.         <th>@Html.DisplayNameFor(x => x.EmployeePassport)</th>    
  74.         <th>@Html.DisplayNameFor(x => x.EmployeePhone)</th>    
  75.         <th>@Html.DisplayNameFor(x => x.EmployeeAge)</th>    
  76.         <th>@Html.DisplayNameFor(x => x.EmployeeGender)</th>    
  77.         <th>@Html.DisplayNameFor(x => x.City)</th>    
  78.         <th>@Html.DisplayNameFor(x => x.Project)</th>    
  79.         <th>@Html.DisplayNameFor(x => x.EmployeeBloodGroup)</th>    
  80.         <th>@Html.DisplayNameFor(x => x.CompanyName)</th>    
  81.         <th>@Html.DisplayNameFor(x => x.PinCode)</th>    
  82.     </tr>    
  83.     
  84.     <tr>    
  85.     
  86.        <td>@Html.DisplayFor(x => x.EmployeeId)</td>  
  87.        <td>@Html.DisplayFor(x => x.EmployeeName)</td>  
  88.        <td>@Html.DisplayFor(x => x.EmployeeDesignation)</td>  
  89.        <td>@Html.DisplayFor(x => x.DateOfJoining)</td>  
  90.        <td>@Html.DisplayFor(x => x.EmployeeAddress)</td>  
  91.        <td>@Html.DisplayFor(x => x.EmployeePassport)</td>  
  92.        <td>@Html.DisplayFor(x => x.EmployeePhone)</td>  
  93.        <td>@Html.DisplayFor(x => x.EmployeeAge)</td>  
  94.        <td>@Html.DisplayFor(x => x.EmployeeGender)</td>  
  95.        <td>@Html.DisplayFor(x => x.City)</td>  
  96.        <td>@Html.DisplayFor(x => x.Project)</td>  
  97.        <td>@Html.DisplayFor(x => x.EmployeeBloodGroup)</td>  
  98.        <td>@Html.DisplayFor(x => x.CompanyName)</td>  
  99.        <td>@Html.DisplayFor(x => x.PinCode)</td>  
  100.     
  101.     </tr>    
  102. </table>     
Here in the above code, we are using two different ways of binding the data to the HTML, the first one is by using Model and the second one is by using HTML Helper Method.
 
Whenever the data is returned from a controller's Action Method or View Method, @model holds the data, which we can use for rendering the data to the HTML.
 
Similarly, to bind a list of EmployeeInfo objects to the HTML table, we need to create a .cshtml file by right click on EmployeeInfoList() Action Method & click on Add View.
 
In Add View Window, give View Name as "EmployeeInfoList", Template as Create, Model class as EmployeeInfo.cs & click on Add. With this method,  EmployeeInfoList.cshtml will be added in Views Folder.
 
Models In ASP.NET MVC 5
 
Models In ASP.NET MVC 5
 
Models In ASP.NET MVC 5
 
Add the below code in EmployeeInfoList.cshtml file.
  1. @model IEnumerable<MVCDemo.Models.EmployeeInfo>    
  2. @using MVCDemo.Models;    
  3.     
  4. @{    
  5.     ViewBag.Title = "EmployeeInfoList";    
  6. }    
  7.     
  8. <style>    
  9.     table {    
  10.         font-family: arial, sans-serif;    
  11.         border-collapse: collapse;    
  12.         width: 100%;    
  13.     }    
  14.     
  15.     td, th {    
  16.         border: 1px solid #dddddd;    
  17.         text-align: left;    
  18.         padding: 8px;    
  19.     }    
  20. </style>    
  21.     
  22. <h2>List Of Employees Using Model</h2>    
  23. <hr />    
  24.     
  25. <table>    
  26.     <tr>    
  27.         <th>EmployeeId</th>    
  28.         <th>EmployeeName</th>    
  29.         <th>EmployeeDesignation</th>    
  30.         <th>DateOfJoining</th>    
  31.         <th>EmployeeAddress</th>    
  32.         <th>EmployeePassport</th>    
  33.         <th>EmployeePhone</th>    
  34.         <th>EmployeeAge</th>    
  35.         <th>EmployeeGender</th>    
  36.         <th>City</th>    
  37.         <th>Project</th>    
  38.         <th>EmployeeBloodGroup</th>    
  39.         <th>CompanyName</th>    
  40.         <th>PinCode</th>    
  41.     </tr>    
  42.     
  43.     @foreach (EmployeeInfo employeeInfo in Model)    
  44.     {    
  45.         <tr>    
  46.     
  47.             <td>@employeeInfo.EmployeeId</td>    
  48.             <td>@employeeInfo.EmployeeName</td>    
  49.             <td>@employeeInfo.EmployeeDesignation</td>    
  50.             <td>@employeeInfo.DateOfJoining</td>    
  51.             <td>@employeeInfo.EmployeeAddress</td>    
  52.             <td>@employeeInfo.EmployeePassport</td>    
  53.             <td>@employeeInfo.EmployeePhone</td>    
  54.             <td>@employeeInfo.EmployeeAge</td>    
  55.             <td>@employeeInfo.EmployeeGender</td>    
  56.             <td>@employeeInfo.City</td>    
  57.             <td>@employeeInfo.Project</td>    
  58.             <td>@employeeInfo.EmployeeBloodGroup</td>    
  59.             <td>@employeeInfo.CompanyName</td>    
  60.             <td>@employeeInfo.PinCode</td>    
  61.     
  62.         </tr>    
  63.     }    
  64. </table>    
  65.     
  66.     
  67. <h2>List Of Employees Using HTML Helper Method</h2>    
  68. <hr />    
  69.     
  70. <table>    
  71.     <tr>    
  72.         <th>@Html.DisplayNameFor(x => x.EmployeeId)</th>    
  73.         <th>@Html.DisplayNameFor(x => x.EmployeeName)</th>    
  74.         <th>@Html.DisplayNameFor(x => x.EmployeeDesignation)</th>    
  75.         <th>@Html.DisplayNameFor(x => x.DateOfJoining)</th>    
  76.         <th>@Html.DisplayNameFor(x => x.EmployeeAddress)</th>    
  77.         <th>@Html.DisplayNameFor(x => x.EmployeePassport)</th>    
  78.         <th>@Html.DisplayNameFor(x => x.EmployeePhone)</th>    
  79.         <th>@Html.DisplayNameFor(x => x.EmployeeAge)</th>    
  80.         <th>@Html.DisplayNameFor(x => x.EmployeeGender)</th>    
  81.         <th>@Html.DisplayNameFor(x => x.City)</th>    
  82.         <th>@Html.DisplayNameFor(x => x.Project)</th>    
  83.         <th>@Html.DisplayNameFor(x => x.EmployeeBloodGroup)</th>    
  84.         <th>@Html.DisplayNameFor(x => x.CompanyName)</th>    
  85.         <th>@Html.DisplayNameFor(x => x.PinCode)</th>    
  86.     </tr>    
  87.     
  88.     @foreach (EmployeeInfo employInfo in Model)    
  89.     {    
  90.     <tr>    
  91.        <td>@Html.DisplayFor(x => employInfo.EmployeeId)</td>  
  92.        <td>@Html.DisplayFor(x => employInfo.EmployeeName)</td>  
  93.        <td>@Html.DisplayFor(x => employInfo.EmployeeDesignation)</td>  
  94.        <td>@Html.DisplayFor(x => employInfo.DateOfJoining)</td>  
  95.        <td>@Html.DisplayFor(x => employInfo.EmployeeAddress)</td>  
  96.        <td>@Html.DisplayFor(x => employInfo.EmployeePassport)</td>  
  97.        <td>@Html.DisplayFor(x => employInfo.EmployeePhone)</td>  
  98.        <td>@Html.DisplayFor(x => employInfo.EmployeeAge)</td>  
  99.        <td>@Html.DisplayFor(x => employInfo.EmployeeGender)</td>  
  100.        <td>@Html.DisplayFor(x => employInfo.City)</td>  
  101.        <td>@Html.DisplayFor(x => employInfo.Project)</td>  
  102.        <td>@Html.DisplayFor(x => employInfo.EmployeeBloodGroup)</td>  
  103.        <td>@Html.DisplayFor(x => employInfo.CompanyName)</td>  
  104.        <td>@Html.DisplayFor(x => employInfo.PinCode)</td>           
  105.     </tr>    
  106.     }    
  107. </table>     
In the above code, whenever the controller returns list of EmployeeInfo Object from EmployeeInfoList Action Method or View Method, the IEnumerable is used for holding the Collection of object in @model.
 
Here we are using two different ways to render the data to the View or .cshtml file.

The first one is by using Model, and the next one is by using the HTML Helper Method.
 
The output for the Single EmployeeInfo object with two different ways of rendering the data:
 
Models In ASP.NET MVC 5
 
The output for the List of EmployeeInfo object with two different ways of rendering the data:
 
Models In ASP.NET MVC 5
 
Thanks. I hope this helps you.