View Model in Asp.Net MVC

by Sachin Singh


Posted on Thursday, 02 April 2020

Tags: ViewModel ViewModel in MVC How to use view model in mvc Asp.Net MVC ViewModel what is viewmodel in mvc3 viewmodels in mvc3 razor view model in asp.net mvc example mvc view model example

MVC is an architectural pattern which separates your application into three major parts for better maintenance and processing.

Asp.Net MVC just follows the principles of MVC architectural pattern. Where Model represents business Entities and business Logic, View represents the UI(Html) and controller handles the http request and coordinates with Model and View to process the request.

It should be very clear that in MVC the view is only for UI that is pure Html and nothing else. Any other Logic in view is actually violation of MVC principles and considered as bad programming practice.

Now see the below pictures, which will clear your every doubt that why putting any kind of logic in view is a bad idea.

Model
Student Model
Action Method
Action Method
View
View
Output
Final Result
The final output is good and expected, yet it has the following problems.

Why putting Presentation Logic in View is bad:-

Here, If Student's Total Marks are less than or equals to 250, his marks are showing in red which symbolizes the student has failed in the examination and if his marks are greater than 250, then the mark is showing in green meaning he has cleared the examination.

Now, wait for a moment and think, if tomorrow the criteria for passing the examination changes from 250, then we will have to change the UI also, but in reality, a UI should only change when any Html related modification is needed .

Why putting Data Transformation Logic in View is bad:-

Here, I am converting the Student's Date of Birth into age by calculating the difference from the present date, what if, tomorrow the requirement changes and age needs to be calculated differently like instead of the present date the age should be calculated from a specific date. Again we will have to change the UI, which is obviously not good.

Why ViewBag is bad/How to create strongly typed view based on two model classes:-

ViewBag does boxing and unboxing, accepts Key as a string, and does not support IntelliSense which is bad for performance and can be error-prone. That is why the strongly typed view is always recommended. But a view can only use one model at a time, so using Teacher Model class and Student model class collectively becomes impossible.

All the above problems can be solved by creating another layer Called as View Model. As the name says, a view model is specific to a view and not to the business entities.

  1. Any data transformation logic will be handled by the view model.
  2. Any presentation Logic will be handled by the view model.
  3. A view model can contain any number of properties or can be created with two or more model classes.



Let's replace the Student model used in the above example with StudentTeacherVM and see how it solves the problems.

ViewModel
View Model
View with viewMode
View with view model
Final Result
Final Result

As you can see, the final result is same and all the problems has been solved. This is the power of view model.



Finally any professional MVC project has below structure.

MVC complete Architecture
New MVC architecture