Models In ASP.NET MVC Application

In this article you will learn about models in ASP.NET MVC application. I am going to discuss the Models in an example ASP.NET MVC application.

Introduction

 
This article will explain to you what model is in ASP.NET MVC web applications. I am going to discuss the Models in ASP.NET MVC application with an example.
 

What are Models in ASP.NET MVC?

 
The Models in ASP.NET MVC application are the components which contain a set of classes that are used to represent the business data as well as logic to manage the business data. So in simple word we can say that the model in ASP.NET MVC is used to manage the domain data i.e. the state of the application in memory.
 
Note
It is not mandatory, but it is a good programming practice to store all model classes within the Models folder of MVC application.
 
Let’s understand the model with an example,
 
Step 1
 
Open Visual Studio 2015 or version of your choice and create new project.
 
Step 2
 
Choose web application project and give appropriate name of your project.
 
Models In ASP.NET MVC Application
 
Step 3
 
Select MVC template below and click on ok.
 
Models In ASP.NET MVC Application
 
Step 4
 
Right click on models folder, choose “Add” then select “class” and click on it.
 
Models In ASP.NET MVC Application
 
Add new item window will popup choose class and give appropriate name to it, click on “Add”.
 
Models In ASP.NET MVC Application
 
Write the following code in Employee class.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5.    
  6. namespace MyFirstMvcApplication.Models  
  7. {  
  8.     public class Employee  
  9.     {  
  10.         public int Id { getset; }  
  11.         public string Name { getset; }  
  12.         public string Gender { getset; }  
  13.         public string PhoneNumber { getset; }  
  14.         public string EmailAddress { getset; }  
  15.         public string Position { getset; }  
  16.         public int Salary { getset; }  
  17.     }  
  18. }  
Similarly “Add” another class name it EmployeeLayer,
 
Models In ASP.NET MVC Application
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5.    
  6. namespace MvcModel_Demo.Models  
  7. {  
  8.     public class EmployeeLayer  
  9.     {  
  10.         public Employee GetEmployeeDetails(int Id)  
  11.         {  
  12.             //Here we hardcoded the data  
  13.             //usually we retrieve data from the database  
  14.             Employee employee = new Employee()  
  15.             {  
  16.                 Id = 101,  
  17.                 Name = "Farhan Ahmed",  
  18.                 Gender = "Male",  
  19.                 PhoneNumber = "9035803116",  
  20.                 EmailAddress = "farhan1086@gmail.com",  
  21.                 Position = "Software Developer",  
  22.                 Salary = 60000  
  23.             };  
  24.             return employee;  
  25.         }  
  26.     }  
  27. }  
Step 5
 
Right click on controllers folder and add controller.
 
Models In ASP.NET MVC Application
 
A window will appear. Choose MVC5 Controller-Empty and click "Add".
 
Models In ASP.NET MVC Application
 
After clicking on "Add", another window will appear with DefaultController. Change the name to HomeController and click "Add". The HomeController will be added under the Controllers folder. Don’t change the Controller suffix for all controllers, change only the highlight, and instead of Default, just change Home,
 
Models In ASP.NET MVC Application
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using MvcModel_Demo.Models;  
  7.    
  8. namespace MvcModel_Demo.Controllers  
  9. {  
  10.     public class HomeController : Controller  
  11.     {  
  12.         // GET: Home  
  13.         public ActionResult Index()  
  14.         {  
  15.             var employeeLayer = new EmployeeLayer();  
  16.             Employee employee = employeeLayer.GetEmployeeDetails(Id:101);  
  17.             return View(employee);  
  18.         }  
  19.     }  
  20. }  
Step 6
 
Right click on Index method in HomeController and the "Add View" window will appear with default index name checked (use a Layout page), and click on "Add.
 
Models In ASP.NET MVC Application
 
Code for Index View
  1. @model MvcModel_Demo.Models.Employee  
  2.    
  3. @{  
  4.     ViewBag.Title = "Index";  
  5. }  
  6.    
  7. <div>  
  8.     <h3>Employee Details</h3>  
  9.     <hr />  
  10.     <dl class="dl-horizontal">  
  11.         <dt>  
  12.             @Html.DisplayNameFor(model => model.Name)  
  13.         </dt>  
  14.    
  15.         <dd>  
  16.             @Html.DisplayFor(model => model.Name)  
  17.         </dd>  
  18.    
  19.         <dt>  
  20.             @Html.DisplayNameFor(model => model.Gender)  
  21.         </dt>  
  22.    
  23.         <dd>  
  24.             @Html.DisplayFor(model => model.Gender)  
  25.         </dd>  
  26.    
  27.         <dt>  
  28.             @Html.DisplayNameFor(model => model.PhoneNumber)  
  29.         </dt>  
  30.    
  31.         <dd>  
  32.             @Html.DisplayFor(model => model.PhoneNumber)  
  33.         </dd>  
  34.    
  35.         <dt>  
  36.             @Html.DisplayNameFor(model => model.EmailAddress)  
  37.         </dt>  
  38.    
  39.         <dd>  
  40.             @Html.DisplayFor(model => model.EmailAddress)  
  41.         </dd>  
  42.    
  43.         <dt>  
  44.             @Html.DisplayNameFor(model => model.Position)  
  45.         </dt>  
  46.    
  47.         <dd>  
  48.             @Html.DisplayFor(model => model.Position)  
  49.         </dd>  
  50.    
  51.         <dt>  
  52.             @Html.DisplayNameFor(model => model.Salary)  
  53.         </dt>  
  54.    
  55.         <dd>  
  56.             @Html.DisplayFor(model => model.Salary)  
  57.         </dd>  
  58.    
  59.     </dl>  
  60. </div>  
Step 7
 
Build and run your project with ctrl+F5.
 
Models In ASP.NET MVC Application