Model in MVC application

Model provides the core data for MVC application. Normally Model objects access data from the database, such as SQL Server, and perform the different operations (Edit, Update, delete etc.) and revert back to database. Model classes are located in the Models Folder.

mvc application model

After adding the Model, View, and controller the folder structure will as given image. Here
Model is Employee.cs
View is EmpDetails.cshtml
Controller is EmployeeController.cs

Add Model Class

In Solution Explorer, right click the Modelsfolder, select Add, and then select New Item. In the Add New Item dialog, select Class then name the class "Employee". Add the properties to the Employee class:

Code of Employee.cs file

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

namespace MVCDemo.Models
{
    public class Employee
    {
        public int EmpID { get; set; }
        public string EmpName { get; set; }
        public string Gender { get; set; }
        public string City { get; set; }
        public double Salary { get; set; }
    }
}

Add the controller

  • Re-Build your project: Select Debug, and then Build MVCDemo from the menu.
  • In the Solution Explorer, right-click the Controllers folder, and select Add and then Controller
  • Set controller name as EmployeeController
  • Select template: Empty MVC controller
  • Click Add

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

namespace MVCDemo.Controllers
{
    public class EmployeeController : Controller
    {    
        public ActionResult EmpDetails()
        {
            Employee emp=new Employee()
            {
                EmpID=10,
                EmpName="Raj",
                Gender="Male",
                City="Pune",
                Salary=25000
            };
            return View(emp);
        }
    }
}


Use namespace MVCDemo.Models, so there is no need to write fully qualified name every time.

Add the View

  • Build the application.
  • Right click on the action method EmpDetails(), of controller EmployeeController.
  • Select view engine as Rozor(CSHTML).
  • Check the checkbox “create a strongly typed view”
  • Select the Employee (MVCDemo.Models) from the dropdown list.
  • Click on Add button.
mvc demo

EmpDetails.cshtml file:

@model MVCDemo.Models.Employee
@{
    ViewBag.Title = "EmpDetails";
   }

<h2>Employee Details</h2><br />
<style>
    table, th, td
     {
        border: 1px solid grey;
        border-collapse: collapse;
        padding: 5px;
      }
        table tr:nth-child(odd)
        {
            background-color: #ffe6e6;
        }
        table tr:nth-child(even)
        {
            background-color: #ccffcc;
        }
</style>

<table style="font-family:Arial; font-size:medium; color:darkblue">
    <tr>
        <td><b>EmpID</b></td>
        <td >@Model.EmpID</td>
    </tr>
    <tr>
        <td><b>EmpName</b></td>
        <td>@Model.EmpName</td>
    </tr>
    <tr>
        <td><b>Gender</b></td>
        <td>@Model.Gender</td>
    </tr>
    <tr>
        <td><b>City</b></td>
        <td>@Model.City</td>
    </tr>
    <tr>
        <td><b>Salary</b></td>
        <td>@Model.Salary</td>
    </tr>
</table>


On executing the application you will get the output as follows:

employee

In the above example We used hard coded data as database, but in real world application the data came from persistent medium, such as Microsoft sql server.

In model object We have created a class name employee and their properties. These employee properties are initialized manually in controller. Note that you have to pass the employee object in return statement of view.

Please keep in mind that when you run the application, the default view will be executed. You have to explicitly write the name of controller and its action method as follows.

http://localhost:57498/Employee/EmpDetails

Probably the port number will be different. The controller responds to the URL request. It gets the data from model and provides to view object. After getting the data view renders the page.
▲