1

在使用 MVC3 并遍历集合以显示表中的行以及允许使用 JQuery 和/或 Ajax 添加客户端行时，您的最佳实践规则是什么？我要避免的是复制表格行标记并在我的 JS 代码中维护它。如果这已经被覆盖，我很抱歉。

这是我要避免的..

具有强类型 Customer 对象的 MVC 视图代码

<table id="tblCustomers">
<tbody>
@foreach (Customer cust in Model)
{
    <tr><td><div class="nameholder">@cust.Name</div></td><td><div class="idholder">@cust.Id</div></td></tr>
}
</tbody>
</table>
<input type="text" name="txtName" id="txtName" style="width:150px;" />
<input type="button" id="btnTest" value="Testing!" />

JS代码：

$(document).ready(function () {
    $("#btnTest").click(function () {
        $("#tblCustomers").append('<tr><td><div class="nameholder">UiInputValue</div></td><td><div class="idholder">UiInputValue</div></td></tr>');

    });
});

我看到的代码建议克隆表中的最后一行然后更改值是一种方法，就像下面的代码一样：

$(document).ready(function () {
    $("#btnTest").click(function () {
        var clone1 = $("#tblCustomers tbody>tr:first").clone(true);
        var name = $("#txtName").val();
        $(clone1).find(".nameholder").html(name);
        $(clone1).find(".idholder").html('not yet defined');
        $("#tblCustomers").append(clone1);

    });
});

但是我看到的问题是在集合为空并且我需要能够添加第一行的情况下。我想你可以有一个隐藏的行来处理这种情况，但这只是重复的代码。

是否有克隆 HTML 块的最佳实践方法，该方法将在视图和 JS 之间保持一致？提前感谢您的帮助！

4

0 回答 0