asp.net mvc и css: вкладка меню остается выделенной при выборе

Question

Есть ли лучший способ сделать это?

У меня есть метод расширения HTML-помощник, который проверяет, является ли текущее меню вкладок выбранным, а затем выбирает .selected класс CSS или нет. Я вставил ссылку html.IsSelected в каждую строку как

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

где a - имя вкладки, а b - присвоенные ViewData.

это чисто или есть лучший способ?

Answer 1

Этот подход я использую в одном из своих проектов и работает довольно хорошо. Я назначил в каждом контроллере класс ViewData ["Home"] = "activeTab" и использую в представлении значение по умолчанию для пустой строки, как показано ниже. Это сделает вкладку активной, если используется значение этого словаря viewData. Это просто и очень чисто.

Ваш домашний контроллер будет выглядеть так:

        ViewData["Home"] = "activeTab";

        return View("Index");
    }

Вид будет выглядеть так:

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

Answer 2

Вы также можете взглянуть на предыдущее предложение:

Простой способ установить активную вкладку с помощью контроллеров и пользовательского элемента управления в ASP.NET MVC?

Answer 3

Если вы можете жить с решением javascript, посмотрите, как плагин jQuery UI Accordion справляется с этим. По сути, вы можете выбрать выделенную вкладку на основе контроллера, изучив URL-адрес запроса при загрузке страницы.

Кроме того, вы можете установить элемент ViewBag для каждой вкладки, который соответствует значению класса вкладки. Установите значение для текущей вкладки для активного класса CSS, а для остальных - пустое (или их значения по умолчанию). Тогда вы можете использовать:

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

В вашем контроллере вы затем установите правильные значения для переменных ViewData.

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

Answer 4

Я пытался заставить это работать безуспешно.

Как выглядит ваш CSS? Шахта ниже.

.activeTab { фон: #FFFFFF; цвет: # 000000; }

Я использую это с главной страницей, а не с домашней панелью, не уверен, влияет ли это на это.