Friday 27 November 2015

What is View Model in MVC.

View Model work as a hidden layer in MVC applications. It’s a simple class that represents data displaying on the view.

If you will look into MVC, view model is not in the picture. Like;

Model: Used to maintain the business data.
Controller: Maintaining the interaction related details to View.
View: Contains the User Interface.

So, Where is the View model?

When someone first time ask me what is View Model in MVC? I told there is No View Model in MVC.


Now, its fact but it is maintain by Separation of Concern (SOC). We use it based on when it needs to us.

E.g. Presentation Login of Model View suppose we are maintaining the Patient temperature and for it we have fields in DB as customer name and temperature. But in UI we want to maintain the Colour code based on temperature. We create new property in Model as temperature status and show the colour code in View.

1. Creation of Model with View Model;
  public class PatientModel
    {
        [Display(Name = "Patient Name")]
        public string PatientName { get; set; }

         [Display(Name = "Temprature")]
        public double Temprature { get; set; }

         [Display(Name = "Status")]
        public string TempratureStatus { get; set; }
    }


2. Controller we have assign the value as;
public ActionResult DisplayTemprature()
        {
            PatientModel obj = new PatientModel();
            obj.PatientName = "Patient 1";
            obj.Temprature = 98.2;

            return View(obj);
        }


3. In View
<table>
    <tr>
        <td> @Html.LabelFor(m => m.PatientName) </td>
        <td>@Html.TextBoxFor(m => m.PatientName)</td>
    </tr>
    <tr>
        <td> @Html.LabelFor(m => m.Temprature) </td>
        <td>@Html.TextBoxFor(m => m.Temprature)</td>
    </tr>
    <tr>
        <td> @Html.LabelFor(m => m.TempratureStatus) </td>
      
        <td>
        @if (Model.Temprature > 98) {
        <span style="background-color:red">High Temprature</span>
        }
        else
        {
             <span style="background-color:green">Normal Temprature</span>
        }
       
        </td>
    </tr>
</table>


4. Output you will get with it as;



So, from above example also you can find out that Model view is work with Logic. Model View defined with following Logic:
  1. Presentation Logic: Which is handling in UI or presentation layer like above example.
  2. Aggregation Logic : Suppose you have two different Model but you want to show both of the model in one View will use aggregation Logic. See Example Below.
  3. Business Logic: Which is part of Model.
  4. Data Transformation Logic: Suppose you have date of birth and you want to show the age of person on that case you can use data transformation logic.
  5.  Structuring Model : Suppose you have three property in Model like ID, EmplyeeID and Emplyee name but you want to display EmplyeeName only on that can we use View Model.

e.g. Aggregation  logic of View Model suppose you have two model Patient Detail and there Checkup detail and you want to show both in one view, So in this case View model will behave as a mediator between them and need to create one viewmodel class like below;

  1. Create two models and creating the instance in one as;
public class PatientModel
    {
        public string PatientName { get; set; }

        public string Address { get; set; }

    }

    public class CheckupDetailModel
    {
        public string Examination { get; set; }

        public double Medicine { get; set; }
    }

    public class PatientCheckup
    {
        public PatientModel patient { get; set; }
        public CheckupDetailModel checkup { get; set; }
       }

  1. Taking the reference of that mode

  1. Now you can see the property of both the model like below;


No comments:

Post a Comment