ASP.net MVC - 導航，並強調「當前」的鏈接

Question

當您創建它會創建一個與的Site.Master以下標記一個新的MVC項目：

<div id="menucontainer"> 
    <ul id="menu"> 
     <li><%: Html.ActionLink("Home", "Index", "Home")%></li> 
     <li><%: Html.ActionLink("About", "About", "Home")%></li> 
    </ul> 
</div> 

我想將代碼放在這裏將突出顯示當前鏈接，如果我在該頁面上。

如果我添加另一個鏈接，如：

<li><%: Html.ActionLink("Products", "Index", "Products")%></li> 

我希望的產品鏈接激活（使用CSS類一樣。主動），如果我在Products控制器的任何行動。如果我在HomeController中關於行動

關於鏈接應該是積極的。如果我在HomeController的Index操作中，Home鏈接應該是活動的。

在MVC中做到這一點的最佳方式是什麼？

Answer 1

退房this blog post

它顯示瞭如何創建調用通常Html.ActionLink然後擴展追加class="selected"到當前活動的列表項，而不是一個HTML擴展。

然後，您可以把任何格式/你想突出你的CSS

編輯

只是添加一些代碼，而不僅僅是一個鏈接。

public static class HtmlHelpers 
{ 

    public static MvcHtmlString MenuLink(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 = "selected" }); 
     } 

     return htmlHelper.ActionLink(linkText, actionName, controllerName); 


    } 
} 

現在，你需要在你的CSS來定義你的selected類，然後在你的意見在頂部加入一個using聲明。

@using ProjectNamespace.HtmlHelpers

和使用MenuLink代替ActionLink

@Html.MenuLink("Your Menu Item", "Action", "Controller")

Answer 2

我用這種方法與針對該問題的的HtmlHelper：

public static class HtmlHelpers 
{ 
    public static MvcHtmlString MenuLink(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.Equals(currentAction, StringComparison.InvariantCultureIgnoreCase) && controllerName.Equals(currentController, StringComparison.InvariantCultureIgnoreCase)) 
     { 
      return htmlHelper.ActionLink(linkText, actionName, controllerName, null, new { @class = "active" }); 
     } 

     return htmlHelper.ActionLink(linkText, actionName, controllerName); 

    } 
} 

和視圖

@Html.MenuLink"Linktext", "action", "controller") 

Answer 3

你可能想看看我的MVC系列導航控件，其中包括可自動突出顯示當前鏈接的能力：

http://mvcquicknav.apphb.com/

Answer 4

你可以通過做「數據 - 」屬性識別容器（一個或多個），然後使用jQuery改變CSS類的鏈接，如下所示：

<div class="..." data-navigation="true"> 
        <ul class="..."> 
         <li>@Html.ActionLink("About", "About", "Home")</li> 
         <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
        </ul> 
</div> 

<script> 
    $(function() { 
     $("div[data-navigation='true']").find("li").children("a").each(function() { 
      if ($(this).attr("href") === window.location.pathname) { 
       $(this).parent().addClass("active"); 
      } 
     }); 
    }); 
</script> 

Answer 5

這裏是實現這個作爲一個MVC的輔助方式：

@helper NavigationLink(string linkText, string actionName, string controllerName) 
{ 
    if(ViewContext.RouteData.GetRequiredString("action").Equals(actionName, StringComparison.OrdinalIgnoreCase) && 
     ViewContext.RouteData.GetRequiredString("controller").Equals(controllerName, StringComparison.OrdinalIgnoreCase)) 
    { 
     <span>@linkText</span> 
    } 
    else 
    { 
     @Html.ActionLink(linkText, actionName, controllerName); 
    } 
} 

它可以被用來類似以下內容：

@NavigationLink("Home", "index", "home") 
@NavigationLink("About Us", "about", "home") 

MVC的助手一篇好文章可以在這裏找到：http://weblogs.asp.net/scottgu/archive/2011/05/12/asp-net-mvc-3-and-the-helper-syntax-within-razor.aspx

Answer 6

<div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li>@Html.ActionLink("Home", "Index", "Home")</li> 
       <li>@Html.ActionLink("About", "About", "Home")</li> 
       <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
       <li>@Html.ActionLink("Products", "Index", "Products")</li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Archivo<b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li>@Html.ActionLink("Document Type", "Index", "DocumentTypes")</li> 
         <li>@Html.ActionLink("Employee", "Index", "Employees")</li> 
         <li>@Html.ActionLink("Suppliers", "Index", "Suppliers")</li> 
        </ul> 
       </li>  
      </ul> 
      @Html.Partial("_LoginPartial") 
     </div> 

Answer 7

感謝@codingbadger的解決方案。

我必須得到我的導航鏈接突出了多個動作，所以我決定添加包含控制器動作對幾個參數，如果任這些組合的被訪問過它會高亮顯示鏈接。而在我的情況中，突出顯示類將應用於<li>元素。

我把我的代碼在這裏希望這會幫助別人的未來：

• 這裏的輔助方法：

  /// <summary> 
  /// The link will be highlighted when it is used to redirect and also be highlighted when any action-controller pair is used specified in the otherActions parameter. 
  /// </summary> 
  /// <param name="selectedClass">The CSS class that will be applied to the selected link</param> 
  /// <param name="otherActions">A list of tuples containing pairs of Action Name and Controller Name respectively</param> 
  public static MvcHtmlString NavLink(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName, string parentElement, string selectedClass, IEnumerable<Tuple<string, string>> otherActions) 
  { 
      string currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action"); 
      string currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller"); 
  
      if ((actionName == currentAction && controllerName == currentController) || 
       (otherActions != null && otherActions.Any(pair => pair.Item1 == currentAction && pair.Item2 == currentController))) 
      { 
       return new MvcHtmlString($"<{parentElement} class=\"{selectedClass}\">{htmlHelper.ActionLink(linkText, actionName, controllerName)}</{parentElement}>"); 
      } 
  
      return new MvcHtmlString($"<{parentElement}>{htmlHelper.ActionLink(linkText, actionName, controllerName)}</{parentElement}>"); 
  } 
  

• 而且，這裏有一個如何使用它的一個例子：

<ul> 
 
    @Html.NavLink("Check your eligibility", "CheckEligibility", "Eligibility", "li", "current-page", new Tuple<string, string>[] 
 
    { 
 
     new Tuple<string, string>("Index", "Eligibility"), 
 
     new Tuple<string, string>("RecheckEligibility", "Eligibility") 
 
    }) 
 
    @Html.NavLink("Apply for my loan", "Apply", "Loan", "li", "current-page") 
 
</ul>