title: Serialize form object and collections with ASP.NET MVC Jquery Ajax
body: <p>I'm learning ASP.NET MVC 4 using VS 2010 and Jquery 1.7.1. I'm having trouble serializing my collection back to controller.
  I'm using this <a href="https://stackoverflow.com/questions/1184624/convert-form-data-to-js-object-with-jquery/1186309#1186309">Plugin</a> to serialize my model to JSON object.</p>
  
  <p>Here is my Controller:</p>
  
  <pre><code> public class CustomerController : Controller
  {
  
      public ActionResult Index()
      {
          CustomerViewModel model = new CustomerViewModel();
          model.Orders = GetOrders().ToList();
          return View(model);
      }
  
  
      [HttpPost]
      public ActionResult Save(CustomerViewModel model)
      {
  
          if (ModelState.IsValid)
          {
  
  
          }
  
          return View(model);
      }
  
      private IEnumerable&lt;Order&gt; GetOrders()
      {
          List&lt;Order&gt; orders = new List&lt;Order&gt;();
          orders.Add(new Order() { OrderID = 1, CustomerID = 1, TotalAmount = 100.99M, OrderName = "Order1", Discount = 5.00M, TotalItems = 5, OrderDate = DateTime.Now });
          orders.Add(new Order() { OrderID = 2, CustomerID = 1, TotalAmount = 101.99M, OrderName = "Order2", Discount = 6.00M, TotalItems = 6, OrderDate = DateTime.Now });
          orders.Add(new Order() { OrderID = 3, CustomerID = 1, TotalAmount = 102.99M, OrderName = "Order3", Discount = 6.00M, TotalItems = 7, OrderDate = DateTime.Now });
          orders.Add(new Order() { OrderID = 4, CustomerID = 1, TotalAmount = 103.99M, OrderName = "Order4", Discount = 7.00M, TotalItems = 8, OrderDate = DateTime.Now });
          orders.Add(new Order() { OrderID = 5, CustomerID = 1, TotalAmount = 104.99M, OrderName = "Order5", Discount = 8.00M, TotalItems = 9, OrderDate = DateTime.Now });
          orders.Add(new Order() { OrderID = 6, CustomerID = 1, TotalAmount = 105.99M, OrderName = "Order6", Discount = 9.00M, TotalItems = 10, OrderDate = DateTime.Now });
          return orders;
  
      }
  
  }
  </code></pre>
  
  <p>View:</p>
  
  <pre><code> &lt;div&gt;
  &lt;% using (Html.BeginForm())
     {%&gt;
  &lt;%: Html.ValidationSummary(true) %&gt;
  &lt;fieldset&gt;
      &lt;legend&gt;Customer Details&lt;/legend&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;%: Html.LabelFor(m=&gt;m.Customer.FirstName) %&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;%: Html.TextBoxFor(m=&gt;m.Customer.FirstName) %&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;%: Html.LabelFor(m=&gt;m.Customer.LastName) %&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;%: Html.TextBoxFor(m=&gt;m.Customer.LastName) %&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;%: Html.LabelFor(m=&gt;m.Customer.EmailAddress) %&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;%: Html.TextBoxFor(m =&gt; m.Customer.EmailAddress)%&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;%: Html.LabelFor(m=&gt;m.Customer.PhoneNumber) %&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;%: Html.TextBoxFor(m =&gt; m.Customer.PhoneNumber)%&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;table id="tblOrdersGrid"&gt;
          &lt;tr&gt;
              &lt;th&gt;
                  OrderID
              &lt;/th&gt;
              &lt;th&gt;
                  Order Name
              &lt;/th&gt;
              &lt;th&gt;
                  Total Amount
              &lt;/th&gt;
              &lt;th&gt;
                  Total Items
              &lt;/th&gt;
          &lt;/tr&gt;
          &lt;% foreach (DemoHtmlHelpers.Models.Order order in Model.Orders)
             {%&gt;
          &lt;tr&gt;
              &lt;td id="tdOrderID"&gt;
                  &lt;%: order.OrderID%&gt;
              &lt;/td&gt;
              &lt;td id="tdOrderName"&gt;
                  &lt;%: order.OrderName%&gt;
              &lt;/td&gt;
              &lt;td id="tdTotalAmount"&gt;
                  &lt;%: order.TotalAmount%&gt;
              &lt;/td&gt;
              &lt;td id="tdTotalItems"&gt;
                  &lt;%: order.TotalItems%&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;%} %&gt;
      &lt;/table&gt;
      &lt;p&gt;
          &lt;input type="submit" value="Save" /&gt;
      &lt;/p&gt;
  &lt;/fieldset&gt;
  &lt;% } %&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  
      $(function () {
  
          $('form').submit(function (e) {
  
              var customerViewModel = $(this).serializeObject();
              var allOrders = new Array();
              var order = null;
              var orderRows = $('#tblOrdersGrid').find('tr').not(':first');
  
              $.each(orderRows, function (i, orderItem) {
  
                  order = new Object();
                  order.OrderID = $(orderItem).find('#tdOrderID').text();
                  order.OrderName = $(orderItem).find('#tdOrderName').text();
                  order.TotalAmount = $(orderItem).find('#tdTotalAmount').text();
                  order.TotalItems = $(orderItem).find('#tdTotalItems').text();
  
                  allOrders.push(order);
              });
  
              customerViewModel.Orders = allOrders;
              //customerViewModel['Orders'] = allOrders;
  
              $.post('&lt;%= Url.Action("Save", "Customer") %&gt;', customerViewModel, function (data) {
  
                  alert('Successfully saved.');
              });
              return false;
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Model Classes:</p>
  
  <pre><code>[Serializable]
  public class Customer
  {
      public Customer()
      {
          this.CreatedDate = DateTime.Now;
      }
  
      public int CustomerID { set; get; }
  
      [Required(AllowEmptyStrings = false)]
      public string FirstName { set; get; }
  
      [Required(AllowEmptyStrings = false)]
      public string LastName { set; get; }
  
      [Required(AllowEmptyStrings = false)]
      public string PhoneNumber { set; get; }
  
      [Required(AllowEmptyStrings = false)]
      public string EmailAddress { set; get; }
  
      [DataType(DataType.Date)]
      public DateTime CreatedDate { set; get; }
  
  }
  
  [Serializable]
  public class Order
  {
      public Order()
      {
          this.OrderDate = DateTime.Now;
      }
  
      public int OrderID { set; get; }
  
      public int CustomerID { set; get; }
  
      [Required(AllowEmptyStrings = false)]
      public string OrderName { set; get; }
  
      [Required()]
      public decimal TotalAmount { set; get; }
  
      [DataType(DataType.Date)]
      public DateTime OrderDate { set; get; }
  
      public decimal Discount { set; get; }
  
      public decimal TotalItems { set; get; }
  
  }
  
  [Serializable]
  public class CustomerViewModel
  {
      public CustomerViewModel()
      {
          this.Customer = new Customer();
          this.Orders = new List&lt;Order&gt;();
      }
  
      public Customer Customer { get; set; }
      public List&lt;Order&gt; Orders { get; set; }
  
  }
  </code></pre>
  
  <p>I can get the customer object back to controller but somehow my order collection is not binding back. Please refer to the screen shots below:</p>
  
  <p><img src="https://i.stack.imgur.com/jIzQo.jpg" alt="Bind the customer object"></p>
  
  <p><img src="https://i.stack.imgur.com/3ChNJ.jpg" alt="Does not bind the orders list"></p>
  
  <p>Any clue will be appreciated.</p>
  
  <p>Update 1:</p>
  
  <p><img src="https://i.stack.imgur.com/cw10o.jpg" alt="Request in google chrome"></p>