ViewModel In MVC With Example

In this blog we will learn what is ViewModel in MVC and why we need ViewModel in real life project scenario.

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.

public class Student
{
    public int RollNo
    {
        get;
        set;
    }
    public string Name
    {
        get;
        set;
    }
    public double marks
    {
        get;
        set;
    }
}

Step 4: Add Empty controller for your Student Model, create a List and add Student Data.

public ActionResult Index()
{
    List < Student > stud = new List < Student >
      {
        new Student
        {
            RollNo = 1, Name = "Ankur", Marks = 34
        },
        new Student
        {
            RollNo = 2, Name = "Dhrumit", Marks = 79
        },
        new Student
        {
            RollNo = 3, Name = "Mannan", Marks = 67
        }
    };
    return View(stud);
}

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.

public ActionResult getStud()
{
    List < Student > studs = new List < Student >
      {
        new Student
        {
            RollNo = 1, Name = "Ankur", Marks = 34
        },
        new Student
        {
            RollNo = 2, Name = "Dhrumit", Marks = 79
        },
        new Student
        {
            RollNo = 3, Name = "Mannan", Marks = 67
        }
    };
    List < vmStudMarks > vmSt = new List < vmStudMarks > ();
    foreach(Student stud in studs)
    {
        vmStudMarks vm = new vmStudMarks();
        vm.Name = stud.Name;
        vm.Marks = stud.Marks.ToString("C");
        if (stud.Marks > 35)
        {
            vm.colorname = "green";
        } else
        {
            vm.colorname = "red";
        }
        vmSt.Add(vm);
    }
    return View("getStud", vmSt);
}

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.

<span style="background-color:@item.colorname">
@item.Marks</span> @model IEnumerable
<vmViewModel.Models.vmStudMarks>
    @{ ViewBag.Title = "getStud"; }
    <h2>getStud</h2>
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Marks)
            </th>
        </tr>
        @foreach (var item in Model)
        {
        <tr>
            <td>
                <span>@item.Name</span>
            </td>
            <td>
                <span style="background-color:@item.colorname">@item.Marks</span>
            </td>
        </tr>
        }
    </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.