AdminLTE 3.0 在Blazor(.NET 5)中侧边栏与页脚功能异常问题

我看你从Razor Pages/MVC转Blazor Server（.NET 5）集成AdminLTE时，侧边栏和页脚没法正常工作，咱们一步步来搞定这些问题：

1. 先修复脚本加载顺序问题 #

AdminLTE依赖jQuery、Popper和Bootstrap，你的脚本顺序有点问题，Popper必须在Bootstrap之前加载，而且Blazor的脚本最好放在最后（避免干扰DOM渲染）。修改_Host.cshtml里的脚本部分：

<script src="js/jquery/jquery-3.6.0.js"></script>
<script src="js/popper/popper.min.js"></script>
<script src="js/bootstrap/bootstrap.js"></script>
<script src="lib/fontawesome/js/all.js"></script>
<script src="js/adminlte/adminlte.js"></script>
<!-- 把Blazor脚本移到最后 -->
<script src="_framework/blazor.server.js"></script>

2. 修正侧边栏的HTML结构错误 #

你把导航菜单嵌套在user-panel里面了，这不符合AdminLTE的结构规范，导致JS组件无法正确识别。调整MainLayout.razor里的侧边栏部分：

<aside class="main-sidebar sidebar-dark-danger elevation-4" style="margin-top:0px;">
    <a href="MyIP" class="brand-link">
        <img src="images/myCompany.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
        <span class="brand-text font-weight-light">SOME COMPANY</span>
    </a>
    <div class="sidebar">
        <div class="user-panel mt-3 pb-3 mb-3 d-flex">
            <div class="image">
                <img src="images/default-profile.png" class="img-circle elevation-2" alt="User Image">
            </div>
            <div class="info">
                <a href="#" class="d-block">Static User</a>
            </div>
        </div>
        <!-- 把导航菜单移到user-panel外面 -->
        <nav class="mt-2">
            <ul class="nav nav-pills nav-sidebar flex-column nav-legacy nav-flat" data-widget="treeview" role="menu" data-accordion="false">
                <!-- 这里添加你的菜单项，比如示例： -->
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <i class="nav-icon fas fa-tachometer-alt"></i>
                        <p>Dashboard</p>
                    </a>
                </li>
                <li class="nav-item menu-open">
                    <a href="#" class="nav-link active">
                        <i class="nav-icon fas fa-copy"></i>
                        <p>
                            Layout Options
                            <i class="fas fa-angle-left right"></i>
                        </p>
                    </a>
                    <ul class="nav nav-treeview">
                        <li class="nav-item">
                            <a href="#" class="nav-link active">
                                <i class="far fa-circle nav-icon"></i>
                                <p>Top Navigation</p>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</aside>

3. 解决Blazor渲染后的AdminLTE初始化问题 #

Blazor是单页应用，DOM是动态渲染的，AdminLTE的JS组件（比如侧边栏折叠、树形菜单）需要在Blazor完成渲染后重新初始化。

步骤3.1：创建初始化脚本

在wwwroot/js下新建blazor-adminlte.js，内容如下：

window.initAdminLTE = function() {
    // 初始化侧边栏折叠按钮
    $('.main-header .nav-link[data-widget="pushmenu"]').PushMenu();
    // 初始化树形菜单
    $('.nav-sidebar').Treeview({
        accordion: false
    });
    // 如果有其他AdminLTE组件，在这里添加初始化代码
};

步骤3.2：引入脚本到_Host.cshtml

在_Host.cshtml的脚本部分最后添加：

<script src="js/blazor-adminlte.js"></script>

步骤3.3：在MainLayout中调用初始化

修改MainLayout.razor，添加JS互操作代码：

@inherits LayoutComponentBase
@inject IJSRuntime JSRuntime

<!-- 你的现有HTML代码 -->

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 第一次渲染完成后初始化AdminLTE组件
            await JSRuntime.InvokeVoidAsync("initAdminLTE");
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

4. 修复页脚位置问题 #

如果页脚显示异常，是因为content-wrapper的固定min-height导致布局错乱，改用flex布局让页脚自动定位到底部：
修改MainLayout.razor里的wrapper和content-wrapper：

<div class="wrapper" style="width:100%; display: flex; flex-direction: column; min-height: 100vh;">
    <!-- 其他部分：navbar、sidebar -->
    <div class="content-wrapper" style="flex-grow: 1;">
        <!-- content-header和@Body -->
    </div>
    <!-- footer部分 -->
    <footer class="main-footer">
        <div class="float-right d-none d-sm-inline">
            <img src="images/footer-img.png" width="130" />
        </div>
        <strong>Copyright © @DateTime.Now.Year <a href="MyIP">Some Company</a>.</strong> All rights reserved.
    </footer>
</div>

做完这些调整后，侧边栏的折叠功能、树形菜单应该能正常工作，页脚也会正确显示在页面底部了。

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