在 ASP.NET MVC 中更改所选选项卡图像的最简单方法是什么？

Question

我见过这个问题，设置活动选项卡的简单方法，但是我不确定这是否是最佳解决方案。

我想看看其他人如何在 ASP.NET MVC 的视图/控制器中处理选项卡选择。

在 ASP.NET MVC 中实现可选选项卡的最简单方法是什么？ 我想避免使用 javascript 方法，以允许未启用 js 的浏览器仍然看到所选选项卡。

Answer 1

编辑：从上面开始，这不是我所做的，这是我使用的两种方法的非工作组合。

我必须处理一页上两个不同位置的状态。 第一种方法是我将 CSS 添加到视图中以将选项卡更改为正确的样式。 我要做的第二件事是使用 ViewData 给我一个变量，我将其传递给我编写的帮助程序，以在视图的头部分输出 CSS，以指示特定于页面的状态（如果这有意义的话，有点像一个类别将在产品页面上突出显示）。

所以在我看来，我有这些台词：

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

这很好地实现了我所追求的目标。 CSS 被硬编码到助手中，因为这是一个小站点，所以我确信有更好的方法来做到这一点。

Answer 2

我在简化的示例中做了类似于以下的操作；-)

控制器：

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 扩展。

HTH，
查尔斯