Добавить третий уровень в меню динамического аккордеона MVC 5

Question

Я использовал следующий код для создания динамического меню. Я нашел его в http://www.dotnetfox.com/articles/dynamic-accordion-menu-or-vertical-menu-using-jquery-in-Asp-Net-mvc-1123.aspx

Моя модель

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
namespace Accordion_Menu_MVC.Models 
{ 
public class MenuModel 
{ 
    public List<MainMenu> MainMenuModel { get; set; } 
    public List<SubMenu> SubMenuModel { get; set; } 
} 
public class MainMenu 
{ 
    public int ID; 
    public string MainMenuItem; 
    public string MainMenuURL; 
} 
public class SubMenu 
{ 
    public int MainMenuID; 
    public string SubMenuItem; 
    public string SubMenuURL; 
} 
} 

Мой контроллер

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using Accordion_Menu_MVC.Models; 
namespace Accordion_Menu_MVC.Controllers 
{ 
public class HomeController : Controller 
{ 
    // 
    // GET: /Home/ 
    public ActionResult Index() 
    { 
     MenuModel ObjMenuModel = new MenuModel(); 
     ObjMenuModel.MainMenuModel = new List<MainMenu>(); 
     ObjMenuModel.MainMenuModel = GetMainMenu(); 
     ObjMenuModel.SubMenuModel = new List<SubMenu>(); 
     ObjMenuModel.SubMenuModel = GetSubMenu(); 
     return View(ObjMenuModel); 
    } 
    public List<MainMenu> GetMainMenu() 
    { 
     List<MainMenu> ObjMainMenu = new List<MainMenu>(); 
     ObjMainMenu.Add(new MainMenu { ID = 1, MainMenuItem = "Mobile", MainMenuURL = "http://www.google.com" }); 
     ObjMainMenu.Add(new MainMenu { ID = 2, MainMenuItem = "Speaker", MainMenuURL = "#" }); 
     ObjMainMenu.Add(new MainMenu { ID = 3, MainMenuItem = "Watch", MainMenuURL = "#" }); 
     ObjMainMenu.Add(new MainMenu { ID = 4, MainMenuItem = "Clothes", MainMenuURL = "#" }); 
     return ObjMainMenu; 
    } 
    public List<SubMenu> GetSubMenu() 
    { 
     List<SubMenu> ObjSubMenu = new List<SubMenu>(); 
     ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = "Apple", SubMenuURL = "#" }); 
     ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = "Samsung", SubMenuURL = "#" }); 
     ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = "Nokia", SubMenuURL = "#" }); 
     ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = "Motorola", SubMenuURL = "#" }); 
     return ObjSubMenu; 
     } 
     } 
    } 

мой взгляд

@model Accordion_Menu_MVC.Models.MenuModel 
@{ 
ViewBag.Title = "Dynamic Accordion Menu Using jQuery in ASP.NET MVC"; 
} 
<link href="Css/styles.css" rel="stylesheet" type="text/css" /> 
<script src="http://code.jquery.com/jquery-latest.min.js"  type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#accordian h3").click(function() { 
     $("#accordian ul ul").slideUp(); 
     if (!$(this).next().is(":visible")) { 
      $(this).next().slideDown(); 
     } 
    }); 
}); 
</script> 
@using (Html.BeginForm("Index", "Home")) 
    { 
<div id="accordian"> 
    <ul> 
       <li> 
       @{ 
    foreach (var MenuItem in Model.MainMenuModel) 
    { 
    var SubMenuItem = Model.SubMenuModel.Where(m => m.MainMenuID == MenuItem.ID); 

     <h3><a href="@MenuItem.MainMenuURL"> @MenuItem.MainMenuItem </a></h3> 

     if (SubMenuItem.Count() > 0) 
     { 
      <ul> 
         @foreach (var SubItem in SubMenuItem) 
         { 
          <li><a h href='@SubItem.SubMenuURL'>@SubItem.SubMenuItem</a></li> 
         } 
      </ul> 
     } 

     } 
    } 
    </ul> 
    </div> 
    } 

Мой Css

<style> 
/*Basic reset*/ 
* {margin: 0; padding: 0;} 
body { 
    background: White; 
    font-family: Nunito, arial, verdana; 
} 
#accordian { 
    background: #004050; 
    width: 250px; 
    margin: 100px auto 0 auto; 
    color: white; 
    /*Some cool shadow and glow effect*/ 
    box-shadow: 
       0 5px 15px 1px rgba(0, 0, 0, 0.6), 
       0 0 200px 1px rgba(255, 255, 255, 0.5); 
    } 
/*heading styles*/ 
#accordian h3 { 
    font-size: 12px; 
    line-height: 34px; 
    padding: 0 10px; 
    cursor: pointer; 
    /*fallback for browsers not supporting gradients*/ 
    background: #003040; 
    background: linear-gradient(#003040, #002535); 
    } 
/*heading hover effect*/ 
#accordian h3:hover { 
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.7); 
} 
    /*iconfont styles*/ 
    #accordian h3 a { 
    color: white; 
    text-decoration: none; 
    font-size: 12px; 
    line-height: 27px;  
    padding: 0 15px; 
    /*transition for smooth hover animation*/ 
    } 
#accordian h3 a:hover { 
color:#E1E1E1; 
    } 
/*list items*/ 
#accordian li { 
    list-style-type: none; 
    background:#4D6974; 
} 
/*links*/ 
    #accordian ul ul li a { 
    color: white; 
    text-decoration: none; 
    font-size: 11px; 
    line-height: 27px; 
    display: block; 
    padding: 0 15px; 
    /*transition for smooth hover animation*/ 
    transition: all 0.15s; 
     } 
    /*hover effect on links*/ 
    #accordian ul ul li a:hover { 
    background: #003545; 
    border-left: 5px solid lightgreen; 
    } 
    /*Lets hide the non active LIs by default*/ 
    #accordian ul ul { 
    display: none; 
    } 
    #accordian li.active ul { 
     display: block; 
    } 
    </style> 

Может кто-нибудь помочь мне в том, как добавить третий уровень в это меню

Answer 1

В подобном сценарии я использовал композитный шаблон для создания меню. Таким образом, вы можете иметь подменю до любого уровня. Таким образом, у меня есть элемент, который может быть либо меню элемента, либо меню, содержащее подменю.

Вид модель как:

public class UserMenuOptions 
{ 
    public bool IsSubMenu{get;set;} 
    public string Text{get;set;} 
    public string URL{get;set;} 
    public string Page{get;set;} 
    public List<UserMenuOptions> SubMenuList{get;set;} 
    public UserMenuOptions(MenuItem item) 
     { 
      Text = item.MenuText; 
      URL = item.Controller; 
      Page = item.Action; 
      IsSubMenu = false; 
     } 

     public UserMenuOptions(string text) 
     { 
      SubMenuList = new List<UserMenuOptions>(); 
      MenuText = text; 
      IsSubMenu = true; 
     } 

     public void AddSubMenuItem(UserMenuOptions u) 
     { 
      this.SubMenuList.Add(u); 
     } 
    } 

Извините за глупое наименование.

И MenuItem означает основные свойства меню, которые могут быть получены с помощью бизнес-логики:

public sealed class MenuItem 
    { 
     public String MenuText { get; set; }   

     public String Controller { get; set; } 

     public String Action { get; set; } 
    } 

И тогда мы частичный вид добавляется на страницы, где мы хотим меню:

@model List<UserMenuOptions> 

<ul class="dropdown-menu"> 
     @foreach (UserMenuOptions mo in Model) 
     { 
      if(!mo.IsSubMenu){ 
       <li class="dropdown">@Html.ActionLink(mo.Text,mo.Page,mo.URL)</li> 
      } 
      else 
      { 
      <li class="dropdown-submenu" data-toggle="dropdown"> 
       <a href="#">@mo.Text</a> 
       @{Html.RenderPartial("thisSamePartialView", mo.SubMenuList);} 
      </li> 
      } 
     } 
</ul> 

ОК, поэтому у нас есть имена ссылок и URL-адресов ссылок из некоторой бизнес-логики.

Теперь мы можем построить List (давайте назовите его mainM) UserMenuOptions, который будет верхним уровнем структуры меню. Теперь у нас есть основной список в меню, каждый элемент может быть прямой ссылкой или иметь подменю.

Для создания экземпляра UserMenuOptions в качестве единичного меню мы можем использовать первый конструктор, чтобы он имел URL-адрес. И если элемент имеет подменю, мы используем второй конструктор и AddSubMenuItem Methods для добавления узлов, которые будут отображаться в качестве подменю.

Мы можем повторить последний шаг для каждого элемента в каждом подменю, чтобы добавить подменю следующего уровня.

И некоторые укладка будет делать трюк. Первоначально нам нужно передать список основных заголовков на этот частичный.

Надеюсь, это поможет.