我正在尝试创建一个突出显示当前页面的菜单。我在这里找到了一些答案，但问题是我看不到有人处理子菜单。
这里有一个看起来非常简单的答案：active menu item - asp.net mvc3 master page
但据我所知，如果您单击子菜单，它将仅突出显示子菜单项。我希望突出显示子菜单项，以及顶部菜单中的父项。
例如如果有人单击服务，然后单击咨询，我希望这两个都突出显示 - 顶部菜单中的服务和子菜单中的咨询。我该怎么做？
顺便说一句，我希望能够使用 CSS 将子菜单呈现为下拉菜单，也可以将其呈现为侧边栏。如何获取子菜单并将其呈现为侧边栏？
【问题讨论】：
标签： asp.net asp.net-mvc-3 menu highlight
通过简单地使用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>
由于我不熟悉您的应用程序结构，很难找到更具体的解决方案，但这应该会给您一个开始的想法。
【讨论】：
这是一个简单的东西，你可以根据你的需要修改它，但基本在这里。 http://developerstyle.posterous.com/highlighting-current-page-in-mvc-3-slick-tric
posterous 关闭后，上面的链接可能会关闭，这是一个更新链接 http://bhavinsurela.com/highlighting-current-page-in-mvc-3-slick-tric/
【讨论】：
我有一个解决方案，我也部分地在 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);
}
}
视图模型
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;
}
【讨论】：
这是他们处理子菜单并突出显示它的示例。
http://users.tpg.com.au/j_birch/plugins/superfish/#sample4
它使用 superfish-navbar.css，您可以在其中看到它是如何完成的。 这是一个非常好的菜单插件。
【讨论】：