MVC 3 中突出显示菜单和子菜单？

Question

我正在尝试创建一个突出显示当前页面的菜单。我在这里找到了一些答案，但问题是我看不到有人处理子菜单。

这里有一个看起来非常简单的答案： 活动菜单项 - asp. net mvc3 母版页

但据我所知，如果您单击子菜单，该母版页将仅突出显示子菜单项。我希望突出显示子菜单项及其顶部菜单中的父菜单项。

例如，如果有人单击“服务”，然后单击“咨询”，我希望这两个按钮都突出显示 - 顶部菜单中的“服务”和子菜单中的“咨询”。我该怎么做？

顺便说一句，我希望能够使用 CSS 将子菜单呈现为下拉菜单，也可以呈现为侧边栏。如何获取子菜单 ul 并将其呈现为侧边栏？

Answer 1

这是一个简单的东西，你可以根据你的需要修改它，但基础知识就在这里。
http://developerstyle.posterous.com/highlighting-current -page-in-mvc-3-slick-tric

上面的链接可能会在Posterous关闭后立即关闭，这是一个更新链接
http://bhavinsurela.com/highlighting-current-page- in-mvc-3-slick-tric/

Answer 2

我有一个解决方案，我在 SO 中也找到了部分解决方案并进行了修改，但仍有待改进，以便处理任意数量的子菜单......现在它适用于子菜单。

namespace PhotoBuss.Web.Back.Controllers
{
public class NavigationController : BaseAdministrationController
{
    //
    // GET: /Common/

    [ChildActionOnly]
    public ActionResult HeaderMenu()
    {
        // http://stackoverflow.com/questions/4653226/asp-net-mvc-menu-selected-item

        var items = new List<MenuItemViewModel>
       {
           new MenuItemViewModel{ Text = "home", Action="Index", Controller="Administration", Selected=false},
           new MenuItemViewModel{Text = "manage", Action="Index", Controller="Manage", Selected=false,
           SubMenu = 
           new List<MenuItemViewModel>
           { 
               new MenuItemViewModel{ Text= "photos", Action="Index", Controller="Photos", Selected = false },
               new MenuItemViewModel { Text = "collections", Action="Index", Controller="Collections", Selected=false},
               new MenuItemViewModel { Text = "keywords", Action="Index", Controller="Keywords", Selected=false},
               new MenuItemViewModel { Text = "users", Action="Index", Controller="Users", Selected=false},
               new MenuItemViewModel { Text = "user groups", Action="Index", Controller="Roles", Selected=false}
           }
           },
           new MenuItemViewModel{Text="cms", Action="Index", Controller="CMS", Selected=false}
       };
        string action = ControllerContext.ParentActionViewContext.RouteData.Values["action"].ToString();
        string controller = ControllerContext.ParentActionViewContext.RouteData.Values["controller"].ToString();

        foreach (var item in items)
        {
            if (item.Controller == controller && item.Action == action)
            {
                item.Selected = true;
            }
            foreach(var subItem in item.SubMenu)
                if (subItem.Controller == controller && subItem.Action == action)
                {
                    item.Selected =
                    subItem.Selected = true;
                }
        }

        return PartialView(items);
    }
}

ViewModel

public class MenuItemViewModel
{
    public MenuItemViewModel()
    {
        SubMenu = new List<MenuItemViewModel>();
    }

    public string Text { get; set; }
    public string Controller { get; set; }
    public string Action { get; set; }
    public bool Selected { get; set; }

    public List<MenuItemViewModel> SubMenu { get; set; }
}
}

视图

    @model List<PhotoBuss.Web.Back.Models.Navigation.MenuItemViewModel>
    <link href="@Url.Content("~/Areas/Admin/Content/CSS/menu.css")" rel="stylesheet" type="text/css" />
    <div class="headerMenu">
        <ul>
            @foreach (var menuItem in Model)
            {
                <li>@Html.ActionLink(menuItem.Text, menuItem.Action, menuItem.Controller, null,
        new { @class = menuItem.Selected ? "selected" : "" })
                    @if (menuItem.SubMenu.Count >0)
                    {
                        <ul class="@(menuItem.Selected ? "selected" : "")">

                            @foreach (var subMenu in menuItem.SubMenu)
                            {
                                <li>@Html.ActionLink(subMenu.Text, subMenu.Action, subMenu.Controller, null,
        new { @class = subMenu.Selected ? "selected" : "" })</li>
                            }
                        </ul>
                    }
                </li>
            }
        </ul>
    </div>

CSS 我现在正在使用它：

    .headerMenu *
    {
        padding: 0;
        margin: 0;
    }
    .headerMenu
    {
        position: relative;
        background-color: #78C8FA;
        width: 100%;
        text-align: center;
        color: #FFFFFF;
        clear: both;
        float: left;
        margin-top: 10px;
    }
    .headerMenu ul
    {
        display: block;
        list-style: none;
        line-height: 3em;
        height: 3em;
    }

    .headerMenu ul li
    {
        display: inline-block;
        margin-left: 15px;
        margin-right: 15px;
    }

    .headerMenu ul li a
    {
        display: block;
        text-decoration: none;
        color: white;
        font-size: 1.5em;
        padding-left:2em;
        padding-right:2em;
    }

    .headerMenu ul li a:visited
    {
        color: white;
    }

    .headerMenu ul li a:hover, .menu ul li
    {
        color: #333333;
    }
    .selected
    {
        color: #333333 !important;
        display:block !important;
        background-color: #999999;
    }

    .headerMenu ul ul
    {
        display: none;
        position: absolute;
        width: 100%;
        right: 50%;
        left: 0;
        background-color: #999999;
    }

    .headerMenu li:hover > ul, .selected 
    {
        display: block;
    }

Answer 3

只需使用 ViewContext.RouteData.Values 字典（特别是 Action 和 Controller 键）即可非常简单地确定要突出显示的菜单元素。

这是一个快速帮助方法：

public static string IsSelected(this RouteValueDictionary dictionary, string controller, string action)
{
    string cssClass = "selected";
    string routeValueController = dictionary["Controller"] as string;
    string routeValueAction = dictionary["Action"] as string;

    return string.IsNullOrEmpty(action) ? 
        routeValueController == controller ? cssClass : string.Empty : 
        routeValueController == controller && routeValueAction == action ? cssClass : string.Empty;
}

并且可以从这样的视图中使用：

<ul id="menu">
    <li class="@this.ViewContext.RouteData.Values.IsSelected("Default", "Index")">
        <a href="@Url.Action("Index", "Default")">Accueil</a>
    </li>
</ul>

由于我不熟悉您的应用程序结构，因此很难进入更具体的解决方案，但这应该会给您一个开始的想法。

Answer 4

这是一个处理子菜单并突出显示它的示例。

http://users.tpg.com.au/j_birch/plugins/superfish/ #sample4

它使用 superfish-navbar.css，您可以在其中看到它是如何完成的。
这是一个非常好的菜单插件。