Models In 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.

 

 

Step 3

 

Select MVC template below and click on ok.

 

 

Step 4

 

Right click on models folder, choose “Add” then select “class” and click on it.

 

 

Add new item window will popup choose class and give appropriate name to it, click on “Add”.

 

 

Write the following code in Employee class.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MyFirstMvcApplication.Models
{
    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Gender { get; set; }
        public string PhoneNumber { get; set; }
        public string EmailAddress { get; set; }
        public string Position { get; set; }
        public int Salary { get; set; }
    }
}

Similarly “Add” another class name it EmployeeLayer,

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcModel_Demo.Models
{
    public class EmployeeLayer
    {
        public Employee GetEmployeeDetails(int Id)
        {
            //Here we hardcoded the data
            //usually we retrieve data from the database
            Employee employee = new Employee()
            {
                Id = 101,
                Name = "Farhan Ahmed",
                Gender = "Male",
                PhoneNumber = "9035803116",
                EmailAddress = "[email protected]",
                Position = "Software Developer",
                Salary = 60000
            };
            return employee;
        }
    }
}

Step 5

 

Right click on controllers folder and add controller.

 

 

A window will appear. Choose MVC5 Controller-Empty and click "Add".

 

 

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,

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcModel_Demo.Models;

namespace MvcModel_Demo.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            var employeeLayer = new EmployeeLayer();
            Employee employee = employeeLayer.GetEmployeeDetails(Id:101);
            return View(employee);
        }
    }
}

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.

 

 

Code for Index View

@model MvcModel_Demo.Models.Employee

@{
    ViewBag.Title = "Index";
}

<div>
    <h3>Employee Details</h3>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.Name)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Name)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Gender)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Gender)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.PhoneNumber)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.PhoneNumber)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.EmailAddress)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.EmailAddress)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Position)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Position)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Salary)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Salary)
        </dd>

    </dl>
</div>

Step 7

 

Build and run your project with ctrl+F5.