将asp.net MVC中的菜单从二级扩展到三级

本文关键字：扩展到 三级 二级 net asp MVC 菜单 | 更新日期: 2023-09-27 18:08:59

我能够从数据库中制作两个级别的菜单，我怎么能使它达到三个级别或更多我看过很多教程，但它们都太复杂了以下是我到目前为止所做的

我的行动
 public ActionResult SideMenu()
        {
            ViewBag.MenuLevelTest = Db
                .Menus
                .Where(menu => menu.ParentId == null)
                .ToList();
            return PartialView("_SideMenu");
        }

我的观点

<ul class="page-sidebar-menu  page-header-fixed page-sidebar-menu-hover-submenu " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">

    @foreach (var menuLevelTest in ViewBag.MenuLevelTest)
    {
        <li class="nav-item start">
            <a href="javascript:;" class="nav-link nav-toggle">
                <i class="icon-home"></i>
                <span class="title">@menuLevelTest.Name</span>
                <span class="arrow"></span>
            </a>
            @if (menuLevelTest.Menu1.Count > 0)
            {
                <ul class="sub-menu">
                    @foreach (var menuLevelTest2 in menuLevelTest.Menu1)
                    {
                        <li class="nav-item start ">
                            <a href="index.html" class="nav-link ">
                                <i class="icon-bar-chart"></i>
                                <span class="title">@menuLevelTest2.Name</span>
                            </a>
                        </li>
                    }
                </ul>
            }
        </li>
    }
</ul>

我试过这样扩展它，但它不起作用，最简单的方法是什么

<ul class="page-sidebar-menu  page-header-fixed page-sidebar-menu-hover-submenu " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
    @foreach (var menuLevelTest in ViewBag.MenuLevelTest)
    {
        <li class="nav-item start">
            <a href="javascript:;" class="nav-link nav-toggle">
                <i class="icon-home"></i>
                <span class="title">@menuLevelTest.Name</span>
                <span class="arrow"></span>
            </a>
            @if (menuLevelTest.Menu1.Count > 0)
            {
                <ul class="sub-menu">
                    @foreach (var menuLevelTest2 in menuLevelTest.Menu1)
                    {
                        <li class="nav-item">
                            <a href="javascript:;" class="nav-link nav-toggle">
                                <i class="icon-bar-chart"></i>
                                <span class="title">@menuLevelTest2.Name</span>
                            </a>
                    @if (menuLevelTest.Menu2.Count > 0)
                    {
                        <ul class="sub-menu">
                            @foreach (var menuLevelTest3 in menuLevelTest.Menu2)
                            {
                                <li class="nav-item">
                                    <a href="javascript:;" class="nav-link nav-toggle">
                                        <i class="icon-bar-chart"></i>
                                        <span class="title">@menuLevelTest3.Name</span>
                                    </a>
                                </li>
                            }
                        </ul>
                    }
                        </li>
                    }
                </ul>
            }
        </li>
    }
</ul>

将asp.net MVC中的菜单从二级扩展到三级

我就是这样完成这三个关卡的创建一个BaseController得到了所有菜单的列表

 public BaseController()
    {
        ViewBag.Menu = MenuList();
    }
    private IList<Menu> MenuList()
    {
        var list = Db.Menus.ToList();
        return list;
    }

这是我的剃刀为partial View 

@{
    List<MisNew.Web.EntityModel.Menu> menuList = ViewBag.Menu;
}
<ul class="menu page-sidebar-menu  page-header-fixed page-sidebar-menu-hover-submenu " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
    @foreach (var mp in menuList.Where(p => p.ParentId == null))
    {
        <li class="@mp.ListCss">
            <a href="#" class="@mp.HyperLinkCss">
                <i class="@mp.IconCss"></i>
                <span class="title">@mp.Name</span>
                <span class="arrow"></span>
            </a>
            @if (menuList.Count(p => p.ParentId == mp.Id) > 0)
            {
                @:<ul class="sub-menu">
        }
            @RenderMenuItem(menuList, mp)
            @if (menuList.Count(p => p.ParentId == mp.Id) > 0)
            {
                @:</ul>
        }
        </li>
    }
</ul>

@helper RenderMenuItem(List<MisNew.Web.EntityModel.Menu> menuList, MisNew.Web.EntityModel.Menu mi)
{
foreach (var cp in menuList.Where(p => p.ParentId == mi.Id))
{

        @:<li class="@cp.ListCss">
    <a href="~/@cp.Url">
        <i class="@cp.IconCss"></i>
        <span class="title">@cp.Name</span>
        <span class="arrow"></span>
    </a>
    if (menuList.Count(p => p.ParentId == cp.Id) > 0)
    {
            @:<ul class="sub-menu">
        }
        @RenderMenuItem(menuList, cp)
    if (menuList.Count(p => p.ParentId == cp.Id) > 0)
    {
            @:</ul>
      }
    else
    {
            @:</li>
      }
    }
}
相关文章：