title: POST a form array without successful
body: <p>I'm developing an ASP.NET MVC 5 web with C# and .NET Framework 4.5.1.</p>
  
  <p>I have this <code>form</code> in a <code>cshtml</code> file:</p>
  
  <pre><code>@model MyProduct.Web.API.Models.ConnectBatchProductViewModel
  
  @{
      Layout = null;
  }
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      &lt;title&gt;Create&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      @if (@Model != null)
      { 
          &lt;h4&gt;Producto: @Model.Product.ProductCode, Cantidad: @Model.ExternalCodesForThisProduct&lt;/h4&gt;
          using (Html.BeginForm("Save", "ConnectBatchProduct", FormMethod.Post))
          {
              @Html.HiddenFor(model =&gt; model.Product.Id, new { @id = "productId", @Name = "productId" });
  
              &lt;div&gt;
                  &lt;table id ="batchTable" class="order-list"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;td&gt;Cantidad&lt;/td&gt;
                              &lt;td&gt;Lote&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr&gt;
                              &lt;td&gt;@Html.TextBox("ConnectBatchProductViewModel.BatchProducts[0].Quantity")&lt;/td&gt;
                              &lt;td&gt;@Html.TextBox("ConnectBatchProductViewModel.BatchProducts[0].BatchName")&lt;/td&gt;
                              &lt;td&gt;&lt;a class="deleteRow"&gt;&lt;/a&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                      &lt;tfoot&gt;
                          &lt;tr&gt;
                              &lt;td colspan="5" style="text-align: left;"&gt;
                                  &lt;input type="button" id="addrow" value="Add Row" /&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tfoot&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
              &lt;p&gt;&lt;input type="submit" value="Seleccionar" /&gt;&lt;/p&gt;
          }
      }
      else
      { 
          &lt;div&gt;Error.&lt;/div&gt;
      }
  &lt;script src="~/Scripts/jquery-2.1.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="~/js/createBatches.js"&gt;&lt;/script&gt; &lt;!-- Resource jQuery --&gt;    
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And this is the action method:</p>
  
  <pre><code>[HttpPost]
  public ActionResult Save(FormCollection form)
  {
      return null;
  }
  </code></pre>
  
  <p>And the two <code>ViewModel</code>:</p>
  
  <pre><code>public class BatchProductViewModel
  {
      public int Quantity { get; set; }
      public string BatchName { get; set; }
  }
  
  public class ConnectBatchProductViewModel
  {
      public Models.Products Product { get; set; }
      public int ExternalCodesForThisProduct { get; set; }
  
      public IEnumerable&lt;BatchProductViewModel&gt; BatchProducts { get; set; }
  }
  </code></pre>
  
  <p>But I get this in <code>FormCollection form</code> var:
  <img src="https://i.stack.imgur.com/lyDlu.png" alt="enter image description here"></p>
  
  <p>But I want to get an <code>IEnumerable&lt;BatchProductViewModel&gt; model</code>:</p>
  
  <pre><code>public ActionResult Save(int productId, IEnumerable&lt;BatchProductViewModel&gt; model);
  </code></pre>
  
  <p>If I use the above method signature both parameters are null.</p>
  
  <p>I want an <code>IEnumerable</code> because user is going to add more rows dynamically using jQuery.</p>
  
  <p>This is <code>jQuery</code> script:</p>
  
  <pre><code>jQuery(document).ready(function ($) {
      var counter = 0;
  
      $("#addrow").on("click", function () {
  
          counter = $('#batchTable tr').length - 2;
  
          var newRow = $("&lt;tr&gt;");
          var cols = "";
  
          var quantity = 'ConnectBatchProductViewModel.BatchProducts[0].Quantity'.replace(/\[.{1}\]/, '[' + counter + ']');
          var batchName = 'ConnectBatchProductViewModel.BatchProducts[0].BatchName'.replace(/\[.{1}\]/, '[' + counter + ']');
  
          cols += '&lt;td&gt;&lt;input type="text" name="' + quantity + '"/&gt;&lt;/td&gt;';
          cols += '&lt;td&gt;&lt;input type="text" name="' + batchName + '"/&gt;&lt;/td&gt;';
  
          cols += '&lt;td&gt;&lt;input type="button" class="ibtnDel"  value="Delete"&gt;&lt;/td&gt;';
          newRow.append(cols);
  
          $("table.order-list").append(newRow);
          counter++;
      });
  
  
      $("table.order-list").on("click", ".ibtnDel", function (event) {
          $(this).closest("tr").remove();
  
          counter -= 1
          $('#addrow').attr('disabled', false).prop('value', "Add Row");
      });
  });
  </code></pre>
  
  <p>Any idea?</p>
  
  <p>I have checked this <a href="https://stackoverflow.com/a/19964708/68571">SO answer</a>, and <a href="http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx" rel="noreferrer">this article</a> but I don't get my code working.</p>