send Dynamic list to Controller from View - asp.net-mvc

Question

I am getting quite responses when I add/delete rows.
When page is loaded the default rows 3 will be added.(But user can delete those rows)
When I am trying to add new row then 4 value rows are coming in controller but when I am trying to delete any default row then it is not showing the newly added row.
Here is my below code.
#model ProductRegistration.Models.InstalledProductInformationModel
#using (Html.BeginForm())
{
#for (int i = 0; i < ((Model != null && Model.listInstallProducts != null) ? Model.listInstallProducts.Count : 3); i++)
{
<tr>
<td>
#Html.TextBoxFor(m => m.listInstallProducts[i].SerialNumber, new { #class = "form-control input-sm input-Serial", #placeholder = "Enter serial number", #maxlength = 50, #OnKeypress = "return alphanumeric_only(event);" })
#Html.ValidationMessageFor(m => m.listInstallProducts[i].SerialNumber)
<div class="SerialErrorDisplay" style="color: red"></div>
</td>
<td>
#Html.DropDownListFor(m => m.listInstallProducts[i].ModelNumber, new SelectList(string.Empty, "Value", "Text"), "--Select Model--", new { #class = "form-control input-sm input-Model" })
#Html.ValidationMessageFor(m => m.listInstallProducts[i].ModelNumber)
<div class="ModelErrorDisplay" style="color: red"></div>
</td>
<td>
#Html.TextBoxFor(m => m.listInstallProducts[i].InstallationDate, new { #class = "form-control input-sm input-Date", #maxlength = 50, #placeholder = "DD/MM/YYYY" })
#Html.ValidationMessageFor(m => m.listInstallProducts[i].InstallationDate)
<div class="DateErrorDisplay" style="color: red"></div>
</td>
<td>
<img src="~/Images/delete_icon.png" onclick="DeleteProduct(this);" />
</td>
</tr>
}
<input class="btn btn-primary top-padding" type="submit" value="Previous" id="back-step" name="direction"/>
}
In Controller:
public ActionResult InstalledProductInfo(InstalledProductInformationModel InstalledProducts, string direction)
{
if(ModelState.IsValid)
{
return RedirectToAction("EquipmentOwnerInfo");
}
return View(InstalledProducts);
}
Model is:
public class InstalledProductInformationModel : InstalledProductInformation
{
public InstalledProductInformation installedProductInformation { get; set; }
public List<InstalledProductInformation> listInstallProducts { get; set; }
}
please help me out.

Answer 1

By default, the DefaultModelBinder required collection indexers to start at zero and be consecutive. If you delete the first item (indexer = 0) then no items will be bound. If you delete the 3rd item (indexer = 2) then only the first 2 items will be bound. You can override this behavior by adding an input for a special property named Index where the value equals the indexer.
#for (int i = 0; i < ((Model != null && Model.listInstallProducts != null) ? Model.listInstallProducts.Count : 3); i++)
{
<tr>
<td>
#Html.TextBoxFor(m => m.listInstallProducts[i].SerialNumber, new { #class = "form-control input-sm input-Serial", #placeholder = "Enter serial number", #maxlength = 50, #OnKeypress = "return alphanumeric_only(event);" })
#Html.ValidationMessageFor(m => m.listInstallProducts[i].SerialNumber)
<div class="SerialErrorDisplay" style="color: red"></div>
</td>
....
<td>
// Add the following input
<input type="hidden" name="listInstallProducts.Index" value="#i" />
<img src="~/Images/delete_icon.png" onclick="DeleteProduct(this);" />
</td>
</tr>
}
<input class="btn btn-primary top-padding" type="submit" value="Previous" id="back-step" name="direction"/>
Side note: You should be adding the 3 items in the controller before you pass the model to the view so you get proper model binding and then simply use #for (int i = 0; i < Model.listInstallProducts.Count; i++)

Answer 2

List indexes are enumerated continuously, so there can be no gap. If You remove one row, the list index is no more continuous. The new row should be there if You will deal with indexes.