为动态手风琴菜单MVC 5添加第三级

时间：2016-02-16 07:33:16

标签： asp.net-mvc accordion

我使用以下代码创建动态菜单。我在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>

有人可以帮助我如何在此菜单中添加第三级

1 个答案:

答案 0 :(得分：1)

在类似的场景中，我使用Composite模式创建菜单。通过这种方式，您可以拥有任何级别的子菜单。所以我有一个Item，可以是单元菜单，也可以是包含子菜单的菜单。

视图模型如： 

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方法添加将显示为子菜单的节点。

我们可以为每个子菜单中的每个项重复最后一步，以添加下一级子菜单。

PicToExplain

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

希望它有所帮助。

相关问题
最新问题