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

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>

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>

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

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>

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!