ASP.net MVC – 导航并突出显示“当前”链接

创建新的MVC项目时，它使用以下标记创建Site.master：

我想在这里放置代码，如果我在该页面上，将突出显示当前链接。

如果我添加其他链接，例如：

如果我正在使用Products控制器中的任何操作，我希望Products链接处于活动状态（使用类似.active的css类）。

如果我在HomeController About操作上，那么About链接应该是活动的。 如果我在HomeController的Index操作上，Home链接应该是活动的。

在MVC中执行此操作的最佳方法是什么？

Answer 1

看看这篇博文

它显示了如何创建一个您调用的HTML扩展而不是通常的Html.ActionLink扩展然后将class="selected"附加到当前活动的列表项。

然后，您可以在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

您可以通过使用“data-”属性来标识容器然后使用链接的jQuery更改CSS类来执行此操作，如下所示：

 
 
 
@Html.ActionLink("About", "About", "Home")
 
@Html.ActionLink("Contact", "Contact", "Home")
 
 
  

Answer 3

以下是将其作为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)) { @linkText } 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 4

我用这个方法用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 5

您可能想查看我的一系列MVC导航控件，其中包括自动突出显示当前链接的function：

http://mvcquicknav.apphb.com/

Answer 6

感谢@codingbadger的解决方案。

我必须在多个动作上突出显示我的导航链接，所以我决定添加一些包含控制器 – 动作对的参数，如果也访问其中任何一个组合，它将突出显示链接。 而且，就我而言，突出显示类将应用于

元素。

我把我的代码放在这里，希望它能帮助将来的某个人：

• 这是辅助方法：

   /// 
   /// 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. /// 
   /// The CSS class that will be applied to the selected link /// A list of tuples containing pairs of Action Name and Controller Name respectively public static MvcHtmlString NavLink(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName, string parentElement, string selectedClass, IEnumerable> 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)}"); } return new MvcHtmlString($"<{parentElement}>{htmlHelper.ActionLink(linkText, actionName, controllerName)}"); } 

• 而且，这是一个如何使用它的例子：

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

Answer 7

首先制作一个Helper类和HTML Helper方法

  public static string IsActive(this HtmlHelper html,string control,string action) { var routeData = html.ViewContext.RouteData; var routeAction = (string)routeData.Values["action"]; var routeControl = (string)routeData.Values["controller"]; // both must match var returnActive = control == routeControl && action == routeAction; return returnActive ? "active" : ""; } 

在View或Layour部分中，使用适当的Conntroller和Action调用Helper方法。

  @using YourNamespace.HtmlHelpermethodName  

这将在class属性中添加“active”字符串，它将显示为

Answer 8

 
 
 
@Html.ActionLink("Home", "Index", "Home")
 
@Html.ActionLink("About", "About", "Home")
 
@Html.ActionLink("Contact", "Contact", "Home")
 
@Html.ActionLink("Products", "Index", "Products")
 
 Archivo 
 
@Html.ActionLink("Document Type", "Index", "DocumentTypes")
 
@Html.ActionLink("Employee", "Index", "Employees")
 
@Html.ActionLink("Suppliers", "Index", "Suppliers")
 
 
 
 @Html.Partial("_LoginPartial")