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

【问题标题】：What is the simplest way to change the image of the selected tab in ASP.NET MVC?在 ASP.NET MVC 中更改所选选项卡的图像的最简单方法是什么？
【发布时间】：2009-06-11 20:01:47
【问题描述】：

我已经看到了这个问题，An easy way to set the active tab，但是我不确定这是一个最佳解决方案。

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

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

【问题讨论】：

标签： asp.net-mvc navigation tabs

【解决方案1】：

编辑：从头开始，这不是我所做的，这是我使用的两种方法的无效组合。

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

所以在我看来，我有这两条线：

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

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

【讨论】：

【解决方案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，查尔斯

【讨论】：