ASP.NET Core MVC中Ajax提交后ModelState无效时显示验证错误的方法

针对你用Ajax提交注册表单，ModelState验证失败后无法正确展示错误的问题，提供三种可行方案，按推荐优先级排序：

方案1：返回局部视图（推荐） #

核心思路是把注册表单单独提取为局部视图，验证失败时控制器返回该局部视图，前端用返回的HTML替换页面上的表单区域，复用ASP.NET Core内置的验证标签（asp-validation-for、asp-validation-summary）自动渲染错误。

步骤1：提取局部视图 #

创建_RegisterForm.cshtml局部视图，包含完整表单、输入框及验证标签：

@model RegisterViewModel

@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
    @Html.LabelFor(m => m.Email, new { @class = "form-label" })
    @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
    @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
</div>
<div class="form-group">
    @Html.LabelFor(m => m.Password, new { @class = "form-label" })
    @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
    @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
</div>
<!-- 其他表单字段 -->
<button type="submit" class="btn btn-primary">注册</button>

步骤2：主视图引用局部视图 #

在注册主视图中用容器包裹局部视图，方便后续替换：

<div id="registerFormContainer">
    @await Html.PartialAsync("_RegisterForm", Model)
</div>

步骤3：修改控制器HttpPost方法 #

验证失败时返回局部视图，验证成功返回JSON响应：

[HttpPost]
public IActionResult Register(RegisterViewModel model)
{
    if (!ModelState.IsValid)
    {
        // 返回局部视图而非完整页面
        return PartialView("_RegisterForm", model);
    }

    // 执行注册逻辑（如创建用户）
    return Json(new { success = true, redirectUrl = Url.Action("Index", "Home") });
}

步骤4：Ajax提交逻辑 #

提交表单后，根据响应类型替换表单容器或跳转页面：

$("#registerFormContainer form").submit(function(e) {
    e.preventDefault();
    const form = $(this);
    $.ajax({
        url: form.attr("action"),
        type: "POST",
        data: form.serialize(),
        success: function(response) {
            if (response.success) {
                // 注册成功，跳转首页
                window.location.href = response.redirectUrl;
            } else {
                // 验证失败，替换表单区域HTML
                $("#registerFormContainer").html(response);
            }
        },
        error: function() {
            alert("提交失败，请稍后重试");
        }
    });
});

方案2：返回ModelState错误JSON，前端手动渲染 #

如果不想用局部视图，可以将ModelState的错误序列化为JSON返回，前端手动定位到对应输入框上方渲染错误信息。

控制器代码 #

[HttpPost]
public IActionResult Register(RegisterViewModel model)
{
    if (!ModelState.IsValid)
    {
        // 按字段分组整理错误信息
        var fieldErrors = ModelState
            .Where(kvp => kvp.Value.Errors.Any())
            .ToDictionary(
                kvp => kvp.Key,
                kvp => kvp.Value.Errors.First().ErrorMessage
            );
        return Json(new { success = false, fieldErrors = fieldErrors });
    }

    // 注册逻辑
    return Json(new { success = true, redirectUrl = Url.Action("Index", "Home") });
}

前端Ajax回调 #

$("#registerForm").submit(function(e) {
    e.preventDefault();
    const form = $(this);
    // 清除之前的错误信息
    $(".text-danger").remove();
    
    $.ajax({
        url: form.attr("action"),
        type: "POST",
        data: form.serialize(),
        success: function(response) {
            if (response.success) {
                window.location.href = response.redirectUrl;
            } else {
                // 遍历字段错误，在对应输入框上方添加错误提示
                $.each(response.fieldErrors, function(fieldName, errorMsg) {
                    $("#" + fieldName).before(`<span class="text-danger">${errorMsg}</span>`);
                });
            }
        }
    });
});

方案3：使用官方Unobtrusive Ajax #

利用ASP.NET Core官方的Unobtrusive Ajax库，简化Ajax提交逻辑，自动处理局部视图替换。

步骤1：安装依赖 #

安装NuGet包：

Install-Package Microsoft.AspNetCore.Mvc.TagHelpers
Install-Package Microsoft.jQuery.Unobtrusive.Ajax

在布局页引入脚本：

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

步骤2：修改表单属性 #

给表单添加data-ajax相关属性，指定更新目标和成功回调：

<div id="formContainer">
    <form asp-action="Register" asp-controller="Account"
          data-ajax="true"
          data-ajax-method="POST"
          data-ajax-update="#formContainer"
          data-ajax-success="onRegisterSuccess">
        @await Html.PartialAsync("_RegisterForm", Model)
    </form>
</div>

步骤3：控制器和回调函数 #

控制器代码同方案1，前端添加成功回调：

function onRegisterSuccess(response) {
    if (response.success) {
        window.location.href = response.redirectUrl;
    }
    // 验证失败时，Unobtrusive Ajax会自动用局部视图HTML替换#formContainer
}

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