Bootstrap是目前流行的前端装逼框架,可惜ASP.NET MVC没有现成的Razor HTML Helper来做导航栏按钮(链接),一个很常见的需求是导航栏按钮根据当前的controller,action加上高亮。

在bootstrap的HTML里定义如下:

我们自定义一个Helper就能生成这样的HTML:

public static MvcHtmlString MenuLink(this HtmlHelper htmlHelper, 
    string linkText, string actionName, string controllerName, string[] highlightedActionNames = null)
{
    var currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action");
    var currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller");

    var builder = new TagBuilder("li")
    {
        InnerHtml = htmlHelper.ActionLink(linkText, actionName, controllerName).ToHtmlString()
    };

    if (controllerName == currentController &&
            (actionName == currentAction || 
                (null != highlightedActionNames && 
                highlightedActionNames.Contains(currentAction))))
    {
        builder.AddCssClass("active");
    }

    return new MvcHtmlString(builder.ToString());
}

highlightedActionNames控制哪些action要显示为active。

然后我们就可以用  @Html.MenuLink(...) 制作导航链接了。