What is ViewModel in MVC?

People usually get scared and confused when they hear the word
View Model in MVC. View Model is a hidden layer in ASP.NET MVC applications.

View Model is not a part of MVC. It’s something brought up by the community for maintaining SOC.

SOC –Separation of concerns – It means everyone will do only that which is meant for them. In case of MVC:

• Model will handle Business logic and Business data, it won’t do anything else.
• Controller will handle only user interaction logic. User interaction logic means logic which will handle the user’s requests.
• View will contain User interface – Design with user will interact.

Let’s understand Why ViewModel is required when SOC is already implemented in MVC and How ViewModel does that?

Did you even try to ask yourself this question?

“What all logic do I write?”

If yes, this must have been your answer:

Let’s talk about each of the above logics in conjunction with ASP.NET MVC(Model View Controller).

Business Logic – Is a part of Model

Database Logic – This is the one of the non-spoken layers in MVC. Many people create a separate layer for this and invoke them from Business layer (model) or some keep them inside Model.

User Interaction logic – written inside controller

Presentation Logic – Presentation logic is the logic which will handle the presentation of a UI. Example – If some value is greater than 100, it should be displayed in green color. Basically it is a part of View.

Data transformation logic – In some situations, we have some data with us and we want to display it in a different format. Example, we have Date-of-birth and we want to display Age. Again, this transformation becomes the part of View.

SOC is violated here because Presentation logic and Data transformation logic is part of view now. View is meant for design, so it should not contain any logic and that’s where ViewModel comes into the picture. It takes out that logic out of view.

Let’s see the demo.

Demo Without View Model

Let ‘s say we have model like below:

public class Customer
{
   public string Name { get; set; }
   public DateTime DateOfBirth { get; set; }
   public int Sales { get; set; }
}

Our controller code looks like this:

public class CustomerController : Controller
{
    publicActionResult Show()
    {
        Customere = GetCustomer();
        return View(e);
    }
    …
}

And finally View:

Customer Detail
Customer Name : @Model. Name
@* Data Transformation logic starts here *@
@{ 
      int age = DateTime.Now.Year - Model.DateOfBirth.Year; 
      if (Model.DateOfBirth > DateTime.Now.AddYears(-age)) { age--; } 
 } 

Age : @age 
@* Data Transformation logic ends here *@ 

@* Presentation logic starts here *@
@if (Model.Sales > 20000) 
{ 
      <span style='color:red'>Sales: @Model.Sales </span>
} 
else 
{ 
      <span style='color:blue'>Sales: @Model.Sales </span>
} 
@* Presentation logic ends here *@

Demo With View Model

In this case, our model remains same.

Our ViewModel looks like this:

public class CustomerVM
{
   private Customercust { get; set; }

    publicCustomerVM(Customer c1)
    {
         cust= e1;
    }
    public string Name
    {
         get
         {
             return cust.Name;
         }
    }
    public int Age
    {
        get
        {
            int age = DateTime.Now.Year - cust.DateOfBirth.Year;
            if (cust.DateOfBirth>DateTime.Now.AddYears(-age))
            {
                age--;
            }
            return age;
        }
    }
    public string SalesColor
    {
        get
        {
            if(cust.Sales>20000)
            {
                return "red";
            }
            else
            {
                return "green";
            }
        }
    }
}

Controller code will get changed a little bit:

public class CustomerController : Controller
{
    public ActionResult Show()
    {
        Customer e = GetCustomer();
        CustomerVM v=new CustomerVM(e);
        return View(v);
    }
    …
}

And finally our simple View:

Customer Detail
Name : @Model.Name
Age : @Model.Age
Salary : @Model. Sales

SOC is achieved View is simple design, and presentation logic and data transformation logic are placed in ViewModel.

Is it the End?

No, there is one more advantage of View model. In some cases, we came up with a requirement where we want to display multiple details in the same view.

Example – Display both Customer and Supplier on the same screen.

In this case, we will create a simple class called CustomerSupplierVM as below:

public class CustomerSupplierVM
{
  public Customer customer{get;set;}
  public Supplier supplier{get;set;}
}

This class (view model) will be used for making the view strongly typed view.

See the following video on creating a simple model using MVC (Model view controller) template:

Hope you enjoyed reading this article.

CodeProject