MVC主菜单和选中的子菜单

时间:2011-01-26 09:36:54

标签: asp.net-mvc-3

我正在为MVC音乐商店应用程序创建一个菜单。目前它看起来像这样 As you can see I have the index view CSS selected not the About view

正如您所看到的,我选择了Home子级菜单,实际上我在关于视图。

我在主菜单中使用了Darins示例,并创建了一个类似于此的帮助程序类。

public static MvcHtmlString MenuLink(this HtmlHelper helper,
        string linkText, string actionName,
        string controllerName)
{
    string currentAction = helper.ViewContext.RouteData.GetRequiredString("action");
    string currentController = helper.ViewContext.RouteData.GetRequiredString("controller");

    //modified this to work whenever a view of the controller is selected
    //if (actionName == currentAction && controllerName == currentController)
    if (controllerName == currentController)
    {
        return helper.ActionLink(
            linkText,
            actionName,
            controllerName,
            null,
            new
            {
                @class = "active"
            });
    }
    return helper.ActionLink(linkText, actionName, controllerName);
}

注意我稍微更改了代码,因为我对动作名称不感兴趣。我发现这限制了我,主菜单不会在我想要的地方添加活动的CSS状态。

所以这对于顶级菜单来说是完美的,但是我对次级菜单有点困惑。我的html包含2个UL标签,如

    <nav id="main-nav">
        <ul>
            <li>@Html.MenuLink("Home", "Index", "Home")</li>
            <li>@Html.MenuLink("Store", "Index", "Store")</li>
            <li>@Html.MenuLink("Cart", "Index", "ShoppingCart")</li>
           <li>@Html.MenuLink("Admin", "Index", "StoreManager")</li>

        </ul>
    </nav>
</div>
<div id="page-subheader">
    <div class="wrapper">
        <nav id="sub-nav">
            <ul>
             <li>@Html.SubMenuLink("Home", "Index", "Home")</li>
            <li>@Html.SubMenuLink("About", "Index", "Home/About")</li>
           @*     <li class="active"><a href="@Url.Content("~")">Index</a></li>
                <li><a href="@Url.Content("~/Home/About")">About</a></li>*@
            </ul>
        </nav>
        <input placeholder="Search..." type="text" name="q" value="" />
    </div>
</div>

非常标准的HTML我也尝试创建另一个帮助器,如:

public static MvcHtmlString SubMenuLink(this HtmlHelper helper, 
        string linkText, string actionName,
        string controllerName)
{
    string currentAction = helper.ViewContext.RouteData.GetRequiredString("action");
    string currentController = helper.ViewContext.RouteData.GetRequiredString("controller");

    if (controllerName == currentController)
    {
        return helper.ActionLink(
            linkText,
            actionName,
            controllerName,
            null,
            new
            {
                @class = "active"
            });
    }
    return helper.ActionLink(linkText, actionName, controllerName);
}

但我真的不知道接下来该做什么。如果我在代码上设置了断点,我可以看到currentAction已作为About返回,currentController已作为Home返回,我只是有点不确定添加逻辑将活动的CSS类应用于子菜单。

有人可以帮忙吗?

1 个答案:

答案 0 :(得分:2)

您可以使用原始方法不变。我做的完全一样。

一点需要注意。我已经开始使用区域,这些方法不再有效。

public static MvcHtmlString SubMenuLink(this HtmlHelper helper, string linkText, string actionName,
                                       string controllerName)
{
    string currentAction = helper.ViewContext.RouteData.GetRequiredString("action");
    string currentController = helper.ViewContext.RouteData.GetRequiredString("controller");

    if (controllerName == currentController && actionName == currentAction)
    {
        return helper.ActionLink(
            linkText,
            actionName,
            controllerName,
            null,
            new
            {
                @class = "active"
            });
    }
    return helper.ActionLink(linkText, actionName, controllerName);
}