我有一个使用MvcSiteMapProvider生成的菜单,使用帮助程序进行引导和路由:
Controller Home:
[MvcSiteMapNode(Title = "Home", Key = "home")]
public ActionResult Index()
{
return View(model);
}
控制器其他:
[Route("mypageview", Name = "mypage")]
[MvcSiteMapNode(Title = "My Page", ParentKey = "home", Key = "mypage")]
public ActionResult mypage()
{
mymodel model = .....
return View(model);
}
助手:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
@foreach (var node in Model.Nodes)
{
if (node.Children.Any())
{
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">@node.Title<strong class="caret"></strong></a>
<ul class="dropdown-menu">
@for (int i = 0; i < node.Children.Count; i++)
{
<li>@Html.DisplayFor(x => node.Children[i])</li>
}
</ul>
</li>
}
else
{
<li>
<a href="@node.Url" class="dropdown-toggle" data-toggle="dropdown">@node.Title</a>
</li>
}
}
</ul>
</div>
布局视图:
@Html.MvcSiteMap().Menu("BootstrapMenuHelperModel")
所有菜单项都完美运行,下拉菜单也是如此。他们都在导航到正确的位置。但是,菜单的“主页”按钮(第一个)不会导航到索引。
我已经尝试将索引包含在路由中,但除了破坏网站之外什么也没做。
答案 0 :(得分:0)
这是bootstrap的限制。由于它使用触摸屏,AFAIK无法使用打开子菜单的菜单项导航到页面。在触摸屏设备上,无法分辨用户何时打开子菜单与导航到当前菜单项的位置,因此唯一可用的操作是打开和关闭子菜单。
有一些known workarounds,但我没有尝试过,所以无法告诉你与MvcSiteMapProvider
一起使用的最佳解决方案是什么。我只想说这对MvcSiteMapProvider
来说根本不是问题,所以你可能想问一下bootstrap社区该做什么。
答案 1 :(得分:0)
我通过向没有子节点的节点添加URL来解决这个问题,onclick在子节点上打开子菜单作为标准:
@foreach (var node in Model.Nodes)
{
if (node.Children.Any())
{
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">@node.Title<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>@Html.DisplayFor(x => node)</li>
@for (int i = 0; i < node.Children.Count; i++)
{
<li>@Html.DisplayFor(x => node.Children[i])</li>
}
</ul>
</li>
}
else
{
<li>
<a href="@node.Url">@node.Title</a>
</li>
}
}
对于第一次像我这样做的人,我还添加了一个订单标签,按照我想要的顺序排列我的菜单项:
[MvcSiteMapNode(Title = "mytitle",
ParentKey = "home",
Key = "experiencevenuesandcircuits",
Order = 5)]