0

我有一个动态生成的行的 HTML 表（使用 MVC3 的 EditorFor）。用户在表格中填写数据（逐行），然后将表单提交到服务器（通过 MVC3 HTML 表单）。用户可以通过按下在 TR 元素上调用 $(tableRow).remove() 的按钮来删除行，然后调用从数据库中删除该行的异步服务器方法。

我发现如果我在表中有 5 行，然后删除第三行然后提交，则服务器方法会接收第 1 行和第 2 行，但会丢失其他行（原始的第 4 行和第 5 行）。

我尝试在线搜索回发为什么会收到前两行而错过最后两行，但我能找到的所有答案都围绕着我没有使用的 JQuery 帖子。

任何帮助或方向都会很棒，如果我需要澄清任何事情，请告诉我。

编辑：从我的项目中添加适用于该问题的代码。如果您需要更多上下文代码，请告诉我，我会添加它。

//////////////// VIEW ////////////////
// model info and initialization logic
@using (Html.BeginForm("EditTimesheet", "ControllerName", FormMethod.Post, new { enctype = "multipart/form-data", id = "editTimesheet" }))
{
@Html.ValidationSummary(true)
<fieldset>
<table width="100%">
<tr>
    <td colspan="14" align="right">
    // lots of code
    </td>
</tr>
@Html.EditorFor(m => m.Rows)
<tr>
    <td colspan="14" align="right">
    // lots of code
    </td>
</tr>
// closing statements

//////////////// EditorFor ////////////////
// model info and initialization logic
<tr class="timesheet-row">
    <td>
        <a href='#'>
            <img src='@Url.Content("~/Content/Images/delete.gif")' 
                     width='17' height='17' style='border: 0;' 
                     onclick="DeleteRow(this, @Model.RowId)" />
        </a>
    </td>  
    // other td's
</tr>

//////////////// JS file ////////////////
function DeleteRow(box, rowId)
{
    $(box).closest(".timesheet-row").remove();

    // HACK: despicable, detestable HACK!
    var url = deleteRowUrl;
    url += '?rowId=' + rowId;
    var ajaxData = {
        type: "POST",
        url: url,
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: null,
        success: null,
        error: function (error) {
            alert("There was an error posting the data to the server: " + error.responseText);
        }
    };
    $.ajax(ajaxData);
}
4

2 回答 2

2

当您删除一行时，您将在集合中名称的索引中创建孔，并且默认模型绑定器停止工作，因为您不再遵守预期的格式。

因此，而不是具有以下顺序值：

<input type="text" name="Items[0].Id" value="1" />
<input type="text" name="Items[1].Id" value="2" />
<input type="text" name="Items[2].Id" value="3" />
<input type="text" name="Items[3].Id" value="4" />
<input type="text" name="Items[4].Id" value="5" />

如果您删除 TR 元素上的第三行，$(tableRow).remove()您最终会得到：

<input type="text" name="Items[0].Id" value="1" />
<input type="text" name="Items[1].Id" value="2" />
<input type="text" name="Items[3].Id" value="4" />
<input type="text" name="Items[4].Id" value="5" />

看到问题了吗？

下面an article说明了如何通过使用一个名为的自定义帮助程序来解决此问题，该帮助Html.BeginCollectionItem程序在集合的输入字段的名称中使用 GUID 而不是整数索引。还可以查看 Phil Haacks article，了解默认模型绑定器希望您的字段被命名的语法。最后有一节称为非序列索引，他在其中介绍了如何做到这一点。

于 2012-09-26T15:43:00.727 回答
0

听起来您的表单的一部分正在被删除。

  1. 检查 DOM
  2. 找到你的表格
  3. 删除一行，看看有什么变化
于 2012-09-26T02:46:06.367 回答