ViewModel In MVC With Example

We all are familiar with Model View Controller (MVC) but in real time project scenario there is one important entity called ViewModel.

In this article we will learn what is ViewModel with example.

Step 1:
Create a new MVC Application, By Selecting Empty Template and adding MVC Core Reference.
 

Step 2:
Now Add a class in Model and give a name 'Stuent.cs'.


Step 3:
Create a Student Property like Roll no, Name and Marks.
  1. public class Student  
  2. {  
  3.     public int RollNo  
  4.     {  
  5.         get;  
  6.         set;  
  7.     }  
  8.     public string Name  
  9.     {  
  10.         get;  
  11.         set;  
  12.     }  
  13.     public double marks  
  14.     {  
  15.         get;  
  16.         set;  
  17.     }  
Step 4: Add Empty controller for your Student Model, create a List and add Student Data.

  1. public ActionResult Index()  
  2. {  
  3.     List < Student > stud = new List < Student >  
  4.       {  
  5.         new Student  
  6.         {  
  7.             RollNo = 1, Name = "Ankur", Marks = 34  
  8.         },  
  9.         new Student  
  10.         {  
  11.             RollNo = 2, Name = "Dhrumit", Marks = 79  
  12.         },  
  13.         new Student  
  14.         {  
  15.             RollNo = 3, Name = "Mannan", Marks = 67  
  16.         }  
  17.     };  
  18.     return View(stud);  
  19.  
Step 5: Right click on Index ActionResult and Add View for the same.

Select 'List' Template and 'Student' ModelClass, it will create View for the Model class.
Step 6 : Run your application and it will display Student's Data.

Step 7:

Now, Lets assume that we have to create a new view for Student. Student who got marks Grater Than 35 highlight in Green Color else in Red color.

We need to write this logic, so let's create a new Viewmodel 'vmStudMarks' in 'Student.cs' file.

Here we will create property for Name, Marks and Colorname, we will use this Colorname field to implement UI Logic. 

Step 8:


Create a ActionResult getStud() and Create a List for Student's data. create a list for ViewModel and write a foreach loop check student's data from List and check if Marks > 35 then ViewModel.Color = Green else set ViewModelColor as Red.
  1. public ActionResult getStud()  
  2. {  
  3.     List < Student > studs = new List < Student >  
  4.       {  
  5.         new Student  
  6.         {  
  7.             RollNo = 1, Name = "Ankur", Marks = 34  
  8.         },  
  9.         new Student  
  10.         {  
  11.             RollNo = 2, Name = "Dhrumit", Marks = 79  
  12.         },  
  13.         new Student   
  14.         {  
  15.             RollNo = 3, Name = "Mannan", Marks = 67  
  16.         }  
  17.     };  
  18.     List < vmStudMarks > vmSt = new List < vmStudMarks > ();  
  19.     foreach(Student stud in studs)  
  20.     {  
  21.         vmStudMarks vm = new vmStudMarks();  
  22.         vm.Name = stud.Name;  
  23.         vm.Marks = stud.Marks.ToString("C");  
  24.         if (stud.Marks > 35)  
  25.         {  
  26.             vm.colorname = "green";  
  27.         } else  
  28.         {  
  29.             vm.colorname = "red";  
  30.         }  
  31.         vmSt.Add(vm);  
  32.     }  
  33.     return View("getStud", vmSt);  
  34. }  
Step 9:

Create a View for the ViewModel 'GetStud' by right click on it, assign template 'List' and ViewModel 'getStud' from the Add View dialog box and click on Add.


Step 10
:

Write the following code in your 'getStud.cshtml' file, so Color we set in our business logic we are assign that in Style property for the Marks.
  1. <span style="background-color:@item.colorname">  
  2. @item.Marks</span> @model IEnumerable  
  3. <vmViewModel.Models.vmStudMarks>  
  4.     @{ ViewBag.Title = "getStud"; }  
  5.     <h2>getStud</h2>  
  6.     <table class="table">  
  7.         <tr>  
  8.             <th>  
  9.                 @Html.DisplayNameFor(model => model.Name)  
  10.             </th>  
  11.             <th>  
  12.                 @Html.DisplayNameFor(model => model.Marks)  
  13.             </th>  
  14.         </tr>  
  15.         @foreach (var item in Model)  
  16.         {  
  17.         <tr>  
  18.             <td>  
  19.                 <span>@item.Name</span>  
  20.             </td>  
  21.             <td>  
  22.                 <span style="background-color:@item.colorname">@item.Marks</span>  
  23.             </td>  
  24.         </tr>  
  25.         }  
  26.     </table> 
Step 11:

Run your application, it will highlight student's record in 'Green' who got marks grater than 35 and else highlight in 'Red'.


Hope you like this blog.