title: ASP.NET MVC3: Ajax postback doesnot post complete data from the view
body: <p>Hi Greetings for the day!</p>
  
  <h3>(1) The view model <i>(MyViewModel.cs)</i> which is bound to the view is as below...</h3>
  
  <pre><code>public class MyViewModel
  {    
     public int ParentId { get; set; }  //property1       
     List&lt;Item&gt; ItemList {get; set;}   //property2
  
     public MyViewModel()   //Constructor
     {
       ItemList=new List&lt;Item&gt;();  //creating an empty list of items
     }
  }
  </code></pre>
  
  <h3>(2) I am calling an action method through ajax postback <i>(from MyView.cshtml view)</i> as below..</h3>
  
  <pre><code>function AddItem() {
      var form = $('#MyForm');
      var serializedform = form.serialize();
      $.ajax({
          type: 'POST',
          url: '@Url.Content("~/MyArea/MyController/AddItem")',
          cache: false,
          data: serializedform,
          success: function (html) {$('#MyForm').html(html);}
      });
  }
  </code></pre>
  
  <p><strong>The below button click will call the ajax postback...</strong></p>
  
  <pre><code>&lt;input type="button" value="Add" class="Previousbtn" onclick="AddItem()" /&gt;
  </code></pre>
  
  <h3>(3) I have an action method in the <i>(MyController.cs controller)</i> as below...</h3>
  
  <pre><code>public ActionResult AddItem(MyViewModel ViewModel)
  {
     ViewModel.ItemList.Add(new Item());
     return View("MyView", ViewModel);
  }
  </code></pre>
  
  <p><strong>Now the issue is, after returning from the action, there is no data in the viewmodel. But i am able to get the data on third postback !! Can you pls suggest the solution..</strong></p>
  
  <blockquote>
    <p>The complete form code in the view is below...</p>
  </blockquote>
  
  <pre><code>    @model MyViewModel
  
      &lt;script type="text/javascript" language="javascript"&gt;
          function AddItem() {
              var form = $('#MyForm');
              var serializedform = form.serialize();
              $.ajax({
                  type: 'POST',
                  url: '@Url.Content("~/MyArea/MyController/AddItem")',
                  cache: false,
                  data: serializedform,
                  success: function (html) {
                      $('#MyForm').html(html);
                  }
              });
          }
  
          function RemoveItem() {
              var form = $('#MyForm');
              var serializedform = form.serialize();
              $.ajax({
                  type: 'POST',
                  url: '@Url.Content("~/MyArea/MyController/RemoveItem")',
                  cache: false,
                  data: serializedform,
                  success: function (html) {
                      $('#MyForm').html(html);
                  }
              });
          }
  
       function SaveItems() {    
          var form = $('#MyForm');
          var serializedform = forModel.serialize();
          $.ajax({
              type: 'POST',
              url: '@Url.Content("~/MyArea/MyController/SaveItems")',
              cache: false,
              data: serializedform,
              success: function (html) {
                  $('#MyForm').html(html);
              }
          });
      }
  
      &lt;/script&gt;
      @using (Html.BeginForm("SaveItems", "MyController", FormMethod.Post, new { id = "MyForm" }))
      {    
          @Html.HiddenFor(m =&gt; Model.ParentId)
          &lt;div&gt;
               &lt;input type="button" value="Save" onclick="SaveItems()" /&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td style="width: 48%;"&gt;
                          &lt;div style="height: 500px; width: 100%; overflow: auto"&gt;
                              &lt;table&gt;
                                  &lt;thead&gt;
                                      &lt;tr&gt;
                                          &lt;th style="width: 80%;"&gt;
                                              Item
                                          &lt;/th&gt;
                                          &lt;th style="width: 10%"&gt;
                                              Select
                                          &lt;/th&gt;
                                      &lt;/tr&gt;
                                  &lt;/thead&gt;
                                  @for (int i = 0; i &lt; Model.ItemList.Count; i++)
                                  {
                                      @Html.HiddenFor(m =&gt; Model.ItemList[i].ItemId)                                
                                      @Html.HiddenFor(m =&gt; Model.ItemList[i].ItemName)                                
                                      &lt;tr&gt;
                                          @if (Model.ItemList[i].ItemId &gt; 0)
                                          {
  
                                              &lt;td style="width: 80%; background-color:gray;"&gt;
                                                  @Html.DisplayFor(m =&gt; Model.ItemList[i].ItemName)
                                              &lt;/td&gt;
                                              &lt;td style="width: 10%; background-color:gray;"&gt;
                                                  &lt;img src="@Url.Content("~/Images/tick.png")" alt="Added"/&gt;
                                                  @Html.HiddenFor(m =&gt; Model.ItemList[i].IsSelected)
                                              &lt;/td&gt;
                                          }
                                          else
                                          {                            
                                              &lt;td style="width: 80%;"&gt;
                                                  @Html.DisplayFor(m =&gt; Model.ItemList[i].ItemName)
                                              &lt;/td&gt;
                                              &lt;td style="width: 10%"&gt;
                                                  @if ((Model.ItemList[i].IsSelected != null) &amp;&amp; (Model.ItemList[i].IsSelected != false))
                                                  {
                                                      &lt;img src="@Url.Content("~/Images/tick.png")" alt="Added"/&gt;                                            
                                                  }
                                                  else
                                                  {
                                                      @Html.CheckBoxFor(m =&gt; Model.ItemList[i].IsSelected, new { @style = "cursor:pointer" })
                                                  }
                                              &lt;/td&gt;
                                          }
                                      &lt;/tr&gt;
                                  }
                              &lt;/table&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td style="width: 4%; vertical-align: middle"&gt;
                          &lt;input type="button" value="Add" onclick="AddItem()" /&gt;
                          &lt;input type="button" value="Remove" onclick="RemoveItem()" /&gt;
                      &lt;/td&gt;                
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;    
      }
  </code></pre>