如何让AJAX模态框报错时不关闭，在框内显示错误而非跳转全页

1. 替换视图内的表单为AJAX提交表单 #

将你的ChangePassword视图中原有的Html.BeginForm替换为Ajax.BeginForm，指定提交后更新的模态框内容容器，避免整页跳转：

@using (Ajax.BeginForm("ChangePassword", "你的控制器名称", new AjaxOptions
{
    HttpMethod = "POST",
    UpdateTargetId = "modal-body-container", // 替换为你的模态框内容区域的实际DOM ID
    OnSuccess = "handleChangePwdSubmitSuccess"
}))
{
    // 原有表单内容、验证控件保持不变
}

注意：必须在全局布局页中引入jquery.unobtrusive-ajax.js依赖，否则AJAX表单配置不会生效。

2. 调整控制器返回逻辑 #

修改POST接口的成功分支逻辑，AJAX请求下不直接返回302跳转，而是返回JSON结果通知前端处理成功逻辑，避免自动跳转：

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> ChangePassword(ChangePasswordViewModel model)
{
    if (!ModelState.IsValid)
    {
        // 验证失败直接返回视图，AJAX请求下Layout为null，仅返回表单片段
        return View(model);
    }
    var result = await UserManager.ChangePasswordAsync(User.Identity.GetUserId(), model.OldPassword, model.NewPassword);
    if (result.Succeeded)
    {
        var user = await UserManager.FindByIdAsync(User.Identity.GetUserId());
        if (user != null)
        {
            await SignInManager.SignInAsync(user, isPersistent: false, rememberBrowser: false);
        }
        var redirectUrl = Url.Action("Index", "Profile", new { tabName = "settings", Message = ManageMessageId.ChangePasswordSuccess });
        // 判断是否为AJAX请求，分别处理返回值
        if (Request.IsAjaxRequest())
        {
            return Json(new { success = true, redirectUrl = redirectUrl });
        }
        return Redirect(redirectUrl);
    }
    AddErrors(result);
    // 业务失败同样返回视图，直接在模态框内展示错误
    return View(model);
}

3. 添加前端成功回调函数 #

在父页（引入模态框的页面）添加提交成功的处理函数，仅在提交成功时关闭模态框、跳转页面：

function handleChangePwdSubmitSuccess(res) {
    if (res && res.success) {
        // 替换为你的模态框实际ID，关闭模态框
        $('#password-modal').modal('hide');
        // 跳转到成功后指定页面
        window.location.href = res.redirectUrl;
    }
}

补充检查项 #

• 确认模态框的内容容器ID和AjaxOptions中配置的UpdateTargetId完全一致
• 如果你使用的自定义ModalDialogActionLink扩展自带提交后自动关闭模态框的逻辑，需要修改扩展代码，仅当接口返回成功标识时执行关闭操作，失败时保留模态框展示返回的表单内容。

内容的提问来源于stack exchange，提问作者S.Purtan