AJAX postback response different than model data

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.

score 0 · Accepted Answer · answered Nov 04 '12 at 13:53

0

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.

answered Nov 04 '12 at 13:53

Darin Dimitrov

1,023,142
271
3,287
2,928

Using ModelState.Clear() fixed everything for me. http://stackoverflow.com/questions/1775170/asp-net-mvc-modelstate-clear for anyone who runs into a similar issue. Your response will also work as well but I didn't want to redo all my code. Thanks. – Nozoku Nov 04 '12 at 18:11

AJAX postback response different than model data

1 Answers1