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

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

/****** Object: Table [dbo].[SysModule] Script Date: 2015/9/15 21:03:39 ******/

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],[Parenhttp://tID],[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

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

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

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

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

8

Project Manager

Art Director

3

CTO

CEO

2

CEO, Loop Inc

Last seen 03:10 AM

new

Project Manager,

SmartBizz PTL

CTO, Keort Inc

Last seen 13:10 PM

7

CFO, H&D LTD

CEO, Tizda Motors Inc

4

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.

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

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

Enable Notifications

Allow Tracking

Log Errors

Auto Sumbit Issues

Enable SMS Alerts

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("

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替换成@HtmlJYwJSJir.Raw(ViewBag.Menus)

6.总结

前端这种东西最考验人的耐心，不信你自己拼接一下

最后效果

出处：http://ymnets.cnblogs.com/

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。