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.

I Hope this will help you to understand the use of Model and ViewModel.