问题描述

我正在尝试在MVC中向我的Bootstrap 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="active" href="/">Home</a>

在引导程序文档中，它指出了”A”标记不应在导航栏中使用，但上面的是我认为如何将类添加到HTML.ActionLink的正确方法.还有另一个(整洁)的方式我可以做到吗?

在Bootstrap中

推荐答案

需要将active类应用于<li>元素而不是<a>.请参阅此处的第一个示例: http://getbootstrap.com/components/#navbar

您根据活动的方式处理您的UI风格的方式与ASP.NET MVC的ActionLink Helper无关.这是正确的解决方案，以便遵循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>

---

编辑:

由于您很可能在多个页面上重用菜单，因此可以根据当前页面自动应用选定的类，而不是多次复制菜单，并手动执行菜单.

最简单的方法是简单地使用ViewContext.RouteData中包含的值，即Action和Controller值.我们可以构建您目前拥有这样的内容:

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

---

迟到编辑:

这个问题似乎是有点流量，所以我认为我会使用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 acceptedActions.Contains(currentAction) && acceptedControllers.Contains(currentController) ?
        cssClass : String.Empty;
}

使用.NET核心:

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>

其他推荐答案

扩展:

public static MvcHtmlString LiActionLink(this HtmlHelper html, string text, string action, string controller)
{
    var context = html.ViewContext;
    if (context.Controller.ControllerContext.IsChildAction)
        context = html.ViewContext.ParentActionViewContext;
    var routeValues = context.RouteData.Values;
    var currentAction = routeValues["action"].ToString();
    var currentController = routeValues["controller"].ToString();

    var str = String.Format("<li role=\"presentation\"{0}>{1}</li>",
        currentAction.Equals(action, StringComparison.InvariantCulture) &&
        currentController.Equals(controller, StringComparison.InvariantCulture) ?
        " class=\"active\"" :
        String.Empty, html.ActionLink(text, action, controller).ToHtmlString()
    );
    return new MvcHtmlString(str);
}

用法:

<ul class="nav navbar-nav">
    @Html.LiActionLink("About", "About", "Home")
    @Html.LiActionLink("Contact", "Contact", "Home")
</ul>

其他推荐答案

我通过在ASP.NET MVC中添加View Bag参数来进行操作.在这里我做了什么

在每个页面中添加ViewBag.Current = “Scheduler”;相同的参数

在布局页面

<ul class="nav navbar-nav">
     <li class="@(ViewBag.Current == "Scheduler" ? "active" : "") "><a href="@Url.Action("Index","Scheduler")" target="_self">Scheduler</a></li>
 </ul>

这个解决了我的问题.

以上所述是小编给大家介绍的如何在ASP.NET MVC中为Html.ActionLink添加 "active "类,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对77isp云服务器技术网的支持！