ASP.NET MVC结合AdminLte模板设置左侧菜单栏动态高亮显示

最新推荐文章于 2024-06-14 09:41:33 发布

原创最新推荐文章于 2024-06-14 09:41:33 发布 · 3.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#MVC #AdminLte #Sidebar

ASP .NET MVC 同时被 2 个专栏收录

16 篇文章

订阅专栏

AdminLte

2 篇文章

订阅专栏

本文介绍如何在AdminLte模板的左侧菜单栏中，根据当前控制器和方法动态添加高亮效果。通过在分部页中获取并判断当前访问的controller和action名称，实现菜单项的动态激活。

前言

AdminLte模板将左侧菜单栏高亮显示的效果写死了，如图所示：

在ASP.NET MVC框架中，我将左侧菜单栏作为分部页分离出来。这就意味着，它是个公共文件，不能直接添加active.。

解决方案

我的想法是：在分部页中获取当前控制器和方法，然后判断是否要添加active。

我在左侧菜单栏分部页的开头添加了以下代码：

@{
    //得到当前访问的controller和action名称
    var controller = ViewContext.RouteData.Values["controller"].ToString();
    var action = ViewContext.RouteData.Values["action"].ToString();
}

然后作判断：

代码如下：

<ul class="sidebar-menu" data-widget="tree">
            <li class="header">MAIN NAVIGATION</li>
            <li @if(controller =="Home" && action=="Index" ){ <text>class="active"</text> }>
                <a href="~/Home/Index">
                    <i class="fa fa-dashboard"></i> <span>Dashboard</span>
                    <span class="pull-right-container">
                        <small class="label pull-right bg-green">Main</small>
                    </span>
                </a>
            </li>
            <li @if (controller == "Student" && action == "Index") { <text> class="active" </text> }>
                <a href="~/Student/Index">
                    <i class="fa fa-th"></i> <span>Student</span>
                    <span class="pull-right-container">
                        <small class="label pull-right bg-green">new</small>
                    </span>
                </a>
            </li>