title: List of objects not binding to the model on post back in asp.net mvc 4
body: <p>In my my MVC 4 application, I have a Customer which can have multiple sites and can subscribe to multiple service packages. A short version of my view model looks like below </p>
  
  <pre><code>public class SubscriptionModel
  {        
      public int MemberId { get; set; }
      public List&lt;SitePackage&gt; SitePackges { get; set; }
      public SubscriptionModel()
      {
          SitePackges=new List&lt;SitePackage&gt;();
      }
  }
  
  public class SitePackage
  {
      public int SiteId { get; set; }
      public List&lt;PackageDisplayItem&gt; LstPackageDisplayItems { get; set; }
      public SitePackage()
      {
          LstPackageDisplayItems=new List&lt;PackageDisplayItem&gt;();
  
      }
  }
  
  public class PackageDisplayItem
  {
      public int PackageId { get; set; }
  
      [Display(Name = "Package")]
      public string Name { get; set; }        
  
      [DataType(DataType.Date)]
      [Display(Name = "Start Date")]
      public DateTime? StartDate { get; set; }
  
  }
  </code></pre>
  
  <p>In my controller I fill in the model and then pass to View Model for rendering</p>
  
  <pre><code> @using (@Html.BeginForm("CalculateCost", "HelpDesk", FormMethod.Post, new { @class = "form", id = "PackageSubscription", name = "PackageSubscription" }))
   {
   @Html.HiddenFor(x=&gt;x.MemberId)
  
   &lt;table class="table"&gt;
    @foreach (var site in Model.SitePackges)
    {
      &lt;input name="SiteId" id="SiteId" type="hidden" value=@site.SiteId.ToString() /&gt;
             &lt;tr&gt;&lt;td class="col-sm-3"&gt;@site.SiteId&lt;/td&gt;&lt;/tr&gt;
             &lt;tr&gt;
                 &lt;th class="col-sm-3"&gt;
                     Name
                 &lt;/th&gt;
  
                 &lt;th class="col-sm-2"&gt;
                     Start Date
                 &lt;/th&gt;
             &lt;/tr&gt;
             @Html.Partial("_Packages",site.LstPackageDisplayItems)               
  
         }
  </code></pre>
  
  <p>My partial view is like</p>
  
  <pre><code>@model List&lt;PackageDisplayItem&gt;
  
  @for (int i = 0; i &lt; Model.Count; i++)
  {
      @Html.HiddenFor(x =&gt; x[i].PackageId)
      &lt;tr id="@Model[i].PackageId"&gt;
          &lt;td&gt;
              @Html.DisplayFor(x =&gt; x[i].Name)
          &lt;/td&gt;
  
          &lt;td&gt;
              @Html.TextBoxFor(x =&gt; x[i].StartDate, "{0:d MMM yyyy}", new { @class = "jquery_datepicker form-control", autocomplete = "off" })
          &lt;/td&gt;
      &lt;/tr&gt;
  
  }
  </code></pre>
  
  <p>Every thing renders fine but on the form post the model binder is not binding <code>SitePackges</code> list and its count is always 0. My controller has the following signatures.</p>
  
  <pre><code>[HttpPost]
      public ActionResult CalculateCost(SubscriptionModel subscriptionModel )
      {
          var receivedModel = subscriptionModel;         
      }
  </code></pre>
  
  <p>Not sure if the model I have designed is the best approach to handle this requirement (The requirement is to show a single site and just below it show the packages and then 2nd site and packages and so on). The controls seems to have unique indexes generated.</p>
  
  <p>Jquery Post</p>
  
  <pre><code>function SubmitForm() {
  console.log($("#PackageSubscription").serialize());
  $.ajax({
      url: '/HelpDesk/CalculateCost',
      cache: false,
      dataType: 'json',
      data: $("#PackageSubscription").serialize(),
      type: 'POST',
      success: function (data) {
      }
  
  });
  </code></pre>
  
  <p>}</p>
  
  <p>I will appreciate any help. thanks</p>