向动态手风琴菜单 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。

现在我们可以构造一个UserMenuOptions 的List（我们将其命名为mainM），这将是菜单结构的顶层。现在我们在菜单上有了主列表，每个项目要么是直接链接，要么有一个子菜单。

为了将 UserMenuOptions 实例化为单元菜单，我们可以使用第一个构造函数，使其具有 URL。如果项目有子菜单，我们使用第二个构造函数和 AddSubMenuItem 方法添加将显示为子菜单的节点。

我们可以对每个子菜单中的每个项目重复上一步以添加下一级子菜单。

并且一些样式可以解决问题。最初我们需要将主标题列表传递给这个部分。

希望对你有帮助。