如何添加＆QUOT;积极＆QUOT;类Html.ActionLink在ASP.NET MVC [英] How to add "active" class to Html.ActionLink in ASP.NET MVC

问题描述

我想活动类添加到我的MVC引导导航栏，但下面的时候这样写不显示活动类：

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>

在引导文件就指出，A标签不应该在导航栏使用，但上面的是我如何相信是增加一个类的Html.ActionLink的正确途径。是否有另一种（整齐）的方式，我可以做到这一点？

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?

我在学习ASP.NET MVC的早期阶段，所以我很抱歉，如果我错过了一些东西明显！

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

推荐答案

在引导的有效类需要被应用到＆LT;李＆GT ; 元素，而不是＆LT; A＆GT; 。看到这里的第一个例子： http://getbootstrap.com/components/#navbar

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

您处理基于对什么是积极的还是不是你的UI风格的方式无关的ASP.NET MVC的 ActionLink的帮手。这是妥善解决跟随引导框架如何构建的。

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>

---

编辑：

既然你将最有可能在多个页面重用你的菜单，这将是聪明的有办法适用于自动根据当前页面上选定的类别，而不是在菜单中多次复制和做手工。

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.

最简单的方法是简单地使用即动作包含在 ViewContext.RouteData 的值，控制器值。我们可以建立什么您目前有这样的事情：

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>

这不是在code pretty，但它会完成这项工作，并允许你提取你的菜单变成一个局部视图，如果你喜欢。有办法在一个更清洁的方式做到这一点，但因为你是刚开始我会留在这。祝你好运学习ASP.NET MVC！的

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!

后期编辑：

此问题似乎变得有点流量，所以我想我会使用的HtmlHelper 扩展更优雅的解决方案抛出。

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.

编辑2015年3月24日：不得不重写此方法允许多个动作和控制器的触发选定的行为，以及为处理时，方法是从一个孩子的行动局部视图调用，以为我会分享更新！

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;
}

使用范例：

<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>

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