新的记录添加新行到表的末尾 [英] Add new row for new record to the end of table

问题描述

我有数据表，我在大规模编辑模式正在呈现，因此，所有行是可编辑的一次。下面code编辑现有数据的伟大工程：

I have a table of data that I am rendering in a mass edit mode, so all rows are editable at once. The following code works great for editing existing data:

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

由于我使用的是循环，剃刀发生在所有得到呈现，这样我的模型正确绑定到我的控制器元素更改其名称的照顾。

Since I'm using the for loop, Razor takes care of changing the names on all the elements that get rendered so that my model binds correctly to my controller.

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

I want to add a button to add a new record. I know that I can perform a post back to an action, add a blank record to the model, and then re-render the view with the updated model.

我想这样做是执行此异步使用一些JavaScript来代替。我的计划至今是创建返回基于上次指数（最后一个索引存储在隐藏字段，hNextConfigIndex）。

What I would like to do is perform this async using some JavaScript instead. My plan so far is to create an action that returns the rendered new row based on the last index (last index is stored in a hidden field, 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> 0）是不会存在的索引。

The action works, but the view of course does not. There is only a single blank dummy record, so of course the index i (where i > 0) is not going to exist.

我敢肯定有这样做的其他方式。我可以使用JavaScript刚才复制的最后一行，并更改值，但我会做很多硬编码在JavaScript的方式。

I'm sure there are other ways of doing this. I could just copy the last row using javascript and change the values, but I would have to do a lot of hard coding in javascript that way.

推荐答案

如果jQuery的解决方案是可以接受的，你可以做到这一点的客户端。下面code可能需要细化，但应该给你一个想法。

If jquery solution is acceptable, you can do it in client side. The below code might need refinement, but should give you an idea.

$("#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 并追加它使用的jQuery 在成功处理程序表。

If you want to do it in server side, don't rebuild the entire table, but create an Action, say GetEditor for returning a tr with appropriate default values for the editor and then request it via ajax and append it to the table using jquery in the success handler.

重建整个表只是增加一个新的记录，每次只是增加了加载时间为记录成长更让用户想知道为什么要花更多的时间每次他增加了一个新的记录时间。

Rebuilding the entire table just for adding a new record every time just adds to the load time as the records grow leaving the user to wonder why it take more and more time each time he adds a new record.

这篇关于新的记录添加新行到表的末尾的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！