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 Reults生成的

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

e.g。

我的表1 | 删除表格按钮

我的表2 | 删除表格按钮

我的表3 | 删除表格按钮

...

所以现在我想要做的是点击删除按钮，该按钮发布行表格，然后一旦表格被删除，得到一个刷新的表格列表减去已删除的项目。要实现此 DeleteTable 操作执行删除，然后调用 GetTableInfo ，它将返回JSONResult（这是最初弹出表的调用）。删除表单设置为不显眼的ajax，以便它重新调用 OnSuccess 函数来重新填充表格;问题是第二次返回我的JSON字符串，但是没有再次构建到表中。

我很困惑，有人可以帮忙吗？另外，我是否正确地采用了这种方式？我默认为jquery，因为我无法解决如何使用MVC3标签使用Ajax.BeginForm动态创建表内容 - 非常感谢任何建议。

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

在表单发布后刷新MVC3中的表

1 个答案: