ViewModel in ASP.NET MVC

« Previous Next »

ViewModel

What is a ViewModel ?

a single model object may not always provide all the data needed for a view. For example, a view might require multiple pieces of model data. In such cases, the concept of a ViewModel is used. A ViewModel in ASP.NET MVC is a model that combines multiple data models necessary for a specific view. Since this model is designed for a particular view, it is referred to as a ViewModel in ASP.NET MVC.

Creating the Models:

create a class file named Employee.cs inside the Models folder. This Employee model will represent basic details such as name, gender, department, etc. After creating the Employee.cs file, insert the following code into it.


namespace FirstMVCDemo.Models
{
    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Gender { get; set; }
        public string Department { get; set; }
        public decimal Salary { get; set; }
        public int AddressId { get; set; }
    }
}

Next, we need to create the Address model to represent employee address details like City, State, and Country. To do this, create a class file named Address.cs inside the Models folder and then insert the following code into it.


namespace FirstMVCDemo.Models
{
    public class Address
    {
        public int AddressId { get; set; }
        public string Country { get; set; }
        public string State { get; set; }
        public string City { get; set; }
        public string Pin { get; set; }
    }
}

Creating the ViewModel:

Now, we need to create a ViewModel to hold the necessary data for a specific view. The ViewModel we are about to create will combine the Employee model, the Employee Address model, and additional properties such as the title and page header.

ViewModels can be created anywhere within the project. However, following best practices, it is recommended to organize all ViewModels within a dedicated folder named ViewModels.

First, create a folder named ViewModels, then add a class file called EmployeeDetailsViewModel.cs inside it. After that, insert the following code into the file.


using FirstMVCDemo.Models;
namespace FirstMVCDemo.ViewModels
{
    public class EmployeeDetailsViewModel
    {
        public Employee Employee { get; set; }
        public Address Address { get; set; }
        public string PageTitle { get; set; }
        public string PageHeader { get; set; }
    }
}

We have created a ViewModel class named EmployeeDetailsViewModel. In this name, "Employee" represents the controller, "Details" corresponds to the action method, and "ViewModel" is prefixed to indicate that it is a ViewModel. While following this naming convention is not mandatory, I personally find it a good practice.

Creating Employee Controller:

Right-click on the Controllers folder, add a new MVC 5 Empty Controller named EmployeeController.cs, and then insert the following code into it.


using FirstMVCDemo.ViewModels;
using FirstMVCDemo.Models;
using System.Web.Mvc;
namespace FirstMVCDemo.Controllers
{
    public class EmployeeController : Controller
    {
        public ViewResult Details()
        {
            //Employee Basic Details
            Employee employee = new Employee()
            {
                EmployeeId = 101,
                Name = "Daniya shaikh",
                Gender = "Female",
                Department = "IT",
                Salary = 10000,
                AddressId = 1001
            };
            //Employee Address
            Address address = new Address()
            {
                AddressId = 1001,
                City = "Aurangabad",
                State = "Maharashtra",
                Country = "India",
                Pin = "431001"
            };
            //Creating the View model
            EmployeeDetailsViewModel employeeDetailsViewModel = new EmployeeDetailsViewModel()
            {
                Employee = employee,
                Address = address,
                PageTitle = "Employee Details Page",
                PageHeader = "Employee Details",
            };
            //Pass the employeeDetailsViewModel to the view
            return View(employeeDetailsViewModel);
        }
    }
}

As shown in the code above, we are passing the EmployeeDetailsViewModel as a parameter to the view. Additionally, it's important to note that we are no longer using ViewData or ViewBag within our Details action method.

Create the ViewModel:

create a folder named Employee inside the Views folder of your application. After that, add a view file named Details.cshtml inside the Employee folder and insert the following code into it.


@model FirstMVCDemo.ViewModels.EmployeeDetailsViewModel
@{ 
    Layout = null;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
         <title>@Model.PageTitle</title>
</head>
<body>
         <h1>@Model.PageHeader</h1>
         <div>
        EmployeeID : @Model.Employee.EmployeeId
    </div>
         <div>
        Name : @Model.Employee.Name
    </div>
         <div>
        Gender : @Model.Employee.Gender
    </div>
         <div>
        Department : @Model.Employee.Department
    </div>
         <div>
        Salary : @Model.Employee.Salary
    </div>
         <h1>Employee Address</h1>
         <div>
        City : @Model.Address.City
    </div>
         <div>
        State : @Model.Address.State
    </div>
         <div>
        Country : @Model.Address.Country
    </div>
         <div>
        Pin : @Model.Address.Pin
    </div>
</body>
</html>

the Details view can access the EmployeeDetailsViewModel object. Using the @model directive, we specify EmployeeDetailsViewModel as the model for the Details view. We then use the @Model property to access the Employee, Address, PageTitle, and PageHeader properties. Next, run the application and navigate to the /Employee/Details URL. You should see the expected output, as shown in the image below.

« Previous Next »