Blazor WebAssembly应用中AdminLTE侧边栏导航栏无法切换的问题

1. 确认依赖脚本加载顺序正确 #

AdminLTE的侧边栏交互依赖jQuery、Popper.js、Bootstrap JS及自身脚本，必须按以下顺序加载：

• jQuery
• Popper.js
• Bootstrap JavaScript
• AdminLTE的main.js

在Blazor项目的index.html（WebAssembly）或_Host.cshtml（Server）中，将这些脚本放在</body>标签前，确保在Blazor初始化前完成加载。

2. 手动触发AdminLTE组件初始化 #

Blazor渲染DOM后，原有的AdminLTE事件绑定可能失效，需通过JS互操作重新初始化：

1. 在wwwroot下创建adminlte-interop.js文件，添加以下代码：

window.initAdminLTE = function() {
    // 初始化侧边栏菜单折叠功能
    $(".sidebar-menu").tree();
    // 初始化侧边栏推拉功能
    $('[data-widget="pushmenu"]').PushMenu();
};

2. 在Blazor布局组件（如MainLayout.razor）中注入IJSRuntime，并在渲染完成后调用初始化方法：

@inject IJSRuntime JS

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("initAdminLTE");
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

3. 保留AdminLTE核心DOM属性 #

确保侧边栏的HTML结构与AdminLTE starter页面一致，不要丢失关键属性：

• 侧边栏菜单需保留class="sidebar-menu tree"
• 侧边栏折叠按钮需保留data-widget="pushmenu"

4. 避免DOM操作冲突 #

如果用Blazor动态渲染侧边菜单项，需等待所有DOM元素渲染完成后再执行AdminLTE初始化逻辑，不要让Blazor和jQuery同时操作同一批DOM元素。

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