Wie füge ich die „aktive' Klasse zu Html.ActionLink in ASP.NET MVC für Bootstrap-Navigation hinzu?

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

Kontext

Hinzufügen einer „aktiven“ Klasse zu einer Bootstrap-Navigationsleiste ist ein wesentlicher Schritt, um Benutzern auf der aktuellen Seite, auf der sie sich befinden, visuelles Feedback zu geben. Wenn Sie Html.ActionLink zum Generieren der Navigationslinks verwenden, erwarten Sie möglicherweise, dass die Klasse dem Link selbst zugewiesen wird. Für eine ordnungsgemäße Funktionalität muss die Klasse jedoch auf das

angewendet werden. Element.

Lösung

Um dieser Anforderung gerecht zu werden, ändern Sie Ihren Code wie folgt:

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

Durch Anwenden der Klasse „aktiv“ auf das

Element formatiert Bootstrap den Link korrekt, um die aktive Seite anzuzeigen.

Erweiterte Überlegungen

Für Szenarien, in denen mehrere Aktionen oder Controller das ausgewählte Verhalten auslösen können, sollten Sie die Verwendung einer HtmlHelper-Erweiterungsmethode in Betracht ziehen:

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

Mit dieser Erweiterung können Sie nun die folgende Syntax verwenden:

<li class="@Html.IsSelected(actions: "Home", controllers: "Default")">
    <a href="@Url.Action("Home", "Default")">Home</a>
</li>

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