且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何添加"积极"类Html.ActionLink在ASP.NET MVC

更新时间:2023-01-07 08:10:00

在引导的有效类需要被应用到<李&GT ; 元素,而不是< A> 。看到这里的第一个例子: 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 ​​ code>的值,控制器值。我们可以建立什么您目前有这样的事情:

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>