ASP.NET Core MVC：使用模态弹窗创建后如何显示错误消息

方案1：返回JSON结果，前端处理错误提示 #

因为模态弹窗是异步请求，原来的ViewBag是服务器返回完整视图时传递数据的方式，现在需要改成返回JSON格式的结果，让前端接收后在弹窗内显示错误。

控制器代码示例 #

[HttpPost]
public IActionResult Create(PermissionViewModel model)
{
    if (ModelState.IsValid)
    {
        // 检查权限级别是否重复
        bool levelExists = _context.Permissions.Any(p => p.Level == model.Level);
        if (levelExists)
        {
            // 返回错误状态和消息
            return Json(new { success = false, msg = "该权限级别已存在，请重新输入" });
        }
        // 正常创建逻辑
        _context.Permissions.Add(model);
        _context.SaveChanges();
        return Json(new { success = true, msg = "创建成功" });
    }
    // 模型验证失败时收集错误信息
    var errorList = ModelState.Values.SelectMany(v => v.Errors).Select(e => e.ErrorMessage);
    return Json(new { success = false, msg = string.Join("；", errorList) });
}

前端AJAX代码示例 #

$("#createForm").submit(function(e) {
    e.preventDefault();
    var formData = $(this).serialize();
    
    $.ajax({
        url: $(this).attr("action"),
        type: "POST",
        data: formData,
        success: function(res) {
            if (res.success) {
                // 创建成功：关闭弹窗、刷新列表
                $("#modalCreate").modal("hide");
                reloadPermissionList(); // 自定义的列表刷新函数
                alert(res.msg);
            } else {
                // 显示错误：在弹窗内提前加一个错误容器，比如<div id="errorTip" class="text-danger mt-2"></div>
                $("#errorTip").text(res.msg).show();
            }
        },
        error: function() {
            $("#errorTip").text("请求出错，请稍后重试").show();
        }
    });
});

方案2：返回部分视图，重新渲染弹窗内容 #

如果想保留原有模型验证的UI（比如ValidationMessageFor），可以返回包含错误的弹窗部分视图，让前端替换弹窗内容。

控制器代码示例 #

[HttpPost]
public IActionResult Create(PermissionViewModel model)
{
    if (ModelState.IsValid)
    {
        bool levelExists = _context.Permissions.Any(p => p.Level == model.Level);
        if (levelExists)
        {
            // 将错误添加到ModelState
            ModelState.AddModelError("Level", "该权限级别已存在，请重新输入");
            // 返回弹窗的部分视图
            return PartialView("_CreateModalContent", model);
        }
        _context.Permissions.Add(model);
        _context.SaveChanges();
        return Json(new { success = true });
    }
    // 模型验证失败，返回部分视图
    return PartialView("_CreateModalContent", model);
}

前端AJAX代码示例 #

$("#createForm").submit(function(e) {
    e.preventDefault();
    var formData = $(this).serialize();
    
    $.ajax({
        url: $(this).attr("action"),
        type: "POST",
        data: formData,
        success: function(res) {
            if (res.success) {
                $("#modalCreate").modal("hide");
                reloadPermissionList();
            } else {
                // 替换弹窗主体内容为返回的部分视图
                $("#modalCreate .modal-body").html(res);
            }
        },
        error: function() {
            alert("请求出错，请稍后重试");
        }
    });
});

关键注意点 #

• 异步请求不能直接返回Index视图，否则会替换整个页面，而非在弹窗内显示错误。
• 方案1需要提前在弹窗内预留错误显示容器；方案2需要把弹窗的表单内容抽成单独的部分视图（比如_CreateModalContent.cshtml），方便重复渲染。

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