当前＆QUOT;标记＆QUOT的最佳途径;在菜单导航项目 [英] 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.

什么是实现，在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属性，并在助手之后，我认为必须有一个更好的方式来做到这一点。第二个问题，那就是不比较两个链接的最佳方式。我想我可以创建一个新的 Html.ActionLink 超载，所以我并不需要调用 Url.Action 两次，但没有任何BUIL-的方式来做到这一点？

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?

奖励：如果我添加类= \\的\\，MVC呈现类=上，。为什么呢？

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.

现在为止，这个工程，但是我们已经得到了个头大，这种设置开始获得pretty大了一大堆'或'这个'或'这一点。所以，如果你决定尝试这种保持这种心态。

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.

这篇关于当前＆QUOT;标记＆QUOT的最佳途径;在菜单导航项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！