Best way of mark the “current” navigation item in a menu

For example, here in StackOverflow you can se a top menu with the options: Questions, Tags, Users, Badges, Unanswered and Ask Question. When you are in one of those sections, it is highlighted in orange.

What is the best way to achieve that in ASP.NET MVC?

So far, and as proof of concept, I have done this helper:

    public static String IsCurrentUrl(this UrlHelper url, String generatedUrl, String output)
    {
        var requestedUrl = url.RequestContext.HttpContext.Request.Url;

        if (generatedUrl.EndsWith("/") && !requestedUrl.AbsolutePath.EndsWith("/"))
            generatedUrl=generatedUrl.Substring(0, generatedUrl.Length - 1);

        if (requestedUrl.AbsolutePath.EndsWith(generatedUrl))
            return output;

        return String.Empty;

    }

That method add the output string to the element if the current request match that link. So it can be used like this:

<li>
    <a href="@Url.Action(" rel="nofollow noreferrer noopener"AboutUs","Home")" @Url.IsCurrentUrl(@Url.Action("AboutUs", "Home"), "class=on")><span class="bullet">About Us</span></a>
 </li>

First problem, I am basically calling twice to Url.Action, first for the “href” attribute, and after in the helper, and I think there has to be a better way to do this. Second problem, that is not the best way to compare two links. I think I could create a new Html.ActionLink overload so I don’t need to call the Url.Action twice, but is there any buil-in way to do this?

Bonus: if I add "class="on"", MVC renders class=""on"". Why?

Regards.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

For a project that i’m working on we’ve had the exact same problem. How to highlight the current tab? This is the approach that was taken at the time:

In the master page view:

 <% 
   var requestActionName = 
                         ViewContext.RouteData.Values["action"].ToString();
   var requestControllerName = 
                         ViewContext.RouteData.Values["controller"].ToString();
 %>

 <li class="<%=  requestActionName.Equals("Index",
                   StringComparison.OrdinalIgnoreCase)
                   && requestControllerName.Equals("Home",
                   StringComparison.OrdinalIgnoreCase) ? 
                   "current" : string.Empty %>">
            <%: Html.ActionLink("Home", "Index", "Home") %>
  </li>

Basically what’s happening is that we’re just string comparing the action and controller values with values associated with a link. If they match, then we’re calling that the current link, and we assign a ‘current’ class to the menu item.

Now so far, this works, but as we’ve gotten bigger in size, this setup starts to get pretty large with a whole lot of ‘or’ this ‘or’ that. So keep that mind if you decide to try this.

Good luck, and hope this helps you out some.

Method 2

Do it using CSS. On the server, create a function to identify the section of the site that should be highlighted and output that in your body tag as a css class:

This articles explains it:
http://hicksdesign.co.uk/journal/highlighting-current-page-with-css

Method 3

Another way is to use an extension method like this (Razor and C# in example):

@Html.MenuItem("MainPage","Index", "Home")

method:

 public static MvcHtmlString MenuItem(
            this HtmlHelper htmlHelper,
            string linkText,
            string actionName,
            string controllerName
            )
        {
            string currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action");
            string currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller");
            if (actionName == currentAction && controllerName == currentController)
            {
                return htmlHelper.ActionLink(
                    linkText,
                    actionName,
                    controllerName,
                    null,
                    new
                        {
                            @class = "current"
                        });
            }
            return htmlHelper.ActionLink(linkText, actionName, controllerName);
        }

Method 4

Not sure about the first bit, but for the bonus:

is an escape character in C# (and most languages, for that matter), and it will cause the next character to be interpreted as a string, rather than a C# operator.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0