How to Properly POST Form Arrays from ASP.NET MVC to an IEnumerable Model?

POSTing Form Arrays from ASP.NET MVC

Problem:

In an ASP.NET MVC application, an HTML form containing a dynamic array of input elements needs to be submitted as an IEnumerable model property. However, the action method fails to bind the model with data from the form when using FormCollection as the method parameter.

Solution:

Instead of using a FormCollection, the action method must accept an instance of the correct model type, ConnectBatchProductViewModel, as its parameter. To generate a form that posts form values to an IEnumerable property in the model, follow these steps:

• Use a for loop to generate the controls for each element in the collection. Each control must be named with indexers to correctly bind to the model.
• Add a hidden input element to each dynamically added row to allow for deleting items from the view.
• Update the action method to receive the model as a parameter.

Example Code:

Form Code:

@for(int i = 0; i 
    <td>@Html.TextBoxFor(m => m.BatchProducts[i].Quantity)</td>
    <td>@Html.TextBoxFor(m => m.BatchProducts[i].BatchName)</td>
    <td>
      <input type="hidden" name="BatchProducts.Index" value="@i">
      <a class="deleteRow"></a>
    </td>
  
}

Action Method:

public ActionResult Save(ConnectBatchProductViewModel model)
{
  // Model binding will populate the BatchProducts property with data from the form.
  ....
}

Dynamically Adding and Removing Items:

To enable dynamic adding and removing of items, use the BeginCollectionItem helper or an HTML template. The template for dynamically adding new items would be:

<div>
<p>And the script to add a new BatchProducts item would be:</p>
<pre class="brush:php;toolbar:false">$("#addrow").click(function() {
  var index = (new Date()).getTime(); // unique indexer
  var clone = $('#NewBatchProduct').clone(); // clone the BatchProducts item
  // Update the index of the clone
  clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
  clone.html($(clone).html().replace(/"%"/g, '"' + index  + '"'));
  $("table.order-list").append(clone.html());
});