What is Model and ViewModel in MVC Pattern?

Model and ViewModel are two things we always hear in MVC. And in this post I am going to 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 meaning in software development, but here we gone talk about 'model' in MVC design pattern. I would define model as an object that we use to send information to the database, to perform business calculations, to render view. In other word, 'model' represent the domain of the application helps us in saving, creating, updating and deleting records. Usually we put all our model classes in Model folder.

What is ViewModel?

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

Understand it with example

Let's assume, we want to implement a view page that will have three textboxes for Username, Password and Re-enter Password. To achieve 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 sake of view this model works fine. But this is actually a wrong approach because we are trying to overcrowd the database. I can't see any use of 'RePassword' property in database.

Now, if we take the advantage of ViewModel, we can safeguard the database from overcrowding with fields. Here’s how, design following ‘Model’ which 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 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 learn it.

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 above code, after validating the ViewModel I’m transforming the Model or Domain Model. So, by using this way you can stop overcrowding database with unwanted 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 model right? There comes view model.

I created a view model called BlogViewModel that contains latest posts, latest comments and other stuff as properties and I bind my view with this model. The posts, 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 less properties. Finally, view models are for views and most of the times they acts as wrappers over the real domain models.

Hope this helps.