Question

我有一个数据表，我在批量编辑模式下呈现，因此所有行都可以立即编辑。以下代码非常适合编辑现有数据：

<table>
    <thead>
        <tr>
            <th>Row</th>
            <th>Parent</th>
        </tr>
    </thead>
    <tbody>
    @for (int i=0;i< Model.Config.Count;i++)
    {
    <tr>
        <td>
            @Html.HiddenFor(m => Model.Config[i].ConfigurationId)
            @Html.EditorFor(m=>Model.Config[i].RowNumber)
        </td>
        <td>
            @Html.EditorFor(m=>Model.Config[i].Parent)
        </td>
    </tr>
    }
    </tbody>
</table>
<input type="hidden" id="hNextConfigIndex" value="@Model.Config.Count" />

由于我正在使用for循环，因此Razor负责更改所有渲染元素的名称，以便我的模型能正确绑定到我的控制器。

我想添加一个按钮来添加新记录。我知道我可以回复一个动作，向模型添加一个空白记录，然后用更新的模型重新渲染视图。

我想要做的是使用一些JavaScript执行此异步。到目前为止，我的计划是创建一个动作，根据最后一个索引返回渲染的新行（最后一个索引存储在隐藏字段中，hNextConfigIndex）。

动作

    public ActionResult GetNewRow(string rowType, int index)
    {
        ViewBag.RowType = rowType;
        ViewBag.Index = index;

        Document t = new Document();
        if (rowType == "Config")
        {
            t.Config = new List<Configuration>();
            t.Config.Add(new Configuration());
        }
        else if (rowType == ".....")
        {
        }

        return View("_NewRows", t);
    }

查看

@model Data.Document

@{
    Layout = null;
}

@if (ViewBag.RowType=="Config")
{   
    for(int i=ViewBag.Index;i<=ViewBag.Index;i++)
    {
    <tr>
        <td>
            @Html.HiddenFor(m => Model.Config[i].ConfigurationId)
            @Html.EditorFor(m=>Model.Config[i].RowNumber)
        </td>
        <td>
            @Html.EditorFor(m=>Model.Config[i].Parent)
        </td>
    </tr>
  }
}

行动有效，但观点当然不行。只有一个空白虚拟记录，所以当然索引i（其中i> 0）不会存在。

我确信还有其他方法可以做到这一点。我可以使用javascript复制最后一行并更改值，但我必须以这种方式在javascript中进行大量硬编码。

Answer 1

如果jquery解决方案可以接受，您可以在客户端执行此操作。下面的代码可能需要改进，但应该给你一个想法。

$("#btnAddConfig").click(function () {
    var template = $("#tblConfig > tbody tr").first().clone();
    var newIndex = $("#hNextConfigIndex").val();
    template.find("input").each(function () {
        var name = $(this).attr("name");
        var id = $(this).attr("id");

        name = name.replace(/\[\d+\]/g, "[" + newIndex + "]");
        id = id.replace(/\_\d+\__/g, "_" + newIndex + "__");

        $(this).attr("name", name);
        $(this).attr("id", id);
        $(this).val(""); //reset to defaults as applicable
    });
    $("#hNextConfigIndex").val(newIndex++);
    $("#tblConfig > tbody").append(template);
});

Fiddle

如果您想在服务器端执行此操作，请不要重建整个表格，而是创建Action，例如GetEditor，以便为tr返回具有相应默认值的ajax编辑器，然后通过jquery请求它，并使用success处理程序中的{{1}}将其附加到表中。

重建整个表只是为了每次添加一条新记录，只是在记录增长时增加加载时间，让用户想知道每次添加新记录时为什么需要花费越来越多的时间。

将新记录的新行添加到表的末尾

1 个答案: