0

私のシナリオは、変更時に jQuery を起動して、返された JSON 結果のテーブルに動的に入力する HTML ドロップダウンがあることです。

[HttpPost]
    public JsonResult GetTableInfo(Guid schemeId, Guid tableTypeId)
    {
        var tables = this.tableModel.GetTableInformationList(schemeId, tableTypeId);
        var formattedData = from t in tables
                            select new
                            {
                                TableId = t.TableId.ToString(),
                                TableName = t.TableName
                            };

        return Json(formattedData.ToList(), "text/json");
    }

動的テーブルにはフィルタリングされたテーブルがリストされ、各行にはテーブル名とテーブルを削除できるフォームが表示されます。これは、jQuery 関数「OnSuccess」内の JSON 結果から生成されます。

function OnSuccess(data) {
    var scheme = $('#schemesList').val();
    var tableType = $('#tableTypesList').val();
    var requestedBy = $('#requestedBy').val();

    var targetId = $('#tablesList');
    targetId.empty();
    targetId.css('color', 'black');
    if (data.length < 1) {
        targetId.append('<tr><td><strong>No tables match the selection</strong></td></tr>').css('color', 'Red');};


    for (var i = 0; i < data.length; i++) {
        var name = data[i].TableName;
        var id = data[i].TableId;
        targetId.append('<tr><td>' + name + '</td><td class="buttoncol">' +
                        '<form action="/DeleteTable" data-ajax="true" data-ajax-mode="replace" ' +
                        'data-ajax-success="OnSuccess" data-ajax-failure="OnFailure" data-ajax-update="#tablesList" ' +
                        'data-ajax-url="/GetTableInfo" method="post"> ' +
                        '<input id="tableId" name="tableId" type="hidden" value="' + id + '" />' +
                        '<input id="schemeId" name="schemeId" type="hidden" value="' + scheme + '" /> ' +
                        '<input id="tableTypeId" name="tableTypeId" type="hidden" value="' + tableType + '" /> ' +
                        '<input id="requestedBy" name="requestedBy" type="hidden" value="' + requestedBy + '" /> ' +
                        '<input type="submit" value="Delete table" id="deleteButton" /></form></td></tr>');
        if (requestedBy.length <= 0) {
            $('form input#deleteButton').attr('disabled', true);
        };
    }        
};

例えば

私のテーブル 1 | テーブルの削除ボタン

私のテーブル 2 | テーブルの削除ボタン

私のテーブル 3 | テーブルの削除ボタン

...

だから今私ができるようにしたいのは、行フォームを投稿する削除ボタンをクリックし、テーブルが削除されたら、削除されたアイテムを除いたテーブルの更新されたリストを取得することです。これを達成するために、私のDeleteTableアクションは削除を実行し、JSONResultを返す GetTableInfo を呼び出します (これは最初にテーブルにデータを入力する呼び出しです)。削除フォームは目立たない ajax として設定されているため、OnSuccess関数を呼び出してテーブルを再作成します。問題は2回目のJSON文字列が返されることですが、再びテーブルに組み込まれていません。

私は混乱しています、誰か助けてもらえますか？また、私はこれを正しい方法で行っていますか? MVC3 タグを使用して Ajax.BeginForm でテーブルの内容を動的に作成する方法がわからなかったため、デフォルトで jquery を使用しました。アドバイスをいただければ幸いです。

4

1 に答える 1

1

行内にフォームタグは必要ありません。jqueryajaxを使用して必要なものを投稿するだけです。

for (var i = 0; i < data.length; i++) {
        var name = data[i].TableName;
        var id = data[i].TableId;
        targetId.append('<tr data-id=\'' + id + \'' ><td>' + name + '</td><td class="buttoncol">' +
                        '<input id="tableId" name="tableId" type="hidden" value="' + id + '" />' +
                        '<input id="schemeId" name="schemeId" type="hidden" value="' + scheme + '" /> ' +
                        '<input id="tableTypeId" name="tableTypeId" type="hidden" value="' + tableType + '" /> ' +
                        '<input id="requestedBy" name="requestedBy" type="hidden" value="' + requestedBy + '" /> ' +
                        '<input type="button" value="Delete table" class="deleteButton" id="deleteButton" /></td></tr>');
        if (requestedBy.length <= 0) {
            $('form input#deleteButton').attr('disabled', true);
        };
    }        

$(".deleteButton").click(function (){
    var btn = $(this);
    var currentTr = btn.closest("tr");
    var tableID = currentTr.attr("data-id");

    $.ajax({
      type: 'POST',
      url: url,
      data: {id : tableID},
      success: function (){
         var tr = $('#tablesList tr[data-id="' + tableID +'"]');
         tr.remove();
      },
      dataType: 'JSON'
    });
});
于 2012-11-16T12:51:03.623 に答える