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

我有一个以批量编辑模式渲染的数据表，因此所有行都可以一次编辑。以下代码非常适合编辑现有数据：

<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" />

一行
父母亲
@对于（inti=0；iModel.Config[i].ConfigurationId）
@EditorFor（m=>Model.Config[i].RowNumber）
@EditorFor（m=>Model.Config[i].Parent）
}

由于我使用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);
    }

public ActionResult GetNewRow（字符串行类型，int索引）
{
ViewBag.RowType=RowType；
ViewBag.Index=索引；
文档t=新文档（）；
如果（行类型==“配置”）
{
t、 Config=新列表（）；
t、 Config.Add（新配置（））；
}
else if（行类型==“…”）
{
}
返回视图（“_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>
  }
}

@model Data.Document
@{
布局=空；
}
@if（ViewBag.RowType==“配置”）
{   
对于（int i=ViewBag.Index；i Model.Config[i].ConfigurationId）
@EditorFor（m=>Model.Config[i].RowNumber）
@EditorFor（m=>Model.Config[i].Parent）
}
}

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

---

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

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

如果您想在服务器端执行此操作，不要重建整个表，而是创建一个

操作

，比如

GetEditor

，用于返回一个

tr

，并为编辑器提供适当的默认值，然后通过

ajax

请求它，并使用

success

处理程序中的

jquery

将其附加到表中

---

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

Mathew，感谢您的回复。我没有在动作中重建整个表，只是重建了一条空白记录。请参阅我问题中的现有控制器/视图代码。jQuery很好，我会尝试一下并让您知道。我告诉过您，如果您想要基于服务器的解决方案，您需要两个

action

方法，一个用于列出现有记录，另一个用于获取空白编辑器。我还必须对ID进行替换，但总体而言，它工作正常。谢谢你的帮助。如果我有客户端验证，我不确定它将如何进行，但就我而言，这不是一个问题。