表单发布后刷新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");
    }

动态表列出过滤后的表，每行显示表名和允许删除表的表格。这是从 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 函数来重新填充表；问题是第二次返回我的 JSON 字符串，但没有再次构建到表中。

我很困惑，有人可以帮忙吗？另外，我是否以正确的方式进行此操作？我默认使用 jquery，因为我不知道如何使用 Ajax.BeginForm 使用 MVC3 标签动态创建表格内容 - 不胜感激。

Answer 1

您不需要在行内使用表单标签。只需使用 jquery ajax 发布您想要的内容：

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