ASP.NET中如何基于子页面实现激活状态导航栏？

我来帮你解决这个导航栏激活状态的问题，先说说你现有代码的问题：你的JavaScript代码是给li标签添加active类，但实际你的active类是定义在<a>标签上的；另外，因为ASP.NET Razor Pages是服务器端渲染，页面跳转后客户端JS的状态会被重置，所以单纯的客户端点击事件无法在页面刷新后保持激活状态。下面给你两种靠谱的解决方案：

方案一：服务器端判断（推荐） #

利用Razor的页面上下文，判断当前页面的路径，给对应的导航项自动加上active类，这种方法在页面刷新、直接访问链接时都能保持正确的激活状态，是最可靠的方式。

修改你的布局页导航代码如下：

<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow w3-red">
        <div class="container" id="topheader">
            <img src="~/Images/menubar-logo-white.png" width="136" height="46" />
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse" id="myDIV">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="target nav-link text-white @(ViewContext.RouteData.Values["Page"].ToString() == "/Index" ? "active" : "")" asp-area="" asp-page="/Index">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="target nav-link text-white @(ViewContext.RouteData.Values["Page"].ToString() == "/About" ? "active" : "")" asp-area="" asp-page="/About">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="target nav-link text-white @(ViewContext.RouteData.Values["Page"].ToString() == "/Services" ? "active" : "")" asp-area="" asp-page="/Services">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="target nav-link text-white @(ViewContext.RouteData.Values["Page"].ToString() == "/Contact" ? "active" : "")" asp-area="" asp-page="/Contact">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

原理很简单：通过ViewContext.RouteData.Values["Page"]获取当前页面的路径，和导航项的页面路径对比，如果匹配就自动添加active类。

方案二：改进客户端JavaScript（适合无刷新场景） #

如果你的页面是通过AJAX实现无刷新跳转的，可以修改JS代码，让它正确给<a>标签添加active类，同时处理页面加载时的初始状态：

// 页面加载完成后，先根据当前URL设置初始激活状态
$(document).ready(function() {
    var currentPath = window.location.pathname;
    // 遍历所有导航链接，匹配当前路径
    $('.navbar-nav .nav-link').each(function() {
        var linkPath = $(this).attr('href');
        if(currentPath.includes(linkPath)) {
            $(this).addClass('active').parent().siblings().find('.nav-link').removeClass('active');
        }
    });

    // 点击导航项时切换激活状态
    $(document).on('click', '.navbar-nav .nav-item .nav-link', function() {
        $('.navbar-nav .nav-link').removeClass('active');
        $(this).addClass('active');
    });
});

注意：这种方法在页面刷新后，激活状态依赖URL匹配逻辑，如果URL带参数可能需要调整匹配规则，整体不如服务器端方法稳定。另外要确保你已经在布局页正确引入了jQuery，比如在页面底部添加：

<script src="~/lib/jquery/dist/jquery.min.js"></script>

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