在表單發佈後刷新表格MVC3

Question

我的場景是，我有一些HTML下拉菜單，它在更改時觸發jQuery，以動態填充返回的JSON結果表。

[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"); 
    } 

過濾表中的動態表列出，每一行dispaying表名和一個表格，以允許表被刪除。這是從jQuery功能內生成的一個jQuery函數「OnSuccess」

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 action執行刪除，然後調用GetTableInfo這是返回一個JSONResult（這是最初填充表的調用）。 刪除表單設置爲不顯眼的ajax，使其回調OnSuccess函數重新填充表;問題是第二次回合我的JSON字符串被返回，但沒有被重新構建到表中。

我很困惑，任何人都可以幫忙嗎？另外，我是否正在以正確的方式去做這件事？我默認爲jQuery，因爲我無法解決如何使用MVC3標籤動態創建Ajax.BeginForm的表格內容 - 感謝任何建議。

Answer 1

您不需要行內的表單標籤。只需發佈你想用jQuery的阿賈克斯：

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