List of objects not binding to the model on post back in asp.net mvc 4

Question

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

public class SubscriptionModel
{        
    public int MemberId { get; set; }
    public List<SitePackage> SitePackges { get; set; }
    public SubscriptionModel()
    {
        SitePackges=new List<SitePackage>();
    }
}

public class SitePackage
{
    public int SiteId { get; set; }
    public List<PackageDisplayItem> LstPackageDisplayItems { get; set; }
    public SitePackage()
    {
        LstPackageDisplayItems=new List<PackageDisplayItem>();

    }
}

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; }

}

In my controller I fill in the model and then pass to View Model for rendering

 @using (@Html.BeginForm("CalculateCost", "HelpDesk", FormMethod.Post, new { @class = "form", id = "PackageSubscription", name = "PackageSubscription" }))
 {
 @Html.HiddenFor(x=>x.MemberId)

 <table class="table">
  @foreach (var site in Model.SitePackges)
  {
    <input name="SiteId" id="SiteId" type="hidden" [email protected]() />
           <tr><td class="col-sm-3">@site.SiteId</td></tr>
           <tr>
               <th class="col-sm-3">
                   Name
               </th>

               <th class="col-sm-2">
                   Start Date
               </th>
           </tr>
           @Html.Partial("_Packages",site.LstPackageDisplayItems)               

       }

My partial view is like

@model List<PackageDisplayItem>

@for (int i = 0; i < Model.Count; i++)
{
    @Html.HiddenFor(x => x[i].PackageId)
    <tr id="@Model[i].PackageId">
        <td>
            @Html.DisplayFor(x => x[i].Name)
        </td>

        <td>
            @Html.TextBoxFor(x => x[i].StartDate, "{0:d MMM yyyy}", new { @class = "jquery_datepicker form-control", autocomplete = "off" })
        </td>
    </tr>

}

Every thing renders fine but on the form post the model binder is not binding SitePackges list and its count is always 0. My controller has the following signatures.

[HttpPost]
    public ActionResult CalculateCost(SubscriptionModel subscriptionModel )
    {
        var receivedModel = subscriptionModel;         
    }

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.

Jquery Post

function SubmitForm() {
console.log($("#PackageSubscription").serialize());
$.ajax({
    url: '/HelpDesk/CalculateCost',
    cache: false,
    dataType: 'json',
    data: $("#PackageSubscription").serialize(),
    type: 'POST',
    success: function (data) {
    }

});

}

I will appreciate any help. thanks