Каков самый простой способ изменить изображение выбранной вкладки в ASP.NET MVC?

Я видел этот вопрос, Простой способ установить активную вкладку , однако я не уверен, что это оптимальное решение.

Я хочу посмотреть, как другие обрабатывают выбор вкладок в своих представлениях/контроллерах в ASP.NET MVC.

Каков самый простой способ реализовать выбираемые вкладки в ASP.NET MVC? Я бы хотел избежать методов javascript, чтобы позволить браузерам без поддержки js по-прежнему видеть выбранную вкладку.


navigation tabs asp.net-mvc
person KingNestor    schedule 11.06.2009    source источник

Ответы (2)


arrow_upward
0
arrow_downward

РЕДАКТИРОВАТЬ: Сотрите это выше, это не то, что я сделал, это была нерабочая комбинация двух методов, которые я использовал.

Мне приходилось обрабатывать состояния в двух разных местах на одной странице. В первом случае я просто добавил CSS в представление, чтобы изменить вкладку на правильный стиль. Второе, что мне нужно было сделать, это использовать ViewData, чтобы дать мне переменную, которую я передал помощнику, который я написал для вывода CSS в разделе заголовка представления, чтобы указать состояние для конкретной страницы (если это имеет смысл, вроде как категория будет выделена на странице продуктов).

Итак, на мой взгляд, у меня есть эти две строки:

<% var onState = ViewData["OnState"].ToString(); %>
<%= Html.OutputOnState(onState) %>

Это очень хорошо выполняет то, что мне нужно. CSS жестко закодирован в помощнике, так как это небольшой сайт, поэтому я уверен, что есть лучший способ сделать это.

person Blair Scott    schedule 11.06.2009

arrow_upward
0
arrow_downward

Я делаю что-то похожее на следующий упрощенный пример ;-)

Контроллер:

public ActionResult Index()
{
    ViewData["MainMenuOn"] = "Home";
    return View();
}

public ActionResult About()
{
    ViewData["MainMenuOn"] = "About";
    return View();
}

public ActionResult Contact()
{
    ViewData["MainMenuOn"] = "Contact";
    return View();
}

Вид:

<ul id="main-menu">
    <li class="<%= Html.MainMenuOn("Home") %>">... action link for home action ...</li>
    <li class="<%= Html.MainMenuOn("About") %>">... action link for about action ...</li>
    <li class="<%= Html.MainMenuOn("Contact") %>">... action link for contact action ...</li>
</ul>

Вспомогательное расширение:

public static string MainMenuOn(this HtmlHelper html, string menuItem)
{
    if ((html.ViewData["MainMenuOn"] != null) && (html.ViewData["MainMenuOn"] == menuItem))
        return "on";

    return "";
}

Тогда ваш css должен быть довольно простым

ul#main-menu li
{
    background: green;
}

ul#main-menu li.on
{
    background: blue;
}

Есть много способов снять шкуру с этого кота... в зависимости от ваших потребностей я бы начал искать разные способы реализации расширения HtmlHelper.

HTHs, Чарльз

person Charlino    schedule 11.06.2009