如何在Blazor客户端项目中用Blazor Bootstrap创建带Sidebar2的布局？

一、先解决RenderFragment序列化错误 #

布局组件不能直接添加@rendermode InteractiveWebAssembly，因为Body参数是RenderFragment类型（本质是委托），无法被序列化传递。解决方式如下：

方案1：全局设置交互式渲染模式（纯WASM项目推荐）

在App.razor中，确保路由组件使用全局交互式模式，无需在布局上单独设置：

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(NewLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(NewLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

同时在Program.cs中配置WASM交互式服务：

builder.Services.AddRazorComponents()
    .AddInteractiveWebAssemblyComponents();

await builder.Build().RunAsync();

并确保index.html中引入必要脚本：

<script src="_framework/blazor.webassembly.js"></script>
<script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>

方案2：仅为布局内的子组件设置渲染模式

如果仅需要布局中的部分组件（如导航菜单）启用交互式，在子组件上单独添加@rendermode：

<Sidebar2>
    <SidebarBody>
        <NavMenu @rendermode="InteractiveWebAssembly" />
    </SidebarBody>
</Sidebar2>

二、解决加载动画持续显示问题 #

加载动画无法消失通常是布局结构错误、组件初始化异常或资源加载问题导致，按以下步骤排查：

1. 确保布局正确渲染@Body

检查NewLayout.razor中是否存在@Body标记，这是渲染页面内容的核心，缺失会导致布局一直处于加载状态。示例正确结构：

@inherits LayoutComponentBase
@using BlazorBootstrap.Components

<div class="d-flex h-100">
    <Sidebar2 IsOpen="true" @ref="sidebarRef">
        <SidebarHeader>
            <h6>My App Dashboard</h6>
        </SidebarHeader>
        <SidebarBody>
            <Nav class="flex-column">
                <NavItem>
                    <NavLink href="/" Match="NavLinkMatch.All">Home</NavLink>
                </NavItem>
                <NavItem>
                    <NavLink href="/counter">Counter</NavLink>
                </NavItem>
            </Nav>
        </SidebarBody>
    </Sidebar2>

    <!-- 主内容区，必须包含@Body -->
    <main class="flex-grow-1">
        <Topbar>
            <Button @onclick="ToggleSidebar" Color="ButtonColor.Light">
                <Icon Name="IconName.Bars" />
            </Button>
        </Topbar>
        <div class="p-4">
            @Body
        </div>
    </main>
</div>

@code {
    private Sidebar2? sidebarRef;

    private void ToggleSidebar() => sidebarRef?.Toggle();
}

2. 排查异步初始化逻辑

如果布局中使用了OnInitializedAsync，确保异步任务能正常完成，避免因任务卡住导致加载状态持续：

@code {
    protected override async Task OnInitializedAsync()
    {
        // 确保异步调用有明确的结束逻辑，比如避免无限等待
        await SomeAsyncInitialization();
    }
}

3. 验证Blazor Bootstrap版本兼容性

确保使用的Blazor Bootstrap版本与你的.NET版本（如.NET 7/8）匹配，版本不兼容可能导致组件初始化失败。

4. 清除缓存并重建项目

浏览器缓存或构建缓存可能导致资源加载异常，执行以下操作：

• 清除浏览器缓存（Ctrl+Shift+R强制刷新）
• 清理项目bin/obj目录，重新构建解决方案

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