.NET 5 模态框中如何触发Model Validation 提交无效跳转问题求解

问题根因 #

模态框内的表单使用了默认同步提交方式，校验失败后后端返回完整视图，浏览器会直接整页渲染返回内容，自然就跳出了模态框。

修复步骤 #

1. 调整控制器逻辑

首先补全GET Create方法返回分部视图避免加载多余布局；同时修改POST Create方法，适配ajax请求的返回逻辑：

// 新增GET Create方法，返回分部视图
public IActionResult Create()
{
    return PartialView();
}

//POST CREATE
[HttpPost]
[AutoValidateAntiforgeryToken]
public IActionResult Create(Models.Customer obj)
{
    if (ModelState.IsValid)
    {
        _db.Customers.Add(obj);
        _db.SaveChanges();
        // 判断是否为ajax请求
        if (Request.Headers["X-Requested-With"] == "XMLHttpRequest")
        {
            return Json(new { success = true });
        }
        return RedirectToAction("Index");
    }

    if (Request.Headers["X-Requested-With"] == "XMLHttpRequest")
    {
        // 校验失败返回带错误信息的分部视图
        return PartialView(obj);
    }
    return View(obj);
}

2. 修改Create.cshtml视图

首先确认该视图没有设置Layout（或者显式加Layout = null;），然后给form标签添加id标识：

<form id="createCustomerForm" method="post" asp-action="Create">
<!-- 原有表单内容保持不变 -->

3. 调整JS逻辑

新增表单异步提交逻辑，阻止默认同步跳转，同时动态加载内容后重新初始化客户端校验：

@section Scripts{
    <script type="text/javascript">
    $(document).ready(function () {
        $("#btnAddCustomer").on("click", function (e) {
            var options = { "backdrop": "static", keyboard: true };
            $.ajax({
                type: "GET",
                url: '@Url.Action("Create", "Customer")',
                success: function (data) {
                    $('#modalBody').html(data);
                    $('#modalCustomer').modal(options);
                    $('#modalCustomer').modal('show');
                    // 动态加载表单后初始化校验规则
                    $.validator.unobtrusive.parse('#createCustomerForm');
                },
                error: function () {
                    alert("Dynamic content load failed.");
                }
            });
        });

        // 监听表单提交事件，走异步提交
        $(document).on('submit', '#createCustomerForm', function(e) {
            e.preventDefault();
            var form = $(this);
            // 先触发客户端校验
            if(!form.valid()) return;

            $.ajax({
                type: form.attr('method'),
                url: form.attr('action'),
                data: form.serialize(),
                success: function(res) {
                    if(res.success) {
                        // 提交成功，关闭模态框刷新列表
                        $('#modalCustomer').modal('hide');
                        location.reload();
                        // 若要优化性能可改为局部刷新客户列表，无需重载整个页面
                    } else {
                        // 校验失败，替换模态框内的表单内容
                        $('#modalBody').html(res);
                        $.validator.unobtrusive.parse('#createCustomerForm');
                    }
                },
                error: function() {
                    alert('提交失败，请稍后重试');
                }
            });
        });
    });
    </script>
}

4. 额外检查项

确认布局页或Index页已经正确引入以下校验脚本，且加载顺序在你自定义的JS之前：

<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

修改完成后，校验失败的错误信息会直接在模态框内的表单上展示，不会再发生整页跳转的情况。

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