CODEWITHSUNDEEP
asp.net-mvcvb.netasp.net-mvc-3razor
user1477388
user1477388

Reputation: 21430

The Best Way to Highlight or Change Current Menu Item CSS Class in MVC

I have read a few articles as I was searching for a solution. They all seemed to favor a hard-coded or HTML Helper alternative; however, I wanted something simple and database driven. This is my best solution (submitted as an answer, by me).

Here are some other articles' solutions:

Upvotes: 0

Views: 4273

Answers (3)

Abhi
Abhi

Reputation: 60

I know I am too late to answer this but if you are using ASP MVC and looking for highlighting Menu items using controller and action, here is the solution which is working perfectly fine for me - 

<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>

Upvotes: 0

Slicksim
Slicksim

Reputation: 7172

I have accomplished this in the past by using the route values to generate a href and then setting the parent tab to active based on that.

This is a bootstrap flavoured version:

 <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>

Si

Upvotes: 1

user1477388
user1477388

Reputation: 21430

Just pass a TempData down from one of your controllers like this:

TempData("CurrentPage") = "Nutrition"

Then, in your View add a conditional like this:

<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>

Upvotes: 1

Related Questions