如何添加“活动”类到ASP.NET MVC中的Html.ActionLink [英] How to add "active" class to Html.ActionLink in ASP.NET MVC

问题描述

我试图添加一个活动类到我的MVC中的引导navbar，但以下不显示活动类写如下：

 < ul class =nav navbar-nav> 
< li> @ Html.ActionLink（Home，Index，Home，null，new {@ class =active}）< / li& 
< li> @ Html.ActionLink（About，About，Home）< / li> 
< li> @ Html.ActionLink（Contact，Contact，Home）< / li> 
< / ul> 
  

这解析为看起来像正确格式化的类，但不起作用：

 < a class =activehref =/>首页< / a> 
 

在Bootstrap文档中，它指出'a'标签不应该在导航栏中使用，上面是我相信是正确的方式添加一个类到一个Html.ActionLink。有没有另一个（整洁）的方式，我可以做到这一点？

我正在学习ASP.NET MVC的早期阶段，所以如果我错过了一些明显的事情，我道歉。

解决方案

在Bootstrap中，活动类需要应用于< li> code>元素，而不是< a> 。请参见此处的第一个示例： http://getbootstrap.com/components/#navbar

根据什么是活动处理UI样式的方式与ASP.NET MVC的 ActionLink 帮助无关。这是跟踪Bootstrap框架如何构建的正确解决方案。

 < ul class =nav navbar-nav> ; 
< li class =active> @ Html.ActionLink（Home，Index，Home）< / li& 
< li> @ Html.ActionLink（About，About，Home）< / li> 
< li> @ Html.ActionLink（Contact，Contact，Home）< / li> 
< / ul> 
  

---

编辑 / p>

由于您很可能会在多个页面上重复使用您的菜单，因此有一种方法可以根据当前页面自动应用所选类别，而不是复制菜单多次，并手动进行。

最简单的方法是简单地使用 ViewContext.RouteData 中包含的值，即 Action 和 Controller 值。我们可以建立在你现在拥有的东西像这样：

 < ul class =nav navbar-nav 
< li class =@（ViewContext.RouteData.Values [Action]。ToString（）==Index？active：）> @ Html.ActionLink ，Index，Home）< / li> 
< li class =@（ViewContext.RouteData.Values [Action]。ToString（）==About？active：）> @ Html.ActionLink ，About，Home）< / li> 
< li class =@（ViewContext.RouteData.Values [Action]。ToString（）==Contact？active：）> @ Html.ActionLink ，Contact，Home）< / li> 
< / ul> 
  

在代码中并不漂亮，但它会完成这项工作，如果你喜欢，进入部分视图。有办法以更清洁的方式做到这一点，但由于你刚刚开始，我会离开它。最佳运气学习ASP.NET MVC！

---

晚期编辑：

这个问题似乎有点流量，所以我想我会使用一个更优雅的解决方案使用 HtmlHelper 扩展。

编辑03-24-2015：不得重写此方法以允许多个操作和控制器触发所选行为，以及处理当调用方法时

  public static string IsSelected（this HtmlHelper html，string controllers = ，string actions =，string cssClass =selected）
 {
 ViewContext viewContext = html.ViewContext; 
 bool isChildAction = viewContext.Controller.ControllerContext.IsChildAction; 
 
 if（isChildAction）
 viewContext = html.ViewContext.ParentActionViewContext; 
 
 RouteValueDictionary routeValues = viewContext.RouteData.Values; 
 string currentAction = routeValues [action]。ToString（）; 
 string currentController = routeValues [controller]。ToString（）; 
 
 if（String.IsNullOrEmpty（actions））
 actions = currentAction; 
 
 if（String.IsNullOrEmpty（controllers））
 controllers = currentController; 
 
 string [] acceptedActions = actions.Trim（）。Split（'，'）。Distinct（）。ToArray（）; 
 string [] acceptedControllers = controllers.Trim（）。Split（'，'）。Distinct（）。ToArray（）; 
 
 return receivedActions.Contains（currentAction）&&& acceptedControllers.Contains（currentController）？ 
 cssClass：String.Empty; 
} 
  

使用示例：

 < ul> 
< li class =@ Html.IsSelected（actions：Home，controllers：Default）> 
< a href =@ Url.Action（Home，Default）>首页< / a> 
< / li> 
< li class =@ Html.IsSelected（actions：List，Detail，controllers：Default）> 
< a href =@ Url.Action（List，Default）>列表< / a> 
< / li> 
< / ul> 
  

I'm trying to add an"active" class to my bootstrap navbar in MVC, but the following doesn't show the active class when written like this:

<ul class="nav navbar-nav">
  <li>@Html.ActionLink("Home", "Index", "Home", null, new {@class="active"})</li>
  <li>@Html.ActionLink("About", "About", "Home")</li>
  <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

This resolves to what looks like a correctly formatted class, but doesn't work:

<a class="active" href="/">Home</a>

In the Bootstrap documentation it states that 'a' tags shouldn't be used in the navbar, but the above is how I believe is the correct way of adding a class to an Html.ActionLink. Is there another (tidy) way I can do this?

I'm in the early stages of learning ASP.NET MVC, so I apologise if I have missed something obvious!

解决方案

In Bootstrap the active class needs to be applied to the <li> element and not the <a>. See the first example here: http://getbootstrap.com/components/#navbar

The way you handle your UI style based on what is active or not has nothing to do with ASP.NET MVC's ActionLink helper. This is the proper solution to follow how the Bootstrap framework was built.

<ul class="nav navbar-nav">
    <li class="active">@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

---

Edit:

Since you will most likely be reusing your menu on multiple pages, it would be smart to have a way to apply that selected class automatically based on the current page rather than copy the menu multiple times and do it manually.

The easiest way is to simply use the values contained in ViewContext.RouteData, namely the Action and Controller values. We could build on what you currently have with something like this:

<ul class="nav navbar-nav">
    <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Index" ? "active" : "")">@Html.ActionLink("Home", "Index", "Home")</li>
    <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "About" ? "active" : "")">@Html.ActionLink("About", "About", "Home")</li>
    <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Contact" ? "active" : "")">@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

It's not pretty in code, but it'll get the job done and allow you to extract your menu into a partial view if you like. There are ways to do this in a much cleaner way, but since you're just getting started I'll leave it at that. Best of luck learning ASP.NET MVC!

---

Late edit:

This question seems to be getting a bit of traffic so I figured I'd throw in a more elegant solution using an HtmlHelper extension.

Edit 03-24-2015: Had to rewrite this method to allow for multiple actions and controllers triggering the selected behavior, as well as handling for when the method is called from a child action partial view, thought I'd share the update!

public static string IsSelected(this HtmlHelper html, string controllers = "", string actions = "", string cssClass = "selected")
{
    ViewContext viewContext = html.ViewContext;
    bool isChildAction = viewContext.Controller.ControllerContext.IsChildAction;

    if (isChildAction)
        viewContext = html.ViewContext.ParentActionViewContext;

    RouteValueDictionary routeValues = viewContext.RouteData.Values;
    string currentAction = routeValues["action"].ToString();
    string currentController = routeValues["controller"].ToString();

    if (String.IsNullOrEmpty(actions))
        actions = currentAction;

    if (String.IsNullOrEmpty(controllers))
        controllers = currentController;

    string[] acceptedActions = actions.Trim().Split(',').Distinct().ToArray();
    string[] acceptedControllers = controllers.Trim().Split(',').Distinct().ToArray();

    return acceptedActions.Contains(currentAction) && acceptedControllers.Contains(currentController) ?
        cssClass : String.Empty;
}

Sample usage:

<ul>
    <li class="@Html.IsSelected(actions: "Home", controllers: "Default")">
        <a href="@Url.Action("Home", "Default")">Home</a>
    </li>
    <li class="@Html.IsSelected(actions: "List,Detail", controllers: "Default")">
        <a href="@Url.Action("List", "Default")">List</a>
    </li>
</ul>

这篇关于如何添加“活动”类到ASP.NET MVC中的Html.ActionLink的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！