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