在 MVC 中突出显示或更改当前菜单项 CSS 类的最佳方法答案

【问题标题】：The Best Way to Highlight or Change Current Menu Item CSS Class in MVC在 MVC 中突出显示或更改当前菜单项 CSS 类的最佳方法
【发布时间】：2012-09-05 19:03:03
【问题描述】：

我在寻找解决方案时阅读了几篇文章。他们似乎都支持硬编码或 HTML Helper 替代方案。但是，我想要一些简单且由数据库驱动的东西。这是我的最佳解决方案（由我作为答案提交）。

以下是一些其他文章的解决方案：

【问题讨论】：

标签： asp.net-mvc vb.net asp.net-mvc-3 razor

【解决方案1】：

只需像这样从您的一个控制器向下传递一个 TempData：

TempData("CurrentPage") = "Nutrition"

然后，在您的视图中添加这样的条件：

<ul>

@For Each item In Model
    Dim currentItem = item

    If (Not String.IsNullOrEmpty(TempData("CurrentPage")) And TempData("CurrentPage") = currentItem.NAV_Element) Then
        @<li><a class="current" href="@Html.DisplayFor(Function(modelItem) currentItem.NAV_Destination)">@Html.DisplayFor(Function(modelItem) currentItem.NAV_Element)</a></li>

    Else
        @<li><a href="@Html.DisplayFor(Function(modelItem) currentItem.NAV_Destination)">@Html.DisplayFor(Function(modelItem) currentItem.NAV_Element)</a></li>
    End If


Next

</ul>

【讨论】：

【解决方案2】：

我过去通过使用路由值生成一个href然后将父选项卡设置为活动状态来实现这一点。

这是一个引导风格的版本：

 <ul class="nav nav-tabs">
     <li><a href="/somepage">Some page</a></li>
     <li><a href="/someotherpage">Some other Page</a></li>
 </ul>

 <script type="text/javascript">
     $(function(){
          $('a[href="@Url.Action(ViewContext.RouteData.Values)"]').parents("li").addClass("active");
     };

 </script>

硅

【讨论】：

谢谢，这是个好主意。我仍然更喜欢我的解决方案，因为它不像这个看起来那样依赖于 javascript。
-1 每个Action() 重载都将字符串作为第一个参数。

【解决方案3】：

我知道我回答这个问题为时已晚，但如果您正在使用 ASP MVC 并使用控制器和操作寻找突出显示菜单项，这里的解决方案对我来说非常好 -

<li> <a href='@Url.Action("<action name>", "<controller name>")' class="@(ViewContext.RouteData.Values["Controller"].ToString() + ViewContext.RouteData.Values["Action"].ToString() == "ControllerAction" ? "active" : "" )"> <i class="fa fa-user-plus"></i> <span>Signup</span> </a> </li>

【讨论】：