ASP.NET Core中点击菜单子项后保持折叠菜单展开的方法

不需要在Razor方法中嵌入JavaScript，直接通过服务器端Razor语法判断当前页面路径，即可让对应菜单分组保持展开状态，具体实现如下：

1. 获取当前页面路径 #

在_Layout.cshtml的顶部添加代码，获取当前请求的路径：

@{
    var currentPath = HttpContext.Request.Path;
}

2. 修改菜单HTML结构 #

针对每个折叠分组，通过判断当前页面是否属于该分组下的子项，给折叠容器和触发按钮设置对应的状态类（Bootstrap折叠组件通过show、collapsed类控制展开/折叠状态）。

示例菜单结构（适配Bootstrap 5）：

<div class="accordion" id="mainMenuAccordion">
    <!-- 系统管理分组 -->
    <div class="accordion-item">
        <h2 class="accordion-header" id="systemMenuHeader">
            <button class="accordion-button @(currentPath.StartsWith("/System") ? "" : "collapsed")"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#systemMenuCollapse"
                    aria-expanded="@(currentPath.StartsWith("/System") ? "true" : "false")"
                    aria-controls="systemMenuCollapse">
                系统管理
            </button>
        </h2>
        <div id="systemMenuCollapse"
             class="accordion-collapse collapse @(currentPath.StartsWith("/System") ? "show" : "")"
             aria-labelledby="systemMenuHeader"
             data-bs-parent="#mainMenuAccordion">
            <div class="accordion-body">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link @(currentPath == "/System/Users" ? "active" : "")" asp-page="/System/Users">用户管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link @(currentPath == "/System/Roles" ? "active" : "")" asp-page="/System/Roles">角色管理</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 内容管理分组 -->
    <div class="accordion-item">
        <h2 class="accordion-header" id="contentMenuHeader">
            <button class="accordion-button @(currentPath.StartsWith("/Content") ? "" : "collapsed")"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#contentMenuCollapse"
                    aria-expanded="@(currentPath.StartsWith("/Content") ? "true" : "false")"
                    aria-controls="contentMenuCollapse">
                内容管理
            </button>
        </h2>
        <div id="contentMenuCollapse"
             class="accordion-collapse collapse @(currentPath.StartsWith("/Content") ? "show" : "")"
             aria-labelledby="contentMenuHeader"
             data-bs-parent="#mainMenuAccordion">
            <div class="accordion-body">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link @(currentPath == "/Content/Articles" ? "active" : "")" asp-page="/Content/Articles">文章管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link @(currentPath == "/Content/Categories" ? "active" : "")" asp-page="/Content/Categories">分类管理</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

3. 核心逻辑说明 #

• 通过currentPath.StartsWith("/分组路径前缀")判断当前页面是否属于目标分组，若匹配则给折叠容器添加show类，确保页面加载时分组处于展开状态。
• 同时给分组触发按钮移除collapsed类，并将aria-expanded属性设为true，保持Bootstrap组件的状态一致性。
• 这种方式完全基于服务器端渲染，无需任何前端脚本，页面跳转后会自动重新判断并保持对应分组展开。

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