What is Model and ViewModel in MVC Pattern?

Model and ViewModel are two things we always hear about in MVC. In this article I will show you the differences between them.

Let's begin with its common definition.

What is Model or Domain Model?

Actually, the word "model" has hundreds of meanings in software development, but here we will talk about "model" in the context of a MVC design pattern. I would define a model as an object that we use to send information to the database, to perform business calculations and to render a view. In other words, "model" represents the domain of the application that helps us to save, create, update and delete records. Usually we put all our model classes in the Model folder.

What is ViewModel?

ViewModel in the MVC design pattern is very similar to a "model". The major difference between "Model" and "ViewModel" is that we use a ViewModel only in rendering views. We put all our ViewModel classes in a "ViewModels" named folder, we create this folder.

Understand it with an example

Let's assume we want to implement a view page that will have three textboxes for Username, Password and Re-enter Password. To do this we could design a "Model" as given below:

public class Login
{
    public String Username { get; set; }
    public String Password { get; set; }
    public String RePassword { get; set; }
}

For the sake of the view this model works fine. But this is actually an incorrect approach because we are trying to overcrowd the database. I can't see any use of the "RePassword" property in the database.

Now, if we take the advantage of a ViewModel, we can safeguard the database from redundant data. Here's how, design the following "Model" that will be our Domain Model:

 

//this will represent domain of the application
public class Login
{
    public String Username { get; set; }
    public String Password { get; set; }
}

And then following "ViewModel"

//this will help in rendering great views
public class LoginViewModel
{
    public String Username { get; set; }
    public String Password { get; set; }
    public String RePassword { get; set; }
}

Now, when adding the view, pick the ViewModel class to get the strongly-typed benefits.



Now the question is, how do we transform the Model or Domain Model from the "ViewModel"? Let's see how.

Transforming Model from ViewModel

There are various ways to do this. In the form POST action we can create a new object of type Login model and then assign the properties one by one and leave the unwanted properties.

[HttpPost]
public ActionResult Login(LoginViewModel viewModel)
{
    //validate the ViewModel
    //transforming Model (Domain Model) which is Login from ViewModel which is LoginViewModel
    var login = new Login()
    {
        Username = viewModel.Username,
        Password = viewModel.Password
    };
    //save the login var
    return View();
}

In the code above, after validating the ViewModel I'm transforming the Model or Domain Model. So, by using this way you can stop overcrowding the database with unnecessary fields.

Let's look at one more use of ViewModel

I've a blog where I want to display the list of the latest posts, latest comments, post categories in a single view. How I can do that? I can strongly type my view to any one of the models, right? Here comes the view model.

I created a view model called BlogViewModel that contains the latest posts, latest comments and other stuff as properties and I bind my view with this model. The posts and comments are domain models while the BlogViewModel is the view model I created specially for the view.

Tomorrow I'll show my blog in a mobile version and at that time I may create a simple view model that contains only fewer properties. Finally, view models are for views and usually they acts as wrappers over the real domain models.

Hope this helps.