标记“当前"的最佳方式菜单中的导航项 [英] Best way of mark the "current" navigation item in a menu

问题描述

例如，在 StackOverflow 中，您可以在顶部菜单中设置以下选项:问题、标签、用户、徽章、未回答和提问.当您位于其中一个部分时，它会以橙色突出显示.

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.

在 ASP.NET MVC 中实现这一目标的最佳方法是什么?

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>

第一个问题，我基本上调用了两次Url.Action，首先是href"属性，然后是helper，我认为必须有更好的方法来做到这一点.第二个问题，这不是比较两个链接的最佳方法.我想我可以创建一个新的 Html.ActionLink 重载，所以我不需要调用 Url.Action 两次，但是有什么内置方法可以做到这一点?

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?

奖励:如果我添加 "class="on""，MVC 会呈现 class=""on"".为什么?

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

问候.

推荐答案

对于我正在进行的一个项目，我们遇到了完全相同的问题.如何突出显示当前选项卡?这是当时采取的做法:

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:

在母版页视图中:

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

这篇关于标记“当前"的最佳方式菜单中的导航项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！