Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记

继续上一篇，针对Bootstrap Metronic菜单栏整理的笔记分享给大家，供大家参考，具体内容如下

1.简介
1)  .环境配置
2)  .提取页面
3）.动态生成菜单（无限级别树） 

2.系统环境配置
 项目需要程序数据支撑，这里选择MVC5.0+EF6.0[SQLSERVER]（不对MVC架构和SQLServer做出解读）
 运行环境：VS2013+MVC5.0+EF6.1+SQLServer2012
 解决方案名称：AppSolution 项目名称：App.Web(UI层)与App.Models(数据访问层) -直接访问模式
 提取theme下的所有文件到MVC的Content，提取admin的index.html到_Layout.cshtml来准备改造

3.创建数据库和表
数据库：AppDatabase
创建以下数据表，并创建AppDB.edmx 

USE [AppDatabase]
GO


SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

SET ANSI_PADDING ON
GO

CREATE TABLE [dbo].[SysModule](
 [ID] [varchar](50) NOT NULL, --主键ID
 [Name] [varchar](50) NOT NULL, --菜单名称
 [ParentID] [varchar](50) NULL, --上级ID
 [Url] [varchar](200) NULL, --URL
 [Iconic] [varchar](200) NULL, --图标
 [Sort] [int] NULL, --排序
 [Enable] [bit] NOT NULL, --是否显示
 [CreateTime] [datetime] NULL, --创建时间
 [IsLast] [bit] NOT NULL --是否最后一项
 ConSTRAINT [PK_SysModule] PRIMARY KEY CLUSTERED 
(
 [Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

SET ANSI_PADDING OFF
GO

ALTER TABLE [dbo].[SysModule] WITH NOCHECK ADD ConSTRAINT [FK_SysModule_SysModule] FOREIGN KEY([ParentID])
REFERENCES [dbo].[SysModule] ([Id])
GO

ALTER TABLE [dbo].[SysModule] NOCHECK ConSTRAINT [FK_SysModule_SysModule]
GO

人为造点数据

INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('0','root','root','Index','icon-settings',NULL,0,NULL,0)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('1','一级菜单01','0','Index','icon-settings',NULL,0,NULL,0)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('11','二级菜单01-01','1','Index','icon-settings',NULL,0,NULL,0)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('111','三级菜单01-01-01','11','Index','icon-link',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('112','三级菜单01-01-02','11','Index','icon-settings',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('12','二级菜单01-02','1','Index','icon-link',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('13','二级菜单01-03','1','Index','icon-link',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('2','一级菜单02','0','Index','icon-settings',NULL,0,NULL,0)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('21','二级菜单02-01','2','Index','icon-settings',NULL,0,NULL,0)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('211','三级菜单02-01-01','5','Index','icon-link',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('212','三级菜单02-01-02','5','Index','icon-link',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('22','二级菜单02-02','2','Index','icon-link',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('23','二级菜单02-03','2','Index','icon-link',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('3','一级菜单03','0','Index','icon-settings',NULL,0,NULL,0)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('31','二级菜单03-01','3','Index','icon-settings',NULL,0,NULL,0)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('311','三级菜单03-01-01','31','Index','icon-link',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('312','三级菜单03-01-02','31','Index','icon-link',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('32','二级菜单03-02','3','Index','icon-link',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('33','二级菜单03-03','3','Index','icon-link',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('4','一级菜单04','0','Index','icon-settings',NULL,0,NULL,0)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('41','二级菜单04-01','4','Index','icon-link',NULL,0,NULL,1)
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('42','二级菜单04-02','4','Index','icon-link',NULL,0,NULL,1)

(22 行受影响)

4.提取页面重要布局
 我们是后台系统所以我们保留top. left menu和foot3个部分
 我已经提取好了，请复制

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 
 
 

 
 
 
 7
 
 
 

 

 12 pending notifications
 view all
 
 

 

  

  
  just now
  
  
  
  
  New user registered.
  
  
  
  

  
  3 mins
  
  
  
  
  Server #12 overloaded.
  
  
  
  

  
  10 mins
  
  
  
  
  Server #2 not responding.
  
  
  
  

  
  14 hrs
  
  
  
  
  Application error.
  
  
  
  

  
  2 days
  
  
  
  
  Database overloaded 68%.
  
  
  
  

  
  3 days
  
  
  
  
  A user IP blocked.
  
  
  
  

  
  4 days
  
  
  
  
  Storage Server #4 not responding dfdfdfd.
  
  
  
  

  
  5 days
  
  
  
  
  System Error.
  
  
  
  

  
  9 days
  
  
  

  
  Storage server failed.
  
  
  
 
 
 
 
 
 
 
 

 
 
 
 4
 
 
 

 

 You have 7 New Messages
 view all
 
 

 

  

  
  
  
  
  
  
  Lisa Wong
  
  Just Now 
  
  
  Vivamus sed auctor nibh congue nibh. auctor nibh auctor nibh...
  
  
  
  

  
  
  
  
  
  
  Richard Doe
  
  16 mins 
  
  
  Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh auctor nibh...
  
  
  
  

  
  
  
  
  
  
  Bob Nilson
  
  2 hrs 
  
  
  Vivamus sed nibh auctor nibh congue nibh. auctor nibh auctor nibh...
  
  
  
  

  
  
  
  
  
  
  Lisa Wong
  
  40 mins 
  
  
  Vivamus sed auctor 40% nibh congue nibh...
  
  
  
  

  
  
  
  
  
  
  Richard Doe
  
  46 mins 
  
  
  Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh auctor nibh...
  
  
  
 
 
 
 
 
 
 
 

 
 
 
 3
 
 
 

 

 You have 12 pending tasks
 view all
 
 

 

  

  
  
  New release v1.2 
  30%
  
  
  40% Complete
  
  
  
  

  
  
  Application deployment
  65%
  
  
  65% Complete
  
  
  
  

  
  
  Mobile app release
  98%
  
  
  98% Complete
  
  
  
  

  
  
  Database migration
  10%
  
  
  10% Complete
  
  
  
  

  
  
  Web server upgrade
  58%
  
  
  58% Complete
  
  
  
  

  
  
  Mobile development
  85%
  
  
  85% Complete
  
  
  
  

  
  
  New UI release
  38%
  
  
  38% Complete
  
  
  
 
 
 
 
 
 
 
 

 
 
 
 Nick
 
 
 
 

 

 
   My Profile
 
 
 

 
   My Calendar
 
 
 

 
   My Inbox 
  3
  
 
 
 

 
   My Tasks 
  7
  
 
 
 

 
 

 
   Lock Screen
 
 
 

 
   Log Out
 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 
 

 
 
 
 
 
 
 
 
 
 

 
 
 Multi Level Menu
 
 
 

 

 
   Item 1 
 
 

  

  
  
  Sample link 1 
  
  

  

   Sample link 1
  
  

   Sample link 1
  
  

   Sample link 1
  
  
  
  

   Sample link 1
  
  

   Sample link 2
  
  

   Sample link 3
  
 
 
 

 
   Item 2 
 
 

  

   Sample link 1
  
  

   Sample link 1
  
  

   Sample link 1
  
 
 
 

 
  
  Item 3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Modal title
 
 
 Widget settings form goes here
 
 
 Save changes
 Close
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 THEME COLOR
 
 

 

 
 

 
 

 
 

 
 

 
 

 
 
 
 
 
 Theme Style
 
 
 Square corners
 Rounded corners
 
 
 
 
 Layout
 
 
 Fluid
 Boxed
 
 
 
 
 Header
 
 
 Fixed
 Default
 
 
 
 
 Top Menu Dropdown
 
 
 Light
 Dark
 
 
 
 
 Sidebar Mode
 
 
 Fixed
 Default
 
 
 
 
 Sidebar Menu
 
 
 Accordion
 Hover
 
 
 
 
 Sidebar Style
 
 
 Default
 Light
 
 
 
 
 Sidebar Position
 
 
 Left
 Right
 
 
 
 
 Footer
 
 
 Fixed
 Default
 
 
 
 
 
 
 
 

 

 
 Home
 
 
 

 版面展示
 
 
 
 
 

 版面展示 reports & statistics
 
 
 
 @RenderBody()
 
 
 
 
 
 
 
 
 
 
 
 
 

 

 
 Users 2
 
 
 

 
 alerts 7
 
 
 

 
 More
 
 

 

  
   alerts
  
 
 

  
   Notifications
  
 
 

  
   Activities
  
 
 

 
 

  
   Settings
  
 
 
 
 
 
 
 
 
Staff
 

  

  
  8
  
  
  
  
Bob Nilson
  
  Project Manager
  
  
  
  

  
  
  
Nick Larson
  
  Art Director
  
  
  
  

  
  3
  
  
  
  
Deon Hubert
  
  CTO
  
  
  
  

  
  
  
Ella Wong
  
  CEO
  
  
  
 
 
Customers
 

  

  
  2
  
  
  
  
Lara Kunis
  
  CEO, Loop Inc
  
  
  Last seen 03:10 AM
  
  
  
  

  
  new
  
  
  
  
Ernie Kyllonen
  
  Project Manager,

  SmartBizz PTL
  
  
  
  

  
  
  
Lisa Stone
  
  CTO, Keort Inc
  
  
  Last seen 13:10 PM
  
  
  
  

  
  7
  
  
  
  
Deon Portalatin
  
  CFO, H&D LTD
  
  
  
  

  
  
  
Irina Savikova
  
  CEO, Tizda Motors Inc
  
  
  
  

  
  4
  
  
  
  
Maria Gomez
  
  Manager, Infomatic Inc
  
  
  Last seen 03:10 AM
  
  
  
 
 
 
 
  
  Back
  
  
  
  
  
  
  Bob Nilson
  20:15
  
  When could you send me the report ?
  
  
  
  
  
  
  
  Ella Wong
  20:15
  
  Its almost done. I will be sending it shortly
  
  
  
  
  
  
  
  Bob Nilson
  20:15
  
  Alright. Thanks! :)
  
  
  
  
  
  
  
  Ella Wong
  20:16
  
  You are most welcome. Sorry for the delay.
  
  
  
  
  
  
  
  Bob Nilson
  20:17
  
  No probs. Just take your time :)
  
  
  
  
  
  
  
  Ella Wong
  20:40
  
  Alright. I just emailed it to you.
  
  
  
  
  
  
  
  Bob Nilson
  20:17
  
  Great! Thanks. Will check it right away.
  
  
  
  
  
  
  
  Ella Wong
  20:40
  
  Please let me know if you have any comment.
  
  
  
  
  
  
  
  Bob Nilson
  20:17
  
  Sure. I will check and buzz you if anything needs to be corrected.
  
  
  
  
  
  
  
  
  
  
  
  
 
 
 
 
 
 
General
 

  

  
  
  
  
  
  
  
  
  
  You have 4 pending tasks. 
  Take action 
  
  
  
  
  
  
  
  Just now
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  Finance Report for year 2013 has been released.
  
  
  
  
  
  
  20 mins
  
  
  
  
  

  
  
  
  
  
  
  
  
  
  You have 5 pending membership that requires a quick review.
  
  
  
  
  
  
  24 mins
  
  
  
  

  
  
  
  
  
  
  
  
  
  New order received with 
  Reference Number: DR23923
  
  
  
  
  
  
  
  30 mins
  
  
  
  

  
  
  
  
  
  
  
  
  
  You have 5 pending membership that requires a quick review.
  
  
  
  
  
  
  24 mins
  
  
  
  

  
  
  
  
  
  
  
  
  
  Web server hardware needs to be upgraded. 
  Overdue
  
  
  
  
  
  
  
  2 hours
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  IPO Report for year 2013 has been released.
  
  
  
  
  
  
  20 mins
  
  
  
  
 
 
System
 

  

  
  
  
  
  
  
  
  
  
  You have 4 pending tasks. 
  Take action 
  
  
  
  
  
  
  
  Just now
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  Finance Report for year 2013 has been released.
  
  
  
  
  
  
  20 mins
  
  
  
  
  

  
  
  
  
  
  
  
  
  
  You have 5 pending membership that requires a quick review.
  
  
  
  
  
  
  24 mins
  
  
  
  

  
  
  
  
  
  
  
  
  
  New order received with 
  Reference Number: DR23923
  
  
  
  
  
  
  
  30 mins
  
  
  
  

  
  
  
  
  
  
  
  
  
  You have 5 pending membership that requires a quick review.
  
  
  
  
  
  
  24 mins
  
  
  
  

  
  
  
  
  
  
  
  
  
  Web server hardware needs to be upgraded. 
  Overdue
  
  
  
  
  
  
  
  2 hours
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  IPO Report for year 2013 has been released.
  
  
  
  
  
  
  20 mins
  
  
  
  
 
 
 
 
 
 
General Settings
 

  

  Enable Notifications 
  
  

  Allow Tracking 
  
  

  Log Errors 
  
  

  Auto Sumbit Issues 
  
  

  Enable SMS alerts 
  
 
 
System Settings
 

  

  Security Level
  
  Normal
  Medium
  High
  
  
  

  Failed Email Attempts 
  
  

  Secondary SMTP Port 
  
  

  Notify On System Error 
  
  

  Notify On SMTP Error 
  
 
 
   Save Changes
 
 
 
 
 
 
 
 
 
 
 
 
 
 2014 © Metronic by keenthemes. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

再次提取菜单代码 

 
 
 Multi Level Menu
 
 
 

 

 
   Item 1 
 
 

  

  
  
  Sample link 1 
  
  

  

   Sample link 1
  
  

   Sample link 1
  
  

   Sample link 1
  
  
  
  

   Sample link 1
  
  

   Sample link 2
  
  

   Sample link 3
  
 
 
 

 
   Item 2 
 
 

  

   Sample link 1
  
  

   Sample link 1
  
  

   Sample link 1
  
 
 
 

 
  
  Item 3
 
 
 
 

大约在466行-529行 
分析上面html可以看出，li包含ul循环调用。所以我们用递归读取菜单 

5.拼接菜单栏
 创建Home视图Index.cshtml并应用_Layout.cshtml
 Bootstrap Metronic并菜单没有提供Ajax模式，我们只能读取数据拼接HTML
 过程：读取数据表数据递归调用 

using App.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Text;
namespace App.Web.Controllers
{
 public class HomeController : Controller
 {
 AppDBContainer db = new AppDBContainer();
 public ActionResult Index()
 {
 IQueryable menus = db.SysModule.AsQueryable().Where(a=>a.ParentID=="0");
 StringBuilder sb = new StringBuilder();
 bool firstFlag = true;//第一个默认展开
 GetChildMenus(ref sb, menus, firstFlag);//二级菜单
 ViewBag.Menus = sb.ToString();
 return View();
 }
 //递归调用
 public void GetChildMenus(ref StringBuilder sb, IQueryable menus,bool firstFlag)//二级以上菜单
 {
 int count = 0;
 if(!firstFlag)
 sb.Append("
");
 foreach (var m in menus)
 {
 IQueryable menusChild = db.SysModule.AsQueryable().Where(a => a.ParentID == m.ID);
 count = menusChild.Count();
 sb.AppendFormat("
",firstFlag?"start actove open":"");
 sb.AppendFormat("{2}{3}", count > 0 ? "javascript:;" : m.Url, m.Iconic, m.Name, count > 0 ? "" : "");
 firstFlag = false;
 if (count > 0)
 GetChildMenus(ref sb, menusChild,firstFlag);
 sb.Append("
");
 }
 if (!firstFlag)
 sb.Append("
");
 
 }
 }
}

去掉提取的li替换成@Html.Raw(ViewBag.Menus) 

6.总结
前端这种东西最考验人的耐心，不信你自己拼接一下
最后效果 

 作者：YmNets
出处：http://ymnets.cnblogs.com/

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。