AJAX回发响应与模型数据不同

我有一个局部视图，其中包含文本字段，并绑定到一个列表设置，因此本质上有一行文本字段，用户可以向其中添加另一行或从中删除一行。我通过循环列表构建视图，如下所示：

@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>

以及发布数据并返回视图的Jquery函数：

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);
                }
            })
        }
    })
}

---

现在，假设我在用户视图中创建了4个项目。我单击项目2将其删除，它将I作为id传入。然后我将其从模型列表中删除，并将视图与更新的模型一起传递回。我已经调试了至少50次了，控制器方法看起来和它应该的完全一样，视图中的数据也一样。令人费解的是，虽然ajax上的响应与调试时看到的有所不同。单击移除项目2移除项目4。如果我有5个项目，则无论单击要删除的项目是什么，项目5都将被删除。它总是最后一个被移除的项目。我知道我一定错过了什么，但我看不到什么。有什么想法吗？谢谢。

您的代码的问题在于，您对集合使用顺序索引，而在添加/删除元素时没有重新计算这些索引，从而导致模型绑定器无法正常运行。作为替代方法，您可以使用非顺序索引，如中所示。

使用ModelState.Clear（）为我修复了所有问题。对于任何遇到类似问题的人。你的回答也可以，但我不想重做我所有的代码。谢谢

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);
                }
            })
        }
    })
}