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>