Czy jest lepszy sposób na zrobienie tego?asp.net mvc i css: Po zaznaczeniu karty menu przy wyborze
Mam metodę rozszerzenia helper HTML, która sprawdza, czy bieżące menu karty jest wybrane, a następnie wybiera .selected css class, czy nie. Umieściłem link html.IsSelected w każdym li jako 01, gdzie a jest nazwą karty, a b jest przypisaną ViewData.
Czy to jest czyste czy jest lepszy sposób?
Jeśli możesz żyć z rozwiązaniem javascript, spójrz na to, jak obsługuje je wtyczka jQuery UI Accordion. Zasadniczo można wybrać podświetloną zakładkę na podstawie kontrolera, sprawdzając adres URL żądania po załadowaniu strony.
Alternatywnie można ustawić element ViewBag dla każdej karty odpowiadającej wartości klasy karty. Ustaw wartość bieżącej karty na aktywną klasę css, a pozostałe na pustą (lub ich wartości domyślne). Następnie można użyć:
<li id="HomeTab" class="<%= ViewBag.HomeTabClass %>" />
<li id="OtherTab" class="<%= (string)ViewBag.OtherTabClass %>" />
W swoim kontrolerze należy następnie ustawić odpowiednie wartości zmiennych ViewData.
ViewBag.HomeTabClass = "tab activeTab";
ViewBag.OtherTabClass = "tab";
Można również spojrzeć na poprzednią sugestię:
An easy way to set the active tab using controllers and a user control in ASP.NET MVC?
Podejście używam w jednym z moich projektów i działa całkiem dobrze. Przypisałem w każdym kontrolerze ViewData ["Home"] = "activeTab" klasy i używam w widoku domyślnej wartości pustego łańcucha, jak pokazano poniżej. To spowoduje, że zakładka będzie aktywna, jeśli zostanie podjęta wartość tego słownika danych widoku. Jest prosty i bardzo czysty.
Kontroler domu będzie wyglądać następująco:
ViewData["Home"] = "activeTab";
return View("Index");
}
Widok będzie wyglądać następująco:
<li class="<%= ((string)ViewData["Home"] ?? "") %>"><%= Html.ActionLink("Home", "Index", "Home")%></li>
<li class="<%= ((string)ViewData["About"] ?? "") %>"><%= Html.ActionLink("About", "About", "Home")%></li>
Starałem się uzyskać to do pracy bez powodzenia.
Jak wygląda Twój CSS? Mój jest poniżej.
.activeTab { tło: #FFFFFF; kolor: # 000000; }
Używam tego na stronie wzorcowej, a nie na widoku głównym, nie jestem pewien, czy to ma wpływ na to.
to właśnie to co zrobiłem, użyłem ViewData do przypisania klasy. Powiedziałbyś, że rozwiązanie Java jest wydajniejsze lub lepsze z jakiegoś konkretnego powodu? – zsharp
Korzystanie z rozwiązania javascript uniemożliwia dodanie kodu do każdej akcji, aby ustawić poprawną kartę, chociaż prawdopodobnie można uzyskać to samo, wdrażając w OnActionExecuting. Wadą stosowania javascript jest to, że jest on uszkodzony, gdy javascript jest wyłączony. – tvanfosson
Jeśli mam więcej niż pięć pozycji menu i podpunkt, w jaki sposób mogę użyć Twojej odpowiedzi? –