0

我的场景是我有一些 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操作执行删除，然后调用GetTableInfo，它返回一个 JSONResult（这是最初填充表的调用）。删除表单设置为不显眼的 ajax，以便它调用OnSuccess函数来重新填充表；问题是第二次返回我的 JSON 字符串，但没有再次构建到表中。

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

4

1 回答 1

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'
    });
});
于 2012-11-16T12:51:03.623 回答