MVC布局中如何避免_Navigation局部视图重复刷新并保留导航激活状态

老哥，我太懂你这个困扰了！每次点导航页面一刷新，之前选好的激活状态就没了，滑出导航的体验瞬间打折。结合你的MVC布局代码和已经尝试的AJAX方案，给你几个实用的解决思路，按需挑就行：

不用折腾太多前端逻辑，直接在导航局部视图里通过后端路由信息标记激活状态，页面刷新也不会丢。

• 打开你的_Navigation.cshtml，给每个导航项加个判断逻辑，对比当前请求的Controller和Action：

<li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Index" ? "active" : "")">
    <a href="@Url.Action("Index", "Home")">首页</a>
</li>
<li class="@(ViewContext.RouteData.Values["Action"].ToString() == "About" ? "active" : "")">
    <a href="@Url.Action("About", "Home")">关于我们</a>
</li>

• 如果你的项目用到了Area，再加个ViewContext.RouteData.Values["Area"]的判断就行，后端会自动给当前页面对应的导航加上激活类，完美适配刷新场景。

你已经尝试了load方法，只需要补全导航状态同步和地址栏更新的逻辑，就能实现无刷新且激活状态不丢失：

1. 先给所有导航链接加上stop_refresh类，然后修改JS代码：

$(document).ready(function () {
    // 页面初始化时先标记当前URL对应的导航
    markActiveNav(window.location.href);

    $("a.stop_refresh").click(function (e) {
        e.preventDefault();
        var targetUrl = $(this).attr("href");
        
        // 更新浏览器地址栏，避免刷新后URL不对
        history.pushState(null, null, targetUrl);
        
        // 只加载页面主体内容（避免重复加载布局）
        $('#page-wrapper').load(targetUrl + ' #page-wrapper > *', function() {
            // 加载完成后更新导航激活状态
            markActiveNav(targetUrl);
        });
    });

    // 处理浏览器前进后退按钮
    $(window).on('popstate', function() {
        $('#page-wrapper').load(window.location.href + ' #page-wrapper > *', function() {
            markActiveNav(window.location.href);
        });
    });

    // 封装导航激活标记函数
    function markActiveNav(url) {
        // 移除所有导航项的激活类
        $("a.stop_refresh").parent().removeClass("active");
        // 给当前URL对应的导航项加激活类
        $("a.stop_refresh[href='" + url + "']").parent().addClass("active");
    }
});

2. 注意：对应的后端Action要返回PartialView，不要返回完整的带布局视图，不然load会把整个布局重复加载进来。

如果不想自己写太多JS逻辑，可以用MVC原生的Ajax助手：

• 先通过NuGet安装Microsoft.jQuery.Unobtrusive.Ajax，并在布局里引入jquery.unobtrusive-ajax.js
• 把导航链接改成Ajax.ActionLink，指定更新目标和成功回调：

@Ajax.ActionLink("首页", "Index", "Home", new AjaxOptions {
    UpdateTargetId = "page-wrapper",
    InsertionMode = InsertionMode.Replace,
    OnSuccess = "markActiveNav"
})

• 再写个和方案2里一样的markActiveNav函数，用来标记激活的导航项就行。

如果你的导航是多层级的（比如带下拉菜单），还要在markActiveNav函数里处理父级菜单的展开状态，比如找到当前激活项的父级li，加上open或者expanded类，确保滑出导航的层级状态也能同步保留。

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