Wie füge ich die Klasse „Active' ordnungsgemäß zu „Html.ActionLink' in ASP.NET MVC für die Bootstrap-Navigation hinzu?-CSS-Tutorial-php.cn

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

Linda Hamilton

Freigeben： 2024-12-22 20:36:59

Original

740 Leute haben es durchsucht

How to Properly Add the

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

In dieser Untersuchung wollen wir die Herausforderung lösen Einbinden einer „aktiven“ Klasse in die Bootstrap-Navigationsleiste mithilfe von ASP.NET MVC. Das Problem entsteht, wenn der herkömmliche Ansatz, wie im bereitgestellten Codeausschnitt dargestellt, nicht den beabsichtigten Stil anzeigt.

Alternative Lösung

In Bootstrap wird der „aktive“ Die Klasse sollte auf die Klasse

angewendet werden. Element, nicht das . Unter Bezugnahme auf die Bootstrap-Dokumentation stellen wir fest, dass von der Verwendung von -Tags in der Navigationsleiste abgeraten wird.

Um dies zu beheben, können wir den Code wie folgt ändern:

<ul>

Nach dem Login kopieren

Dieser Ansatz stimmt mit überein Das Design von Bootstrap gewährleistet die ordnungsgemäße Anwendung der „aktiven“ Klasse.

Automatische Klasse Anwendung

Um den Prozess zu vereinfachen, können Sie ViewContext.RouteData nutzen, um die „aktive“ Klasse basierend auf der aktuellen Seite automatisch anzuwenden. Eine erweiterte Version Ihres ursprünglichen Codes würde so aussehen:

<ul>

Nach dem Login kopieren

Durch die Verwendung dieser Technik können Sie Ihr Menü in einer Teilansicht zentralisieren und die „aktive“ Klassenzuweisung automatisieren.

Erweiterungsmethode für mehr Eleganz

Für eine sauberere Lösung können Sie einen HtmlHelper einführen Erweiterung:

public static string IsSelected(this HtmlHelper html, string controllers = "", string actions = "", string cssClass = "selected")
{
    // Logic to extract relevant information from the current request
    // Compares the extracted information with the provided parameters

    return result ? cssClass : "";
}

Nach dem Login kopieren

Diese Erweiterung ermöglicht prägnanten und wiederverwendbaren Code in Ihren Ansichten:

<ul>

Nach dem Login kopieren

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