Ich versuche, meiner Bootstrap-Navigationsleiste in MVC eine "aktive" Klasse hinzuzufügen, aber im Folgenden wird die aktive Klasse nicht angezeigt, wenn sie so geschrieben wird:
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home", null, new {@class="active"})</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
Dies wird in eine korrekt formatierte Klasse aufgelöst, funktioniert jedoch nicht:
<a class="active" href="/">Home</a>
In der Bootstrap-Dokumentation heißt es, dass 'a'-Tags nicht in der Navigationsleiste verwendet werden sollten, aber ich glaube, dass dies die richtige Methode ist, um eine Klasse zu einem Html.ActionLink hinzuzufügen. Gibt es eine andere (ordentliche) Möglichkeit, dies zu tun?
asp.net
css
asp.net-mvc
twitter-bootstrap
Gillespie
quelle
quelle
active
Klasse demli
Element hinzufügen , nicht dema
. Sehen Sie das erste Beispiel hier: getbootstrap.com/components/#navbarAntworten:
In Bootstrap muss die
active
Klasse auf das<li>
Element und nicht auf das Element angewendet werden<a>
. Das erste Beispiel finden Sie hier: http://getbootstrap.com/components/#navbarDie Art und Weise, wie Sie mit Ihrem UI-Stil umgehen, basierend darauf, was aktiv ist oder nicht, hat nichts mit dem
ActionLink
Helfer von ASP.NET MVC zu tun . Dies ist die richtige Lösung, um zu verfolgen, wie das Bootstrap-Framework erstellt wurde.Bearbeiten:
Da Sie Ihr Menü höchstwahrscheinlich auf mehreren Seiten wiederverwenden werden, wäre es klug, diese ausgewählte Klasse automatisch auf der Grundlage der aktuellen Seite anzuwenden, anstatt das Menü mehrmals zu kopieren und manuell auszuführen.
Am einfachsten ist es, einfach die darin enthaltenen Werte zu verwenden
ViewContext.RouteData
, nämlich die WerteAction
undController
. Mit so etwas könnten wir auf dem aufbauen, was Sie derzeit haben:Es ist nicht schön im Code, aber es erledigt den Job und ermöglicht es Ihnen, Ihr Menü in eine Teilansicht zu extrahieren, wenn Sie möchten. Es gibt Möglichkeiten, dies viel sauberer zu machen, aber da Sie gerade erst anfangen, lasse ich es dabei. Viel Glück beim Lernen von ASP.NET MVC!
Späte Bearbeitung:
Diese Frage scheint ein wenig Verkehr zu bekommen, also dachte ich mir, ich würde eine elegantere Lösung mit einer
HtmlHelper
Erweiterung einführen.Bearbeiten 24.03.2015: Diese Methode musste neu geschrieben werden, um mehrere Aktionen und Controller zu ermöglichen, die das ausgewählte Verhalten auslösen, sowie die Behandlung, wenn die Methode aus einer Teilansicht einer untergeordneten Aktion aufgerufen wird. Ich dachte, ich würde das Update freigeben!
Funktioniert mit .NET Core:
Beispielnutzung:
quelle
Erweiterung:
Verwendung:
quelle
role="presentation"
, der für ein primäres Navigationsmenü ( john.foliot.ca/aria-hidden/#pr ) überhaupt nicht geeignet ist . Eine ungeordnete Liste ist ein geeigneter Container für einen verwandten Satz von Links, da sie auf logische Weise zusammengefasst werden.var str = String.Format("<li role=\"presentation\"{0}>{1}</li>", currentAction.toLower().Equals(action.toLower(), StringComparison.InvariantCulture) && currentController.toLower().Equals(controller.toLower(), StringComparison.InvariantCulture) ? " class=\"active\"" : String.Empty, html.ActionLink(text, action, controller).ToHtmlString() );
Ich habe dies durch Hinzufügen eines View-Bag-Parameters in asp.net mvc erreicht. Hier, was habe ich getan
ViewBag.Current = "Scheduler";
Like-Parameter auf jeder Seite hinzugefügtIn der Layoutseite
Dies löste mein Problem.
quelle
Kann etwas spät sein. Aber hoffe das hilft.
Und Verwendung wie folgt:
Referenz von http://www.codingeverything.com/2014/05/mvcbootstrapactivenavbar.html
quelle
Ich weiß, dass diese Frage alt ist, aber ich möchte hier nur meine Stimme hinzufügen. Ich halte es für eine gute Idee, das Wissen darüber zu belassen, ob ein Link zum Controller der Ansicht aktiv ist oder nicht.
Ich würde nur einen eindeutigen Wert für jede Ansicht in der Controller-Aktion festlegen. Wenn ich beispielsweise den Link zur Startseite aktivieren möchte, würde ich Folgendes tun:
Dann werde ich aus meiner Sicht so etwas schreiben:
Wenn Sie zu einer anderen Seite navigieren, z. B. Programme, ist ViewBag.Home nicht vorhanden (stattdessen ViewBag.Programs). Daher wird nichts gerendert, nicht einmal class = "". Ich denke, dies ist sowohl aus Gründen der Wartbarkeit als auch der Sauberkeit sauberer. Ich neige dazu, die Logik immer so weit wie möglich aus dem Blickfeld zu lassen.
quelle
In Anbetracht dessen, was Damith gepostet hat, denke ich, dass Sie sich nur für Viewbag.Title als aktiv qualifizieren können (es wird empfohlen , dies auf Ihren Inhaltsseiten zu platzieren, damit Ihre
_Layout.cshtml
Seite Ihre Linkleisten enthält ). Beachten Sie auch, dass bei Verwendung von Untermenüelementen auch Folgendes funktioniert:quelle
Ich habe Doms "nicht hübsche" Antwort geändert und sie hässlicher gemacht. Manchmal haben zwei Controller die widersprüchlichen Aktionsnamen (dh Index), also mache ich das:
quelle
Sie können dies versuchen: In meinem Fall lade ich ein Menü aus einer Datenbank basierend auf rollenbasiertem Zugriff. Schreiben Sie den Code in jede Ansicht, welches Menü Sie basierend auf Ihrer Ansicht aktivieren möchten.
quelle
Diese Lösung ist für Asp.net MCV 5 einfach.
Erstellen Sie beispielsweise eine statische Klasse
Utilitarios.cs
.Erstellen Sie innerhalb der Klasse eine statische Methode:
so anrufen
quelle
ASP.NET Core & Bootstrap 4
Die aktuellste Antwort
Ich habe die saubere Lösung von @crush für eine aktualisierte, ASP.NET Core- und Bootstrap 4- kompatible Methode überarbeitet, um dieses Problem basierend auf einer
IHtmlHelper
Erweiterungsmethode zu lösen :Verwendung
quelle
ActiveActionLink()
wird die aktive Klasse auf die<li>
:-)Einfache ASP.NET Core 3.0 und TagHelpers
In Ihre _ViewImports.cs aufnehmen:
Verwendung:
quelle
Fügen Sie '.ToString' hinzu, um den Vergleich unter ASP.NET MVC zu verbessern
- -
quelle
@functions { public bool IsActive(string action, string controller) { var actionRoute = ViewContext.RouteData.Values["Action"].ToString(); var controlRoute = ViewContext.RouteData.Values["Controller"].ToString(); return controller.Equals(controlRoute)&& actionRoute.Equals(actionRoute); } }
und Verwendung definieren:<li class="@(IsActive("Index", "Home")? "active": "")">
Wir können auch
UrlHelper
aus RequestContext erstellen, das wir von MvcHandler selbst erhalten können. Daher glaube ich, dass jemand, der diese Logik in Razor-Vorlagen wie folgt beibehalten möchte, hilfreich wäre:AppCode
.HtmlHelpers.cshtml
Erstellen Sie dort einen Helfer:
Dann können wir unsere Ansichten wie folgt verwenden:
Hoffe, dass es jemandem hilft.
quelle
UrlHelper
das zu erstellen , in dem Sie sich befindenController.Url
. Das Einzige ist, dass wir wahrscheinlich nichtUrlHelper
für jeden Aufruf das Erstellen ausführen möchten,MenuItem
sodass wir nach dem ersten Aufruf des Helfers möglicherweise ein Häkchen beim Speichern in HttpContext-Elementen anwenden, sodass wir dies nur einmal pro Anforderung tun.ist mit einer Lambda-Funktion möglich
dann Verwendung
quelle
Ich habe eine
HtmlHelper
Erweiterung erstellt, die eineActiveActionLink
Methode für diejenigen unter Ihnen hinzufügt, die die "aktive" Klasse eher zum Link selbst als zur<li>
Umgebung des Links hinzufügen möchten .Die Verwendung ist wie folgt:
quelle
Die Antwort von @dombenoit funktioniert. Es wird jedoch Code eingeführt, der gewartet werden muss. Überprüfen Sie diese Syntax:
Beachten Sie die Verwendung der
.SetLinksActiveByControllerAndAction()
Methode.Wenn Sie sich fragen, was diese Syntax ermöglicht, lesen Sie TwitterBootstrapMVC
quelle
Ich suchte auch nach einer Lösung und jQuery half ziemlich viel. Zuerst müssen Sie Ihren
<li>
Elementen IDs geben .Nachdem Sie dies auf Ihrer Layoutseite getan haben, können Sie jQuery mitteilen, welches
<li>
Element in Ihrer Ansicht ausgewählt werden soll.Hinweis: Sie müssen
@RenderSection("scripts", required: false)
Ihre Layoutseite direkt vor dem</body>
Tag haben, um diesen Abschnitt hinzuzufügen.quelle
Ich möchte diese Lösung vorschlagen, die auf dem ersten Teil von Doms Antwort basiert.
Wir definieren zunächst zwei Variablen, "action" und "controller", und verwenden sie, um die aktive Verbindung zu bestimmen:
Und dann:
Jetzt sieht es besser aus und es sind keine komplexeren Lösungen erforderlich.
quelle
Wenn es überhaupt nicht angezeigt wird, ist der Grund, dass Sie zwei @ -Zeichen benötigen:
ABER ich glaube, Sie müssen möglicherweise die aktive Klasse auf dem "li" -Tag haben, nicht auf dem "a" -Tag. laut Bootstrap-Dokumenten ( http://getbootstrap.com/components/#navbar-default ):
Daher lautet Ihr Code:
quelle
Hoffe das hilft, unten ist, wie Ihr Menü sein kann:
Und fügen Sie unterhalb der MVC-Hilfsfunktion unterhalb des HTML-Tags hinzu.
Ich habe die Antwort von http://questionbox.in/add-active-class-menu-link-html-actionlink-asp-net-mvc/ weitergeleitet.
quelle
Ich erkannte, dass dieses Problem für einige von uns ein häufiges Problem war, und veröffentlichte meine eigene Lösung mit dem Nuget-Paket. Unten sehen Sie, wie es funktioniert. Ich hoffe das wird nützlich sein.
Hinweis: Dieses Nuget-Paket ist mein erstes Paket. Wenn Sie also einen Fehler sehen, geben Sie bitte Feedback. Danke dir.
Installieren Sie das Paket oder laden Sie den Quellcode herunter und fügen Sie Ihr Projekt hinzu
Fügen Sie Ihre Seiten einer Aufzählung hinzu
Setzen Sie Filter oben auf Ihren Controller oder Ihre Aktion
Und verwenden Sie es in Ihrem Header-Layout so
Weitere Informationen: https://github.com/betalgo/MvcMenuNavigator
quelle
Ich glaube, hier ist ein sauberer und kleinerer Code, um das ausgewählte Menü "aktiv" zu machen:
quelle
Ich habe oben eine Kombination von Antworten gemacht und meine Lösung gefunden.
So..
Erstellen Sie zuerst im Rasiermesserblock eine Zeichenfolgenvariable, die den Namenswert des Controllers und die vom Benutzer aufgerufene Aktion enthält.
Verwenden Sie dann eine Kombination aus HTML- und Razor-Code:
Ich denke, das ist gut, weil Sie nicht jedes Mal auf "ViewContext.RouteData.Values" zugreifen müssen, um den Controller-Namen und den Aktionsnamen zu erhalten.
quelle
Meine Lösung für dieses Problem ist
Ein besserer Weg könnte darin bestehen, eine HTML-Erweiterungsmethode hinzuzufügen, um den aktuellen Pfad zurückzugeben, der mit dem Link verglichen werden soll
quelle
Ich war das:
Einen Helfer in der Menü-Teilansicht gemacht
Verwenden Sie es dann im Ankertag wie folgt:
Meine Anwendung hatte keine Bereiche, kann aber auch als weitere Variable in die Hilfsfunktion aufgenommen werden. Und ich musste die aktive Klasse aus meiner Sicht an das Ankertag übergeben. Aber
li
kann auch so konfiguriert werden.quelle