You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在ASP.NET的_Layout.cshtml中获取当前路由并设置导航样式?

解决_Layout.cshtml中根据路由设置导航选中类的问题

首先得说你原来的代码问题出在哪:你混用了ASP.NET Web Forms的<%= %>语法和Razor语法,而且在ASP.NET Core里,Url.RequestContext这种写法早就被淘汰了,这就是代码不生效的核心原因。

下面给你几个在没有页面模型的情况下,能正常工作的实用方案:

方案一:通过ViewContext获取当前路由页面

直接在Razor里用ViewContext.RouteData拿到当前页面的路由值,然后做判断:

<li>
    <a asp-page="/Notifications" class="@(ViewContext.RouteData.Values["page"]?.ToString() == "/Notifications" ? "selected-club" : "")">
        <i class="fas fa-home"></i> Notifications
    </a>
</li>

这里要注意,路由里的page值是带斜杠的完整路径(比如/Notifications),所以判断的时候要对应上。另外加了?.ToString()是防止page值为空时出现空引用异常。

方案二:利用PageContext(仅适用于Razor Pages项目)

如果你的项目是Razor Pages,可以直接用PageContext获取页面的路径信息,这个判断更精准:

<li>
    <a asp-page="/Notifications" class="@(PageContext.ActionDescriptor.RelativePath.Equals("/Notifications.cshtml", StringComparison.OrdinalIgnoreCase) ? "selected-club" : "")">
        <i class="fas fa-home"></i> Notifications
    </a>
</li>

这里的RelativePath是页面的实际文件路径,包含.cshtml后缀,所以判断的时候要写完整。用OrdinalIgnoreCase是为了忽略大小写,避免因为路径大小写不一致导致判断失败。

方案三:封装成辅助方法(更适合多导航项的场景)

如果导航栏有多个选项,重复写判断逻辑太麻烦,可以在_Layout.cshtml里定义一个局部辅助方法:

@functions {
    public string GetNavActiveClass(string targetPage)
    {
        var currentPage = ViewContext.RouteData.Values["page"]?.ToString();
        return string.Equals(currentPage, targetPage, StringComparison.OrdinalIgnoreCase) ? "selected-club" : "";
    }
}

然后每个导航项直接调用这个方法就行,代码更简洁易维护:

<li>
    <a asp-page="/Notifications" class="@GetNavActiveClass("/Notifications")">
        <i class="fas fa-home"></i> Notifications
    </a>
</li>
<li>
    <a asp-page="/Home" class="@GetNavActiveClass("/Home")">
        <i class="fas fa-bell"></i> Home
    </a>
</li>

这样不管是哪个导航项,都能轻松判断是否要添加选中类啦。

内容的提问来源于stack exchange,提问作者Martin Erlic

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.27 09:48:10