1

複数の値を持つことができるフォームがあります。

例えば：

扶養家族を記載してください。

3 つのフィールドを含むフィールドセットがあります

  • ファーストネーム、
  • 苗字、
  • 生年月日

追加ボタンと同様に。

jQuery ajaxリクエストの追加ボタンが起動し、成功するとテーブル行がテーブルに追加されます

疑似コード: 

$.ajax({
    url: myUrl,
    data: myData,
    success: function(){
        var row = $("<tr id='...'>");
        row.append("<td>").text(txtFirstName.val());
        row.append("<td>").text(txtLastName.val());
        row.append("<td>").text(dteDateOfBirth.val());
        row.appendTo($("#myDependantsTable"));
    }
    ...
});

これはうまくいきます。ただし、現在、HTML は 2 つの異なる場所、JavaScript とビューにも定義されています。

いいえ: 

<tr>
    <td>@Model.FirstName</td>
    <td>@Model.LastName</td>
    <td>@Model.DateOfBirth</td>
</tr>

日付列にクラスを追加するなど、これらの変更を開始すると問題が発生し、コードを2回変更する必要があります。

とにかくこの問題の周りにありますか?

をお願いします：

  • ポストバックなしで「ajaxy」に追加される行
  • 1 か所だけ変更する必要がある一貫したレイアウト
4

1 に答える 1

4

行を含む部分ビューを返すために、AJAX 要求で呼び出されるコントローラー アクションを持つことができます。テーブルを生成するときに使用するのと同じパーシャル。したがって、javascript で HTML を操作する代わりに、返されたパーシャルをテーブルに追加するだけです。

$.ajax({
    url: myUrl,
    data: { 
        // That's to bind to the view model that the controller
        // action you are invoking with the AJAX request takes
        // as parameter
        firstName: txtFirstName.val(), 
        lastName: txtLastName.val(), 
        dob: dteDateOfBirth.val() 
    }
    success: function(result) {
        $("#myDependantsTable").append(result);
    }
    ...
});

そしてあなたのマークアップで：

<table id="myDependantsTable">
    @foreach(var item in Model)
    {
        @Html.Partial("_Row", item)
    }
</table>

これで、コントローラー アクションは同じパーシャルを返します。

public ActionResult SomeActionInvokedWithAjax(MyViewModel model)
{
    return PartialView("_Row", model);
}
于 2012-08-13T18:05:16.063 に答える