三级菜单项Boostrap MVC
本文关键字：菜单项 Boostrap MVC 三级 | 更新日期: 2023-09-27 18:29:13
我有一个菜单项，如下所示。我正试图把这些东西绑在我的剃刀视野里。我正确地获得了第二级菜单项，但如何获得第三级菜单项。
public IEnumerable<Navbar> adminMenuItems()
{
var menu = new List<Navbar>();
menu.Add(new Navbar { Id = 1, nameOption = "Dashboard", controller = "Home", action = "DashBoard", imageClass = "fa fa-dashboard fa-fw", status = true, isParent = false, parentId = 0 });
menu.Add(new Navbar { Id = 2, nameOption = "Maintenance", controller = "MaintenancePlan", action = "Index", imageClass = "fa fa-wrench fa-fw", status = true, isParent = true, parentId = 0 });
menu.Add(new Navbar { Id = 3, nameOption = "Schedules", controller = "WorkOrder", action = "Index", imageClass = "fa fa-briefcase fa-fw", status = true, isParent = false, parentId = 2 });
menu.Add(new Navbar { Id = 4, nameOption = "Work Orders", controller = "WorkOrder", action = "Index", imageClass = "fa fa-briefcase fa-fw", status = true, isParent = true, parentId = 2 });
menu.Add(new Navbar { Id = 5, nameOption = "Assigned", controller = "WorkOrder", action = "Index", imageClass = "fa fa-briefcase fa-fw", status = true, isParent = false, parentId = 4 });
menu.Add(new Navbar { Id = 6, nameOption = "Company", controller = "WorkOrder", action = "Index", imageClass = "fa fa-briefcase fa-fw", status = true, isParent = false, parentId = 4 });
menu.Add(new Navbar { Id = 7, nameOption = "Calender", controller = "WorkOrder", action = "Index", imageClass = "fa fa-briefcase fa-fw", status = true, isParent = false, parentId = 2 });
menu.Add(new Navbar { Id = 8, nameOption = "Quotations", controller = "WorkOrder", action = "Index", imageClass = "fa fa-briefcase fa-fw", status = true, isParent = false, parentId = 2 });
menu.Add(new Navbar { Id = 9, nameOption = "Assets", controller = "WorkOrder", action = "Index", imageClass = "fa fa-briefcase fa-fw", status = true, isParent = false, parentId = 2 });
menu.Add(new Navbar { Id = 10, nameOption = "Site", controller = "WorkOrder", action = "Index", imageClass = "fa fa-briefcase fa-fw", status = true, isParent = false, parentId = 2 });
return menu.ToList();
}
"工单"是"维护"下的一个菜单项。"已分配"answers"公司"是菜单项"工单"。
以下代码将绑定我的二级菜单项。我该如何为三级菜单项做这件事？。。请帮帮我。。非常感谢。
@foreach (var item in Model)
{
if (item.isParent == false && item.parentId == 0)
{
<li><a href="@Url.Action(item.action, item.controller)"><i class="@item.imageClass"></i> @item.nameOption</a></li>
}
else
{
if (item.isParent == true)
{
<li>
<a href="#"><i class="@item.imageClass"></i> @item.nameOption<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
@foreach (var child in Model.Where(p => p.parentId == item.Id))
{
if (child.controller == null)
{
<li><a href="#">@child.nameOption</a></li>
}
else
{
<li><a href="@Url.Action(child.action, child.controller)">@child.nameOption</a></li>
}
}
</ul>
</li>
}
}
}
</ul>
使用一个可以递归调用的辅助函数。
你需要更改你的导航栏类，使其包含导航栏列表
public class NavBar
{
/// <summary>
/// Gets or Sets the Children
/// </summary>
public virtual ICollection<NavBar> Children { get; set; }
.....
}
然后创建这样的菜单
menu.Add(new Navbar
{
Id = 2, nameOption = "Maintenance", controller = "MaintenancePlan", action = "Index", imageClass = "fa fa-wrench fa-fw", status = true, isParent = true, parentId = 0,
childeren = new Collection<Navbar>
{
new Navbar{..., Children = new Collection<NavBar>
{
...
}},
new Navbar{...}
}
});
在你的拉泽看来，有些事情是这样的。
@{
foreach (var item in Model)
{
createMenuItem(item);
}
}
@helper createMenuItem(Navbar item)
{
if (item.Children.Any())
{
foreach (var child in item.Children)
{
createMenuItem(child);
}
}
<li>...</li>
}
我相信有很多方法可以做到这一点。我遵循了以下方法。
@foreach (var item in Model)
{
if (item.isParent == false && item.parentId == 0)
{
<li><a href="@Url.Action(item.action, item.controller)"><i class="@item.imageClass"></i> @item.nameOption</a></li>
}
else
{
if (item.isParent == true && item.parentId == 0)
{
<li>
<a href="#"><i class="@item.imageClass"></i> @item.nameOption<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
@foreach (var child in Model.Where(p => p.parentId == item.Id))
{
if (child.controller == null)
{
<li><a href="#">@child.nameOption</a></li>
}
else
{
if (child.isParent == true)
{
<li>
<a href="@Url.Action(child.action, child.controller)"><i class="@child.imageClass"></i> @child.nameOption<span class="fa arrow"></span></a>
<ul class="nav nav-third-level">
@foreach (var childInside in Model.Where(p => p.parentId == child.Id))
{
if (childInside.controller == null)
{
<li><a href="#">@childInside.nameOption</a></li>
}
else
{
<li><a href="@Url.Action(child.action, child.controller)">@childInside.nameOption</a></li>
}
}
</ul>
</li>
}
else
{
<li><a href="@Url.Action(child.action, child.controller)">@child.nameOption</a></li>
}
}
}
</ul>
</li>
}
}
}
我会保持收藏不变。