Blazor WebApp中Bootstrap菜单下拉功能失效问题求助

问题场景 #

在按以下配置创建的Blazor WebApp项目中，直接复制Bootstrap5官网的导航栏代码后，折叠按钮、下拉菜单等交互功能完全失效：

• 交互式渲染模式：Server
• 交互位置：全局
• 目标页面使用@rendermode InteractiveServer

官网复制的代码如下：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

原因分析 #

Bootstrap的交互组件依赖自身JS和Popper.js完成初始化，但Blazor Server的DOM渲染机制特殊：组件首次渲染或更新后，新生成的DOM元素不会被Bootstrap JS自动识别并初始化，最终导致交互功能失效。

解决方案 #

方案一：手动用JS Interop初始化组件 #

1. 创建初始化JS文件
   在wwwroot/js目录下新建bootstrap-init.js，写入以下代码：

window.initBootstrap = () => {
    // 初始化所有折叠组件
    document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(el => {
        new bootstrap.Collapse(el);
    });
    // 初始化所有下拉菜单
    document.querySelectorAll('[data-bs-toggle="dropdown"]').forEach(el => {
        new bootstrap.Dropdown(el);
    });
};

2. 在Blazor组件中调用初始化函数
   在使用导航栏的组件里，注入IJSRuntime并在生命周期方法中触发初始化：

@inject IJSRuntime JSRuntime

<!-- 这里放置你的导航栏HTML代码 -->

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // 首次渲染后初始化，后续DOM更新也可按需调用
        await JSRuntime.InvokeVoidAsync("initBootstrap");
        await base.OnAfterRenderAsync(firstRender);
    }
}

方案二：使用Blazor专用Bootstrap组件库（更省心） #

直接采用适配Blazor的Blazor.Bootstrap组件库，无需手动处理JS初始化逻辑：

1. 安装NuGet包
   在包管理器控制台执行：

Install-Package Blazor.Bootstrap

2. 配置服务
   在Program.cs中添加服务注册：

builder.Services.AddBlazorBootstrap();

3. 添加命名空间
   在_Imports.razor中添加组件库命名空间：

@using BlazorBootstrap

4. 使用组件库的导航栏
   替换原生HTML为组件库提供的标签：

<Navbar @bind-Expanded="isNavbarExpanded" Class="navbar-expand-lg navbar-light bg-light">
    <NavbarBrand href="#">Navbar</NavbarBrand>
    <NavbarToggler @onclick="() => isNavbarExpanded = !isNavbarExpanded" />
    <NavbarCollapse IsExpanded="isNavbarExpanded">
        <Nav Class="me-auto mb-2 mb-lg-0">
            <NavItem>
                <NavLink Href="#" Active>Home</NavLink>
            </NavItem>
            <NavItem>
                <NavLink Href="#">Link</NavLink>
            </NavItem>
            <NavDropdown Title="Dropdown">
                <NavDropdownItem Href="#">Action</NavDropdownItem>
                <NavDropdownItem Href="#">Another action</NavDropdownItem>
                <NavDropdownDivider />
                <NavDropdownItem Href="#">Something else here</NavDropdownItem>
            </NavDropdown>
            <NavItem>
                <NavLink Href="#" Disabled>Disabled</NavLink>
            </NavItem>
        </Nav>
        <Form Class="d-flex">
            <InputText Class="form-control me-2" Placeholder="Search" aria-label="Search" />
            <Button Color="ButtonColor.Success" Outline="true" Type="Button">Search</Button>
        </Form>
    </NavbarCollapse>
</Navbar>

@code {
    private bool isNavbarExpanded = false;
}

额外注意事项 #

• Blazor项目中尽量使用NavLink组件替代原生<a>标签，避免不必要的页面刷新
• 如果采用原生HTML方案，每次组件DOM更新后都需要重新调用初始化函数，比如参数变化时

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