問題描述

例如，在 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.

這篇關于標記“當前"的最佳方式菜單中的導航項的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！