Blazor中Bootstrap模态框点击提交后Backdrop未关闭问题

问题原因 #

提交表单时，Blazor组件会触发重新渲染，导致Bootstrap模态框的JS管理状态与DOM脱节——关闭按钮通过data-dismiss="modal"能触发Bootstrap原生JS的完整关闭流程（移除遮罩、修改模态框样式），但提交按钮仅触发Blazor的OnValidSubmit事件，未同步调用模态框关闭的JS逻辑，因此遮罩层残留。

解决方案 #

方案1：手动调用Bootstrap JS关闭模态框 #

通过IJSRuntime调用Bootstrap的模态框关闭方法，确保提交后完整清理模态框状态：

1. 注入IJSRuntime：

@inject IJSRuntime JSRuntime

2. 修改HandleCreate方法，添加关闭逻辑：

private async Task HandleCreate()
{
    // 执行你的数据保存逻辑
    // ...

    // 调用Bootstrap JS关闭模态框
    var modalInstance = await JSRuntime.InvokeAsync<IJSObjectReference>(
        "bootstrap.Modal.getOrCreateInstance", "#AddCategoryType");
    await modalInstance.InvokeVoidAsync("hide");
    await modalInstance.DisposeAsync();
}

方案2：用Blazor绑定状态控制模态框（推荐） #

完全通过Blazor的变量控制模态框显示/隐藏，避免与Bootstrap JS的状态冲突：

@* 打开模态框的触发按钮示例 *@
<button class="btn btn-primary" @onclick="() => isModalOpen = true">添加分类类型</button>

<EditForm Model="newCategoryType" OnValidSubmit="HandleCreate">
  <DataAnnotationsValidator />
  <ValidationSummary />
  <!-- 通过Blazor变量控制模态框的显示状态 -->
  <div class="modal @(isModalOpen ? "show d-block" : "fade")" 
       tabindex="-1" 
       aria-hidden="@(!isModalOpen)" 
       style="@(isModalOpen ? "display: block;" : "")">
    <!-- 手动控制遮罩层显示 -->
    <div class="modal-backdrop @(isModalOpen ? "show" : "")"></div>
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Add category Type</h5>
          <button type="button" class="close" @onclick="() => isModalOpen = false" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-sm-12">
              <div class="card">
                <div class="card-body">
                  <div class="form-group">
                    <label for="CategoryTypeName">Category Type Name:</label>
                    <InputText id="CategoryTypeName" class="form-control" @bind-Value="newCategoryType.CategoryTypeName" />
                  </div>
                  <div class="form-group">
                    <label for="CategoryTypeName">Category Type Description:</label>
                    <InputText id="CategoryTypeDescription" class="form-control" @bind-Value="newCategoryType.CategoryTypeDescription" />
                  </div>
                  <div class="form-group">
                    <label for="CategoryType">Category Type Details:</label>
                    <InputText id="CategoryTypeDetails" class="form-control" @bind-Value="newCategoryType.CategoryTypeDetails" />
                  </div>
                  <div class="form-group">
                    <label for="IsActive">IsActive:</label>
                    <InputCheckbox id="IsActive" class="form-control" @bind-Value="newCategoryType.IsActive" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" @onclick="() => isModalOpen = false">Close</button>
          <button id="submit" type="submit" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</EditForm>

@code {
    private bool isModalOpen;
    private CategoryType newCategoryType = new(); // 替换为你的实际模型类

    private async Task HandleCreate()
    {
        // 执行数据保存逻辑
        // ...

        // 关闭模态框
        isModalOpen = false;
    }
}

关键说明 #

• 方案1适合保留Bootstrap原生模态框行为的场景，需确保页面已正确引入Bootstrap JS。
• 方案2完全由Blazor控制DOM状态，避免JS与Blazor渲染的冲突，更符合Blazor组件化开发思路。

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