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

我能够从数据库创建两级菜单我如何才能使它达到三级或更高我见过很多教程，但他们一切都复杂得多这里就是我做这个迄今所做在asp.net中将菜单从二级扩展到三级MVC

我的行动

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>

来源

2016-09-26 Dummy

您需要从分层模型开始，以便您可以使用递归生成嵌套的菜单级别。然后你可以使用扩展方法（参考[这个答案]（http://stackoverflow.com/questions/27146524/how-to-render-singly-linked-list-in-mvc-view-page/27147744#27147744）为例）或递归的@ @ helper方法或部分视图来生成html –

@StephenMuecke好吧我会试试看 – Dummy

这是我怎么实现的三个层次创建的所有菜单的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> 
     } 
    } 
}

来源

2016-09-26 08:23:08 Dummy

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

回答

相关问题