asp.net mvc und css: Menüleiste bleibt auf Auswahl markiert

Question

Gibt es eine bessere Möglichkeit, dies zu tun?

Ich habe eine HTML-Helfer-Erweiterung-Methode, die überprüft, ob das aktuelle Registerkartenmenü das ausgewählte ist und wählt dann .selected CSS-Klasse oder nicht. Ich legte den html.IsSelected Link in jedem li als

<li class="<%=Html.IsSelected(string a, string b)%>" > 

wobei a der Registerkarte Name und b Viewdata zugewiesen.

ist das sauber oder gibt es einen besseren Weg?

Answer 1

Wenn Sie mit einer JavaScript-Lösung leben können, sehen Sie sich an, wie das jQuery UI Accordion-Plugin dies handhabt. Im Wesentlichen können Sie die hervorgehobene Registerkarte basierend auf dem Controller auswählen, indem Sie die Anforderungs-URL beim Laden der Seite überprüfen.

Alternativ können Sie für jede Registerkarte, die dem Klassenwert der Registerkarte entspricht, ein ViewBag-Element festlegen. Legen Sie den Wert für die aktuelle Registerkarte auf die aktive CSS-Klasse und die anderen leer (oder ihre Standardwerte) fest. Dann können Sie verwenden:

<li id="HomeTab" class="<%= ViewBag.HomeTabClass %>" /> 
<li id="OtherTab" class="<%= (string)ViewBag.OtherTabClass %>" /> 

In Ihrem Controller würden Sie dann die richtigen Werte für die ViewData-Variablen einrichten.

ViewBag.HomeTabClass = "tab activeTab"; 
ViewBag.OtherTabClass = "tab"; 

Answer 2

Sie könnten auch einen Blick auf einen früheren Vorschlag nehmen:

An easy way to set the active tab using controllers and a user control in ASP.NET MVC?

Answer 3

Dieser Ansatz, den ich in einem meiner Projekte mit bin und ziemlich gut funktioniert. Ich habe in jedem Controller ViewData ["Home"] = "activeTab" -Klasse zugewiesen und verwende in der Ansicht einen Standardwert für eine leere Zeichenfolge, wie unten gezeigt. Dadurch wird die Registerkarte aktiviert, wenn der Wert dieses viewData-Wörterbuchs verwendet wird. Ist einfach und sehr sauber.

Ihre Heimsteuerung wird wie folgt aussehen:

 ViewData["Home"] = "activeTab"; 

     return View("Index"); 
    } 

Die Ansicht wird wie folgt aussehen:

<li class="<%= ((string)ViewData["Home"] ?? "") %>"><%= Html.ActionLink("Home", "Index", "Home")%></li> 
<li class="<%= ((string)ViewData["About"] ?? "") %>"><%= Html.ActionLink("About", "About", "Home")%></li> 

Answer 4

Ich habe versucht, dies ohne Glück zur Arbeit zu kommen.

Wie sieht Ihr CSS aus? Meine ist unten.

.activeTab { Hintergrund: #FFFFFF; Farbe: # 000000; }

Ich benutze dies mit der Masterseite und nicht die Home-Ansicht, nicht sicher, ob das Auswirkungen hat.