如何添加“活动"类到 ASP.NET MVC 中的 Html.ActionLink [英] 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>

在 Bootstrap 文档中，它指出不应在导航栏中使用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?

推荐答案

在 Bootstrap 中，active 类需要应用于

元素而不是.请参阅此处的第一个示例: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 帮助程序无关.这是遵循 Bootstrap 框架构建方式的正确解决方案.

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 中包含的值，即 Action 和 Controller 值.我们可以在您目前拥有的基础上使用以下内容:

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>

它的代码并不漂亮，但它可以完成工作并允许您根据需要将菜单提取到部分视图中.有很多方法可以以更简洁的方式执行此操作，但是由于您才刚刚开始，因此我将保留它.祝您学习 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;
}

适用于 .NET Core:

public static string IsSelected(this IHtmlHelper htmlHelper, string controllers, string actions, string cssClass = "selected")
{
    string currentAction = htmlHelper.ViewContext.RouteData.Values["action"] as string;
    string currentController = htmlHelper.ViewContext.RouteData.Values["controller"] as string;

    IEnumerable<string> acceptedActions = (actions ?? currentAction).Split(',');
    IEnumerable<string> acceptedControllers = (controllers ?? currentController).Split(',');

    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>

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