页面出现并发错误时如何显示Bootstrap Alert Box？

没问题，我来帮你搞定这个需求！下面分步骤给你拆解实现方案，适配常见的ASP.NET MVC/Razor Pages场景：

1. 控制器端捕获并发异常并传递错误信息 #

首先你需要在控制器的业务逻辑里捕获并发相关的异常（比如Entity Framework里的DbUpdateConcurrencyException），然后把错误信息存入TempData（跨请求保存数据推荐用这个）或者ViewData，这样视图就能拿到错误内容：

public async Task<IActionResult> Update(YourModel model)
{
    try
    {
        // 你的数据更新逻辑
        _context.Update(model);
        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }
    catch (DbUpdateConcurrencyException ex)
    {
        // 捕获并发异常，自定义友好提示
        TempData["ConcurrencyError"] = "抱歉，该数据已被其他用户修改，请刷新页面后重试。";
        // 返回原视图，保留用户之前输入的内容
        return View(model);
    }
}

2. 在视图中渲染Bootstrap警告框 #

接下来在你的页面视图（比如Edit.cshtml）里，检查TempData里是否存在错误信息，如果有就渲染Bootstrap的警告框。建议把它放在表单上方或者页面顶部，让用户一眼看到：

<!-- 放在页面合适位置，比如表单上方 -->
@if (TempData["ConcurrencyError"] != null)
{
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        @TempData["ConcurrencyError"]
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
}

<!-- 你的表单代码 -->
<form asp-action="Update">
    <!-- 表单字段内容 -->
</form>

3. 确保Bootstrap资源正确引入 #

这一步很容易忘！要保证你的布局页里已经引入了Bootstrap的CSS和JS文件，不然警告框的样式和关闭功能会失效：

<!-- 在布局页<head>中引入Bootstrap CSS -->
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />

<!-- 在布局页<body>末尾引入Bootstrap JS（Bootstrap 5+用bundle包，包含Popper.js） -->
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

额外优化建议 #

• 复用警告框组件：如果多个页面都需要显示并发错误，可以把Alert的渲染逻辑封装成局部视图，比如创建_ConcurrencyAlert.cshtml：

  @if (TempData["ConcurrencyError"] != null)
  {
      <div class="alert alert-danger alert-dismissible fade show" role="alert">
          @TempData["ConcurrencyError"]
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
  }
  

  之后在需要的视图里直接引用：@await Html.PartialAsync("_ConcurrencyAlert")

• AJAX请求场景适配：如果是异步提交表单，就不能用TempData了，得返回JSON结果，前端通过JS动态创建Alert：
  控制器端修改：

  catch (DbUpdateConcurrencyException ex)
  {
      return Json(new { success = false, message = "并发错误：该数据已被其他用户修改，请刷新后重试" });
  }
  

  前端JS逻辑：

  // 假设你的表单有id="updateForm"，警告框容器有id="alertContainer"
  $('#updateForm').submit(function(e) {
      e.preventDefault();
      const formData = $(this).serialize();
      
      $.ajax({
          url: $(this).attr('action'),
          method: 'POST',
          data: formData,
          success: function(res) {
              if (res.success) {
                  // 成功后的跳转或提示
                  window.location.href = '/YourController/Index';
              }
          },
          error: function(xhr) {
              const errorMsg = xhr.responseJSON?.message || '发生未知错误，请稍后重试';
              // 动态创建Alert元素
              const alertHtml = `<div class="alert alert-danger alert-dismissible fade show" role="alert">${errorMsg}<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>`;
              $('#alertContainer').html(alertHtml);
              // 初始化Bootstrap Alert组件
              new bootstrap.Alert(document.querySelector('.alert'));
          }
      });
  });
  

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