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);

    });
});

しかし、私が見ている問題は、コレクションが空で、最初の行を追加できる必要がある場合です。その場合に処理する非表示の行があると思いますが、それは単なるコードの複製です。

ビューと JS の両方で一貫性を保つ HTML チャンクを複製するためのベスト プラクティス アプローチはありますか? 助けてくれてありがとう！

4

0 に答える 0