title: Complex Nested Partial View Ajax Post to MVC 5 Controller
body: <p><strong>TL;DR:</strong> I just need to figure out why i can't serialize() the partial view's parent div and receive the model. Coding this out manually will take forever as there are many parent partials I'd have to use the same logic on.</p>
  
  <p><strong>More info:</strong> I've tried EditorTemplate for binding purposes, but unfortunately there is no easy way to use them as variable lists as far as I've searched.</p>
  
  <p><strong>Begin:</strong></p>
  
  <p>Models</p>
  
  <pre><code>public class ContactModel 
  {                
      public List&lt;ContactDetailModel&gt; Contacts { get; set; }
      ....
  
  
  public class ContactDetailModel
  {
      public ContactView Contact { get; set; }
      public PhoneModel PhoneModel { get; set; }
      ...
  
  public class PhoneModel
  {
      public int ContactId { get; set; }
      public int IsPrimaryPhoneNumberId { get; set; }
      public List&lt;PhoneView&gt; Phones { get; set; }
      public List&lt;EmailPhoneTypeView&gt; EmailPhoneTypes { get; set; }
  ...
  </code></pre>
  
  <p>To select &amp; post inputs from just this partial view, I've implemented a variable class, and its relative template prefix to keep the MVC binding for the partial view.</p>
  
  <pre><code>@{
   var phoneClass = "phone" + @Model.Contacts[index].Contact.ContactId;
   var phoneTemplatePrefix = "Contacts[" + index + "].PhoneModel";
   }
  </code></pre>
  
  <p>This is ran inside of a loop, increasing indexes as needed to keep binding.</p>
  
  <pre><code>&lt;div class="@phoneClass"&gt;
       @Html.Partial("_ContactPhone", Model.Contacts[index].PhoneModel, new ViewDataDictionary() { TemplateInfo = new TemplateInfo() { HtmlFieldPrefix = phoneTemplatePrefix } })
  &lt;/div&gt;
  </code></pre>
  
  <p>The partial I'm attempting to post. (Strongly Typed partial for <code>PhoneModel</code>)</p>
  
  <pre><code>@{var addNavigationClass = "AddContactPhone" + Model.ContactId;}
  
  for (var phoneIndex = 0; phoneIndex &lt; Model.Phones.Count(); phoneIndex++)
  {
      @Html.HiddenFor(model =&gt; model.Phones[phoneIndex].ContactPhoneId)
      @Html.DropDownListFor...
      @Html.TextBoxFor(model =&gt; model.Phones[phoneIndex].PhoneNumber)
      &lt;a href="#" class="removeMemberPhone"&gt;Trash&lt;/a&gt;
      @Html.RadioButtonFor(model =&gt; model.IsPrimaryPhoneNumberId, Model.Phones[phoneIndex].ContactPhoneId) Primary&lt;/label&gt;
  }
  </code></pre>
  
  <p>Inside the View's click function</p>
  
  <pre><code>var model = $('.phone' + '@Model.ContactId' + ' :input').serialize();
  console.log('model', model);
  
  $.ajax({
     url: '/Contact/AddPhone',
     type: 'POST',
     data: model,
     success: function (data) {
       console.log(data.length);
      }
      ....
  </code></pre>
  
  <p>The log's output</p>
  
  <pre><code>model Contacts%5B1%5D.PhoneModel.Phones%5B0%5D.ContactPhoneId=3907&amp;Contacts%5B1%5D.PhoneModel.Phones%5B0%5D.EmailPhoneTypeId=1&amp;..........
  </code></pre>
  
  <p>My model never has any values in my controller (I've abbreviated ContactPhoneModel to PhoneModel in the above code)...</p>
  
  <p><a href="https://i.stack.imgur.com/VyYWY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VyYWY.png" alt="enter image description here"></a></p>