Active Navigation Tab MVC 5 Razor

Question

I am trying to highlight the Active navigation tab in my project. I was instructed to update the old website without proceeding with the download (this is my experience). I found an example that had most of what I needed. Currently, the only tab that has a "selected class" is the "Home" tab. When I click on another tab, the Home tab is no longer highlighted, and the current tab is not. When I check the item, the Home tab still has the attribute "selected class". Not sure what to do.

_layout

<ul id="navigation"> <li class="@Html.ActivePage("Home", "Index")">@Html.ActionLink("Home", "Index", "Home")</li> <li class="@Html.ActivePage("About", "About")">@Html.ActionLink("About", "About", "Home")</li> <li class="@Html.ActivePage("Products", "Products")">@Html.ActionLink("Products", "Products", "Home")</li> <li class="@Html.ActivePage("Services", "Services")">@Html.ActionLink("Services", "Services", "Home")</li> <li class="@Html.ActivePage("Contact", "Contact")">@Html.ActionLink("Contact", "Contact", "Home")</li> </ul> 

HtmlHelper Class

 public static class HtmlHelperExtensions { public static string ActivePage(this HtmlHelper helper, string controller, string action) { string classValue = ""; string currentController = helper.ViewContext.Controller.ValueProvider.GetValue("controller").RawValue.ToString(); string currentAction = helper.ViewContext.Controller.ValueProvider.GetValue("action").RawValue.ToString(); if (currentController == controller && currentAction == action) { classValue = "selected"; } return classValue; } } 

CSS

 ul#navigation li { list-style: none; float: left; position: relative; background: url(../images/mi-standby.gif) no-repeat left top; padding-left: 3px; margin-left: 6px; } ul#navigation a { float: left; display: block; background: url(../images/mi-standby.gif) no-repeat right top; padding: 10px 29px 6px 26px; text-decoration: none; font-weight: bold; font-size: .8em; color: #a6a6a6; } ul#navigation li.selected a { background: url(../images/mi-active.gif) no-repeat right top; color: #FFF; } ul#navigation li.selected { background: url(../images/mi-active.gif) no-repeat left top; color: #FFF; } ul#navigation li a:active { background-color: #ff0000; text-decoration: none; color: #ffffff; } 

Answer 1

Your helper method tries to check if the current controller and action match the values ​​you specified, but you pass the action name as both arguments. From your code snippet, it looks like all of your actions are on your HomeController, so try replacing your view with the following:

  <ul id="navigation"> <li class="@Html.ActivePage("Home", "Index")">@Html.ActionLink("Home", "Index", "Home")</li> <li class="@Html.ActivePage("Home", "About")">@Html.ActionLink("About", "About", "Home")</li> <li class="@Html.ActivePage("Home", "Products")">@Html.ActionLink("Products", "Products", "Home")</li> <li class="@Html.ActivePage("Home", "Services")">@Html.ActionLink("Services", "Services", "Home")</li> <li class="@Html.ActivePage("Home", "Contact")">@Html.ActionLink("Contact", "Contact", "Home")</li> </ul>