Wie füge ich die Klasse „Aktiv' effizient zum Html.ActionLink von ASP.NET MVC für die Bootstrap-Navigation hinzu?-CSS-Tutorial-php.cn

Wie füge ich die Klasse „Aktiv' effizient zum Html.ActionLink von ASP.NET MVC für die Bootstrap-Navigation hinzu?

DDD

Freigeben： 2024-12-13 01:42:08

Original

647 Leute haben es durchsucht

How to Efficiently Add the

Hinzufügen der „Aktiven“ Klasse zu Html.ActionLink in ASP.NET MVC

In ASP.NET MVC ist das Hinzufügen einer „aktiven“ Klasse zur Bootstrap-Navigationsleiste essentiell. Der übliche Ansatz, es zum Das Element stimmt nicht mit den Richtlinien von Bootstrap überein.

Der Bootstrap-Weg

Bootstrap erfordert, dass die Klasse „aktiv“ auf das

-Element angewendet wird. Element, nicht das Element. Dadurch wird sichergestellt, dass die aktive Klasse immer sichtbar ist, unabhängig davon, über welches Element sich die Maus bewegt.

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

Nach dem Login kopieren

Automatische Klassenanwendung

Anstatt die „aktive“ Klasse manuell zu jedem

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

Nach dem Login kopieren

Eine elegantere Lösung (HtmlHelper-Erweiterung)

Eine noch elegantere Lösung besteht darin, eine HtmlHelper-Erweiterungsmethode zu erstellen:

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

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

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

    var acceptedActions = actions.Trim().Split(',').Distinct().ToArray();
    var acceptedControllers = controllers.Trim().Split(',').Distinct().ToArray();

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

Nach dem Login kopieren

Verwendung:

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie füge ich die Klasse „Aktiv' effizient zum Html.ActionLink von ASP.NET MVC für die Bootstrap-Navigation hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!