AJAX postback response different than model data - ajax

Question

I have a partial view that has textfields in it and is bound to a List set up, so essentially there is a row of textfields that the user can add another row to or remove a row from. I build the view by looping through the list like this:
#model PricingRequestWebApp.Web.Models.PricingRequestModel
<div id="shiplocation-wrapper">
<table class="shipinfoprtable">
<thead>
<tr>
<th>#Html.LabelFor(m => m.ShippingLocationsModel[0].Address)<span class="formRed">*</span></th>
<th>#Html.LabelFor(m => m.ShippingLocationsModel[0].City)<span class="formRed">*</span></th>
<th>#Html.LabelFor(m => m.ShippingLocationsModel[0].State)<span class="formRed">*</span></th>
<th>#Html.LabelFor(m => m.ShippingLocationsModel[0].Zip)<span class="formRed">*</span></th>
<th>#Html.LabelFor(m => m.ShippingLocationsModel[0].PFreight)<span class="formRed">*</span></th>
<th>#Html.LabelFor(m => m.ShippingLocationsModel[0].FreightType)<span class="formRed">*</span></th>
<td><span class="link" id="addlocation" onclick="AddShippingLocation()">Add</span></td>
</tr>
</thead>
<tbody>
#for (int i = 0; i < Model.ShippingLocationsModel.Count; i++)
{
<tr>
<td>#Html.TextBoxFor(m => m.ShippingLocationsModel[i].Address, new { #style = "width: 200px" })</td>
<td>#Html.TextBoxFor(m => m.ShippingLocationsModel[i].City, new { #style = "width: 150px" })</td>
<td>#Html.TextBoxFor(m => m.ShippingLocationsModel[i].State, new { #size = 3 })</td>
<td>#Html.TextBoxFor(m => m.ShippingLocationsModel[i].Zip, new { #style = "width: 80px" })</td>
<td>#Html.TextBoxFor(m => m.ShippingLocationsModel[i].PFreight, new { #style = "width: 80px" })</td>
<td>#Html.TextBoxFor(m => m.ShippingLocationsModel[i].FreightType, new { #style = "width: 200px" })</td>
#if (Model.ShippingLocationsModel.Count > 1)
{
<td><span class="link" id="removelocation" onclick="RemoveShippingLocation(#i);">Remove</span></td>
}
</tr>
}
</tbody>
</table>
</div>
My controller methods look like so:
[HttpPost]
public ActionResult AddShippingLocation(PricingRequestModel model)
{
model.ShippingLocationsModel.Add(new ShippingLocationsModel());
return PartialView("shiplocationsPartial", model);
}
[HttpPost]
public ActionResult RemoveShippingLocation(PricingRequestModel model)
{
model.ShippingLocationsModel.RemoveAt(StaticItems.id);
return PartialView("shiplocationsPartial", model);
}
And my Jquery function that posts the data and returns the view:
function AddShippingLocation() {
$.ajax({
data: $('#shippinginfoform').serialize(),
type: "POST",
url: "/PricingRequest/AddShippingLocation",
success: function (response) {
$('#shiplocation-wrapper').html(response);
}
})
}
function RemoveShippingLocation(id) {
$.ajax({
data: { id: id },
type: "POST",
url: "/PricingRequest/SaveID",
complete: function () {
$.ajax({
data: $('#shippinginfoform').serialize(),
cache: false,
type: "POST",
url: "/PricingRequest/RemoveShippingLocation",
success: function (response) {
$('#shiplocation-wrapper').html(response);
}
})
}
})
}
Now, lets say I have 4 items created in the user view. I click on item 2 to remove it and it passes in i as an id. I then remove that from the model list and pass back the view with the updated model. I have debugged this at least 50 times now and the controller method looks exactly as it should and the data in the view as well. Inexplicably though the response on the ajax shows differently than what I'm seeing while debugging. Clicking on remove item 2 removes item 4. If I have 5 items, item 5 will be removed no matter what item I click to remove. It's always the last item that is removed. I know I must be missing something here but I can't see what. Any ideas? Thanks.

Answer 1

The problem with your code is that you are using sequential indexes for your collections and not recalculating those indexes when adding/removing elements leaving gaps which prevents the model binder from operating correctly. As an alternative you could use non-sequential indexes as illustrated in the following blog post.