ASP.NET Core MVC服务端验证失败时触发Bootstrap模态框显示的实现咨询

我来给你一步步拆解实现这个需求的两种常用方式，你可以根据自己的场景选合适的：

方式一：同步表单提交（页面刷新） #

这种方式逻辑简单直接，适合不需要无刷新体验的场景：

1. 准备Razor视图 #

在列表视图里添加Bootstrap模态框（用于展示删除失败原因），同时保留带删除按钮的列表：

@model IEnumerable<YourItemModel>

<!-- 错误提示模态框 -->
<div class="modal fade" id="deleteErrorModal" tabindex="-1" aria-labelledby="deleteErrorModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteErrorModalLabel">删除失败</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                @ViewData["DeleteErrorMessage"]
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>

<!-- 项目列表 -->
<table class="table">
    <thead>
        <tr>
            <th>项目名称</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.Name</td>
                <td>
                    <!-- 使用标签助手生成删除表单 -->
                    <form asp-action="Delete" asp-controller="YourController" method="post">
                        <input type="hidden" asp-for="@item.Id" />
                        <button type="submit" class="btn btn-danger">删除</button>
                    </form>
                </td>
            </tr>
        }
    </tbody>
</table>

<!-- 页面加载时自动弹出模态框的脚本 -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 检查是否存在删除错误消息
        const errorMsg = '@ViewData["DeleteErrorMessage"]';
        if (errorMsg && errorMsg.trim() !== '') {
            const modal = new bootstrap.Modal(document.getElementById('deleteErrorModal'));
            modal.show();
        }
    });
</script>

2. 控制器逻辑实现 #

在对应控制器里编写Delete的Post方法，处理验证和删除逻辑：

public class YourController : Controller
{
    // 假设这是你的数据上下文/服务
    private readonly YourDbContext _context;

    public YourController(YourDbContext context)
    {
        _context = context;
    }

    // 列表页面的Get方法
    public IActionResult Index()
    {
        var items = _context.YourItems.ToList();
        return View(items);
    }

    [HttpPost]
    public IActionResult Delete(int id)
    {
        // 1. 执行删除前的验证逻辑（替换成你的实际规则）
        var item = _context.YourItems.Find(id);
        bool canDelete = !item.IsInUse; // 示例：检查项目是否正在被使用

        if (!canDelete)
        {
            // 将错误消息传递到视图
            ViewData["DeleteErrorMessage"] = "该项目正在被关联使用，无法删除！";
            // 重新获取列表数据，返回原视图
            var model = _context.YourItems.ToList();
            return View("Index", model);
        }

        // 2. 验证通过，执行删除操作
        _context.YourItems.Remove(item);
        _context.SaveChanges();

        // 3. 删除成功后重定向到列表页，避免重复提交
        return RedirectToAction(nameof(Index));
    }
}

方式二：Ajax异步提交（无刷新体验） #

如果想要更流畅的用户体验，不想刷新整个页面，推荐用这种方式：

1. 调整Razor视图 #

把删除按钮改成普通按钮（去掉表单），同时保留模态框：

@model IEnumerable<YourItemModel>
@Html.AntiForgeryToken() <!-- 必须添加，防止CSRF攻击 -->

<!-- 错误提示模态框 -->
<div class="modal fade" id="deleteErrorModal" tabindex="-1" aria-labelledby="deleteErrorModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteErrorModalLabel">删除失败</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="errorMessageContent"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>

<!-- 项目列表 -->
<table class="table">
    <thead>
        <tr>
            <th>项目名称</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr data-item-id="@item.Id">
                <td>@item.Name</td>
                <td>
                    <button type="button" class="btn btn-danger delete-btn" data-id="@item.Id">删除</button>
                </td>
            </tr>
        }
    </tbody>
</table>

<!-- Ajax删除脚本 -->
<script>
    document.querySelectorAll('.delete-btn').forEach(btn => {
        btn.addEventListener('click', async function() {
            const itemId = this.getAttribute('data-id');
            const token = document.querySelector('input[name="__RequestVerificationToken"]').value;

            try {
                const response = await fetch('/YourController/Delete', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'RequestVerificationToken': token
                    },
                    body: JSON.stringify({ id: itemId })
                });

                const result = await response.json();

                if (result.success) {
                    // 删除成功：移除当前行
                    this.closest('tr').remove();
                } else {
                    // 验证失败：显示模态框
                    document.getElementById('errorMessageContent').textContent = result.errorMessage;
                    const modal = new bootstrap.Modal(document.getElementById('deleteErrorModal'));
                    modal.show();
                }
            } catch (err) {
                console.error('删除请求出错:', err);
                document.getElementById('errorMessageContent').textContent = '删除请求失败，请稍后重试';
                const modal = new bootstrap.Modal(document.getElementById('deleteErrorModal'));
                modal.show();
            }
        });
    });
</script>

2. 调整控制器返回Json结果 #

修改Delete方法，返回JSON格式结果方便前端判断：

[HttpPost]
public IActionResult Delete(int id)
{
    var item = _context.YourItems.Find(id);
    bool canDelete = !item.IsInUse; // 你的验证逻辑

    if (!canDelete)
    {
        return Json(new { success = false, errorMessage = "该项目正在被关联使用，无法删除！" });
    }

    _context.YourItems.Remove(item);
    _context.SaveChanges();

    return Json(new { success = true });
}

注意事项 #

• 确保项目已引入Bootstrap的CSS和JS文件，否则模态框无法正常工作
• 不要忘记CSRF防护：同步表单会自动生成令牌，Ajax方式需要手动带上__RequestVerificationToken
• 验证逻辑要根据实际业务场景调整，比如检查关联数据、用户权限等

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