How to use ViewModels in ASP.NET MVC?

Question

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.

Answer 1

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

Answer 2

You should not use the domain (business) entities in your view model. If you do, a view model is pretty useless since it stills contains business logic which you might not want in the view. The model in your example doesn't really represent a real-world scenario, a view model is not really needed for it anyway.

A more common and trivial example of a view model is a login form: You probably have a domain model called User and you want them to log in. The User domain model can be big and just a small part of it is needed for the authentication. It also contains validation logic for the database which doesn't represent validation logic for the login form.

The User domain model:

public class User
{
    [Required]
    public string UserName { get; set; }

    [Required]
    [MaxLength(36)] // The password is hashed so it won't be bigger than 36 chars.
    public string Password { get; set; }

    public string FullName { get; set; }

    public string SalesRepresentative { get; set; }

    // etc..
}

The above domain model represents the database table thus containing validation logic to ensure integrity.

public class LoginModel
{
    [Display(Name = "User Name")]
    [Required(ErrorMessage = "Please fill in your user name.")]
    public string UserName { get; set; }

    [Required(ErrorMessage = "Please fill in your password.")]
    public string Password { get; set; }

    public bool RememberMe { get; set; }
}

The view model above contains just the properties we need for the login form and has it's own data annotations. This helps you to cleanly separate view logic and business/data logic.