Question

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

这是我想要避免的......

具有强类型客户对象的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块的最佳实践方法，它在View和JS之间保持一致？在此先感谢您的帮助！

MVC3和JQuery表行克隆的最佳实践

0 个答案: