Best way of mark the “current” navigation item in

问题:

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("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.

回答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.

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

回答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);
        }

回答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.