ASP.NET MVC控制器如何调用Bootstrap模态框展示提交错误？

完全可以实现，按下面几步修改即可：

1. 修改控制器逻辑，返回原录入视图并传递错误信息 #

把原来返回ShowError视图的代码改成直接返回原录入视图，同时把错误信息存入ModelState或者TempData，这样页面不会跳转，还能保留用户之前输入的大部分数据：

if (LocExists(obj.Loc.BName, obj.Loc.LocTId.ToString())) 
{
    // 往ModelState添加错误信息，前端可直接读取
    ModelState.AddModelError("", "该位置名称已存在，请重新输入");
    
    // 注释清空输入的代码，让用户看到之前填写的内容，方便修改
    // obj.Loc.BName = null;
    // obj.Loc.LocTId= 0;

    // 返回你的录入视图（替换成实际视图名称，比如Create/Edit）
    return View("你的录入视图名称", obj);
}

如果习惯用TempData存错误，也可以这么写：

if (LocExists(obj.Loc.BName, obj.Loc.LocTId.ToString())) 
{
    TempData["ErrorMsg"] = "该位置名称已存在，请重新输入";
    return View("你的录入视图名称", obj);
}

2. 在录入视图中添加Bootstrap模态框 #

在用户填写数据的录入视图里，添加Bootstrap模态框的HTML结构，用来承载错误信息：

<!-- 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">
        <!-- 显示TempData中的错误 -->
        @if (!string.IsNullOrEmpty(TempData["ErrorMsg"] as string))
        {
            <p class="text-danger">@TempData["ErrorMsg"]</p>
        }
        <!-- 显示ModelState中的所有错误 -->
        @foreach (var error in ViewData.ModelState.Values.SelectMany(v => v.Errors))
        {
            <p class="text-danger">@error.ErrorMessage</p>
        }
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">确定</button>
      </div>
    </div>
  </div>
</div>

3. 添加JS自动触发模态框 #

在视图底部添加一段JavaScript，页面加载完成后检查是否有错误信息，若存在则自动弹出模态框：

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 检查是否存在错误信息
        const hasError = @(!string.IsNullOrEmpty(TempData["ErrorMsg"] as string) || ViewData.ModelState.Any(m => m.Value.Errors.Any()));
        
        if (hasError) {
            // 初始化并显示模态框
            const errorModal = new bootstrap.Modal(document.getElementById('errorModal'));
            errorModal.show();
        }
    });
</script>

注意事项 #

• 确保页面已经引入Bootstrap的CSS和JS文件（Bootstrap 5需要同时引入Popper.js）
• 如果使用Bootstrap 4，模态框初始化代码改为$('#errorModal').modal('show');，需提前引入jQuery

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