Advantages of ViewModel in MVC (Model View Controller)

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 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 tried to ask yourself this question?

“What all logics do I write?”

If yes, this must have been your answer:

Let’s talk about each of the above login 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 those 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; }
publicDateTimeDateOfBirth { get; set; }
publicintSales { get; set; }
}

Our controller code looks like below:

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

And finally View:

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
{
returncust.Name;
}
}
publicint 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
{
publicActionResult Show()
    {
        Customer e = GetCustomer();
CustomerVM v=new CustomerVM(e);
return View(v);
    }…
}

And finally our simple View:

SOC is achieved View is simple design, and presentation logic and data transformation logic is 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 in 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 simple model using MVC (Model view controller) template:

Hope you enjoyed reading this article. 

CodeProject