ASP.NET MVC动态设置CSS Class以根据路由列出项目

Question

我正在查看StackOverflow网站,我注意到有一个Class="youarehere"属性设置为活动视图的按钮.这导致橙色造型而不是灰色造型.

谁能告诉我他们是怎么做到的？基于URL动态设置类的最简单方法是什么？

Answer 1

为这些按钮编写html帮助程序可能是一种方法.假设设置了标准路由:

routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
    "Default",
    "{controller}/{action}/{id}",
    new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);

这是助手的样子:

public static MvcHtmlString MyButton(this HtmlHelper htmlHelper, string id, string text)
{
    var button = new TagBuilder("input");
    button.MergeAttribute("type", "button");
    button.MergeAttribute("value", text);
    // get the id from the current route:
    var routeId = htmlHelper.ViewContext.RouteData.Values["id"] as string;
    if (id == routeId)
    {
        button.MergeAttribute("class", "active");
    }
    return MvcHtmlString.Create(button.ToString(TagRenderMode.SelfClosing));
}

最后添加到您的视图:

<%= Html.MyButton("questions", "Questions") %>
<%= Html.MyButton("tags", "Tags") %>
<%= Html.MyButton("users", "Users") %>

为了进一步改进帮助程序,您可以添加包含操作的其他参数,以及单击此按钮时将重定向到的控制器.