ASP.NET MVC执行Delete操作后Index页面未正常渲染刷新问题求助

核心原因 #

你的Delete操作是通过AJAX异步请求调用的，和Add操作的同步提交逻辑完全不同：

• Add操作使用的是普通表单同步提交，浏览器收到服务端返回的重定向指令/视图结果时，会自动刷新整页渲染新内容，所以跳转正常。
• AJAX是异步请求，浏览器不会默认处理服务端的Redirect响应，也不会自动将返回的Index视图替换当前页面内容。你当前的AJAXdone回调中仅处理了关闭弹窗的逻辑，没有触发页面刷新，所以删除完成后页面没有变化。

解决方案 #

方案1：AJAX成功后手动刷新页面（改造成本最低） #

直接修改前端AJAX的成功回调，新增location.reload()触发整页刷新即可：

$("#deleteButton").click(function () {
        var button = $(this);
        $.ajax({ method: 'POST', url: button.data('url') })
            .done(function () {
                $('#confirmModal').modal('hide');
                button.removeData('url');
                // 新增此行手动刷新页面
                location.reload();
            })
            .fail(function () {
                magalert.communicationError();
            });
    });

修改后服务端不需要调整原有重定向/返回视图的逻辑，也可以直接删除相关返回逻辑，只返回空结果或者成功状态即可。

方案2：局部刷新表格（用户体验更好） #

不需要整页刷新，只更新表格内容：

1. 调整后端Delete方法，返回操作状态而不是视图/重定向：

public IActionResult Delete(int Id)
{
    try
    {
        var jurisdictionId = _user.Current().JurisdictionId;
        _electedOfficials.deleteOrgType(jurisdictionId, Id);
        return Json(new { success = true });
    }
    catch (Exception e)
    {
        _logger?.LogCritical(new EventId(103, "CAdminOrganizationType"), e, $"Error when deleting id: " + Id);
        return Json(new { success = false });
    }
}

2. 前端AJAX成功后，要么直接移除表格中被删除的对应行，要么重新拉取表格数据渲染即可，不需要整页重载。

方案3：改为同步提交 #

如果不需要异步交互，把Delete的触发方式改成和Add一样的普通表单同步提交，服务端的RedirectToAction(nameof(Index))逻辑就会自动生效，无需修改后端代码。

内容的提问来源于stack exchange，提问作者Mark