如何在ASP.NET Core 6 Web应用的弹窗中显示验证汇总错误信息？

要把验证错误显示在用户友好的弹窗里，你可以借助ASP.NET Core的ModelState获取错误信息，结合Bootstrap模态框（你的视图已经用了Bootstrap样式，无需额外引入新UI库）来实现，具体步骤如下：

1. 修改视图代码 #

在视图中添加Bootstrap模态框结构，将默认的验证汇总内容转移到弹窗中，再通过JavaScript控制弹窗显示：

<div class="container">
    <form class="w-100" asp-controller="Home" asp-action="Index" method="post">
        <!-- 隐藏默认验证汇总，后续将内容转移到弹窗 -->
        <div asp-validation-summary="All" id="validationErrors" class="d-none"></div>
        
        <!-- 原表单字段保持不变 -->
        <div class="d-flex">
            <div>
                <label class="form-label" asp-for="Name">Username</label>
                <input asp-for="Name" class="form-control w-100" />
            </div>
            <div>
                <label class="form-label" asp-for="password">Password</label>
                <input asp-for="password" class="form-control w-100" />
            </div>
            <div>
                <label class="form-label" asp-for="ConfirmPassword">Confirm Password</label>
                <input asp-for="ConfirmPassword" class="form-control w-100" />
            </div>
        </div>
        <!-- 其他表单字段与原代码一致，此处省略 -->

        <br />
        <br />
        <div>
            <button class="btn btn-danger text-white">submit now !</button>
        </div>
    </form>
</div>

<!-- 新增Bootstrap错误弹窗 -->
<div class="modal fade" id="errorModal" tabindex="-1" aria-labelledby="errorModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="errorModalLabel">表单填写有误</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="modalErrorContent"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">知道了</button>
            </div>
        </div>
    </div>
</div>

<!-- 引入Bootstrap JS（如果页面未引入） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 页面加载时检查是否存在验证错误，有则弹出窗口
    document.addEventListener('DOMContentLoaded', function() {
        const errorContainer = document.getElementById('validationErrors');
        if (errorContainer && errorContainer.innerHTML.trim() !== '') {
            // 将验证错误内容复制到弹窗
            document.getElementById('modalErrorContent').innerHTML = errorContainer.innerHTML;
            // 打开弹窗
            const modal = new bootstrap.Modal(document.getElementById('errorModal'));
            modal.show();
        }
    });
</script>

2. 修正控制器代码 #

你原控制器中的ModelState.Clear()会清除所有验证错误信息，必须删除这行代码，否则错误无法显示：

public IActionResult Index()
{
    return View();
}

[HttpPost]
public IActionResult Index(CandidateModel cmd)
{
    if (ModelState.IsValid)
    {
        // 此处编写验证通过后的业务逻辑，比如保存数据
        return RedirectToAction("Success"); // 可选：跳转到成功页面
    }
    
    // 验证失败时返回视图，保留ModelState中的错误信息
    return View(cmd);
}

// 可选：新增成功页面Action
public IActionResult Success()
{
    return View();
}

3. 可选优化 #

• 若需客户端即时验证（无需提交表单即可提示错误），可引入jQuery Validation和jQuery Unobtrusive Validation，实现前端实时验证并将错误展示在弹窗中。
• 可自定义验证错误的样式，比如将错误内容整理为<ul>列表格式，让弹窗内的错误信息更清晰整齐。

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