Question

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

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

我的控制器方法如下：

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

我的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项删除它，它作为id传递给我。然后，我从模型列表中删除它，并使用更新的模型传回视图。我现在调试了至少50次，控制器方法看起来应该和视图中的数据一样。令人费解的是，虽然ajax上的响应与我在调试时看到的不同。单击删除项目2将删除项目4.如果我有5个项目，则无论我单击要删除的项目，项目5都将被删除。它始终是最后删除的项目。我知道我必须在这里遗漏一些东西，但我看不清楚。有任何想法吗？感谢。

Answer 1

您的代码的问题在于您正在为集合使用顺序索引，而不是在添加/删除元素时重新计算这些索引，从而留下阻碍模型绑定器正常运行的间隙。作为替代方案，您可以使用following blog post中所示的非顺序索引。

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

1 个答案: