教你用最简单的方法在 MVC 中让菜单高亮起来

不知道有多少同学对菜单选中时的高亮选择的用 js 来控制？
我来分享用 Razor 语法就能搞定的一种方法。

以Bootstrap的样式为例

<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">菜单1</a></li><!--这个菜单会高亮-->
    <li><a href="#">菜单2</a></li>
    <li><a href="#">菜单3</a></li>
    <li><a href="#">菜单4</a></li>
    ...
</ul>

这是一个竖着的菜单样式，当 li 有 active 样式的时候会呈现选中高亮的状态
我就不贴效果图了，你可以去 https://v3.bootcss.com/components/#nav-pills 自己看。

上一个 Razor 代码

@{
    //得到当前访问的 controller 名称
    var controller = ViewContext.RouteData.Values["controller"].ToString();
}
<ul class="nav nav-pills nav-stacked">
    <li @if(controller == "User"){ <text>class="active"</text> }><a href="#">用户管理</a></li>
    <li @if(controller == "Role"){ <text>class="active"</text> }><a href="#">角色管理</a></li>
    ...
</ul>

这只是一个简单的判断，当判断为 true 时，就输出 active 的样式。
<text></text>这个是 Razor 里的特殊语法，你会发现它会变成背景色金黄的颜色，表示嵌入的纯文本字符串。

如果你有其他的class，仅仅是想加一个active 的话可以这样写：

<li class="text-muted text-danger @if(controller == "Role"){ <text>active</text> }"><a href="#">角色管理</a></li>

如果你是一个下拉菜单，可以配合 action 的名字：

@{
    var controller = ViewContext.RouteData.Values["controller"].ToString();
    var action = ViewContext.RouteData.Values["action"].ToString();
}

之后的判断还是一样：

<ul class="nav nav-pills nav-stacked">
    <li @if(controller == "User"){ <text>class="active"</text> }><a href="#">用户管理</a></li>
    <li @if(controller == "Role" && action == "AddRole"){ <text>class="active"</text> }><a href="#">新增角色</a></li>
    ...
</ul>

这是服务器端的代码，需要刷新页面的，用 Ajax 的还是继续写你的 js 吧