Click here to Skip to main content
13,139,569 members (54,025 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

46.8K views
12 bookmarked
Posted 6 Oct 2014

Advantages of ViewModel in MVC (Model View Controller)

, 6 Oct 2014
Rate this:
Please Sign up or sign in to vote.
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. 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Marla Sukesh
Instructor / Trainer Train IT
India India
Learning is fun but teaching is awesome.

Code re-usability is my passion ,Teaching and learning is my hobby, Becoming an successful entrepreneur is my goal.

By profession I am a Corporate Trainer.
I do trainings on WCF, MVC, Business Intelligence, Design Patterns, HTML 5, jQuery, JSON and many more Microsoft and non-Micrsoft technologiees.

Find my profile here



My sites



@Twitter
@Facebook

You may also be interested in...

Pro

Comments and Discussions

 
QuestionDefinitely Pin
Nji, Klaus10-Oct-14 11:38
memberNji, Klaus10-Oct-14 11:38 
AnswerRe: Definitely Pin
Marla Sukesh15-Oct-14 22:57
professional Marla Sukesh15-Oct-14 22:57 
QuestionI agree -- and disagree Pin
Wayne Hiller8-Oct-14 12:17
memberWayne Hiller8-Oct-14 12:17 
AnswerRe: I agree -- and disagree Pin
Marla Sukesh15-Oct-14 22:56
professional Marla Sukesh15-Oct-14 22:56 
GeneralMy vote of 5 Pin
Antonio Ripa7-Oct-14 5:16
professionalAntonio Ripa7-Oct-14 5:16 
GeneralRe: My vote of 5 Pin
Marla Sukesh15-Oct-14 22:56
professional Marla Sukesh15-Oct-14 22:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170915.1 | Last Updated 7 Oct 2014
Article Copyright 2014 by Marla Sukesh
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid