title: Using jquery ajax post to pass array to controller fails
body: <p>I have an input form, which is rendered using model similar to this. I have tried to simplify the example for clarity.</p>
  
  <pre><code>[Serializable]
  public class OrderDetailsModel
  { 
      public string FirstName { get; set; }
      public string Surname { get; set; }
  
      public Address[] OrderAddresses { get; set; }
  }
  
  [Serializable]
  public class Address
  { 
      public string BuildingNameNumber { get; set; }
      public string Town { get; set; }
      public string Postcode { get; set; }
  }
  </code></pre>
  
  <p>It is rendered using Razor markup similar to this</p>
  
  <pre><code>&lt;form id="orderForm"&gt;
      &lt;div&gt;
          @Html.LabelFor(model =&gt; model.FirstName)
      &lt;/div&gt;
      &lt;div&gt;
          @Html.EditorFor(model =&gt; model.FirstName)
      &lt;/div&gt;
      &lt;div&gt;
          @Html.LabelFor(model =&gt; model.Surname)
      &lt;/div&gt;
      &lt;div&gt;
          @Html.EditorFor(model =&gt; model.Surname)
      &lt;/div&gt;
  
  
      @for (int i = 0; i &lt; 3; i++)
      {
          var addressDisplayDivId = $"addressDisplay{i}";
  
          &lt;div id="@addressDisplayDivId"&gt;
              &lt;div&gt;
                  @Html.LabelFor(model =&gt; model.OrderAddresses[i].BuildingNameNumber)
              &lt;/div&gt;
              &lt;div&gt;
                  @Html.EditorFor(model =&gt; model.OrderAddresses[i].BuildingNameNumber, new {@id = $"buildingNameNumber{i}"})
              &lt;/div&gt;
              &lt;div&gt;
                  @Html.LabelFor(model =&gt; model.OrderAddresses[i].Town)
              &lt;/div&gt;
              &lt;div&gt;
                  @Html.EditorFor(model =&gt; model.OrderAddresses[i].Town, new {@id = $"town{i}"})
              &lt;/div&gt;
              &lt;div&gt;
                  @Html.LabelFor(model =&gt; model.OrderAddresses[i].Postcode)
              &lt;/div&gt;
              &lt;div&gt;
                  @Html.EditorFor(model =&gt; model.OrderAddresses[i].Postcode, new {@id = $"postcode{i}"})
              &lt;/div&gt;
          &lt;/div&gt;
      }
  
      &lt;a href="/MyController/ActionMethod" id="submit"&gt;Submit&lt;/a&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I am attempting to post the form using jQuery ajax</p>
  
  <pre><code>$("#submit").click(function(e) {
       e.preventDefault();
  
       var submitUrl = $("#submit").attr("href");
       var model = $("#orderForm").serialize();
       $.ajax({
           type: "POST",
           url: submitUrl,
           data: model,
           success: function(result) {
               alert("Success");
           },
           error: function(result) {
               alert("Error");
           }
       });
   });
  </code></pre>
  
  <p>To a controller action</p>
  
  <pre><code>public MyController
   {
       public ActionResult ActionMethod(OrderDetailsModel model)
       {
       }
   }
  </code></pre>
  
  <p>The problem is my action is not being called. If i remove the Address[] it works ok, but introducing that complexity in the model seems to prevent the post to the action from working.</p>
  
  <p>The problem seems to lie in the jquery serialize and how it constructs the Address array before posting to the action.</p>
  
  <p>Can anyone suggest a way of dealing with this?</p>