How to use ViewModels in ASP.NET MVC?

asp.net-mvc, asp.net-mvc-viewmodel, c#, viewmodel

Solution

your view model should look like this

public class AddViewModel
    {
        public int a { get; set; }
        public int b { get; set; }
        public int Total { get; set; }
    }

and in the cshtml

            <td class="tdCol2Align">
                @Html.TextBoxFor(m=> m.a)
            </td>

            <td class="tdCol2Align">
                @Html.TextBoxFor(m=> m.b)
            </td>

in the controller

        [HttpPost]
        public JsonResult Add(AddViewModel model)
        {
            int iSum = model.a + model.b;
            model.Total = iSum;
            return Json(model);

        }

Edit

View model is there to render your views don't place any logic inside that. if you have more complex model then it will be hard to map `Model` with `ViewModel`. for this you can use AutoMapper or ValueInjector for mapping between model and view model.

link for automapper http://automapper.codeplex.com/

link for value injector http://valueinjecter.codeplex.com/

hope this helps

Problem

I just started learning about ViewModels in ASP.NET MVC. So, I thought of implementing a sample example as below: Business Entity ``` public class AddModel { public int a { get; set; } public int b { get; set; } public int Add() { return (this.a + this.b); } } ``` Add ViewModel ``` public class AddViewModel { public AddModel addModel; public int Total { get; set; } } ``` Controller ``` public class AddController : Controller { [HttpPost] public JsonResult Add(AddViewModel model) { int iSum = model.addModel.a + model.addModel.b; model.Total = iSum; return Json(model); } public ActionResult Index() { return View(); } } ``` View Implementation ``` @model ViewModelApplication.AddViewModel <script type="text/javascript" src="../../Scripts/MicrosoftAjax.js"></script> <script src="../../Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script> <script type="text/javascript"> function Callback(data) { alert("I am sucess call"); } function Failed() { alert("I am a failure call"); } </script> @using (Ajax.BeginForm("Add", "Add", new AjaxOptions { OnSuccess = "Callback", OnFailure = "Failed" })) { <table align="center"> <tr> <td class="tdCol1Align"> <label> Number1</label> </td> <td class="tdCol2Align"> @Html.TextBoxFor(Model => Model.addModel.a) </td> </tr> <tr> <td class="tdCol1Align"> <label> Number2</label> </td> <td class="tdCol2Align"> @Html.TextBoxFor(Model => Model.addModel.b) </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="Add" class="button" /> </td> </tr> </table> } ``` The problem here is that I am unable to retrieve the values entered into the text boxes whenever the `Add` button is clicked; the corresponding AJAX action is being it. When I try to access the values of `a` and `b`, I get nulls instead of the values entered into the text boxes. I am not sure where I am going wrong. Please help.

Original source