似乎我们需要更多的模块了，我们有一个样例程序，可以帮助我们以后的系统开发做很多对照，我们稍后还有系统日志和系统异常的记录，这时浏览发生了困难，我们这一节来完成一个大家比较喜欢的东西吧，系统菜单栏，我们系统左边预留了一个位置，那里存放菜单，菜单在这里主要可以分为两种，
1. outlook模式，可以用easyui的accordion，做起来可以很漂亮，博客园很多人写的系统，我都看到了用这个，菜单前面还可以放菜单图标，这里给大家看一个效果（这是J-UI富客户端框架的菜单栏）优点是漂亮啊，缺点也很明显，只有两层结构，系统庞大，菜单太多，显示就很麻烦了，不够用和不好看，accordion配合tree看起来很繁琐，本人比较喜欢简洁的东西
accordion： ![构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（10）-系统菜单栏[附源码]](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pBdVkyNWliRzluY3k1amIyMHZZbXh2Wnk4ME16azJOVEl2TWpBeE16RXhMekU1TWpJMU16UXpMV0UyT1RKbU1HVXhZVEUzWVRRd056UmlNR0V6WldWa1pETTBORGRrWXpNd0xuZ3RjRzVuLmpwZw%3D%3D.jpg?w=700 "构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（10）-系统菜单栏[附源码]")
accordion和tree结合：![构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（10）-系统菜单栏[附源码]](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pBdVkyNWliRzluY3k1amIyMHZZbXh2Wnk4ME16azJOVEl2TWpBeE16RXhMekU1TWpJMU5UVTFMVE5rWTJFeE1HWTRNekE0WVRRM05qYzVPV1ZoTm1KaE5qUTJOREUzTURCbExuZ3RjRzVuLmpwZw%3D%3D.jpg?w=700 "构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（10）-系统菜单栏[附源码]")
2. tree模式，树结构，缺点是简洁，没有视角上的享受，优点是无限级别，ajax异步获取，速度快。有很多树的jquery插件，可以使用easyui的tree，我这里不用easyui的tree，我下载一个比较轻巧的jquery tree插件--wdtree这个插架非常轻巧，支持异步
动手吧！下载wdtree插件，我这里提供下载,我以前下载的wdtree不是很好用（不知道现在有没有新版本），但是我重新对这个插件进行修复，很符合菜单的操作，
wdtree修复版下载
解压后，把js文件放到Scripts目录下,把样式放到Content目录下
我们似乎要创建数据库的菜单表，建表SQL语句
USE [DB]
GO /****** Object: Table [dbo].[SysModule] Script Date: 11/19/2013 22:11:10 ******/
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](200) NOT NULL, --模块名称
[EnglishName] [varchar](200) NULL, --英文名称（防止将来国际化）
[ParentId] [varchar](50) NULL,--上级ID这是一个tree
[Url] [varchar](200) NULL,--链接
[Iconic] [varchar](200) NULL,--图标，用于链接图标，或tab页图标
[Sort] [int] NULL,--排序
[Remark] [varchar](4000) NULL,--说明
[State] [bit] NULL, --状态
[CreatePerson] [varchar](200) NULL, --创建人
[CreateTime] [datetime] NULL,--创建事件
[IsLast] [bit] NOT NULL, --是否是最后一项
[Version] [timestamp] 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
SQL
在EF中更新我们表模型，不知道怎么更新的跳到第四讲
执行数据库命令,插入一些数据
INSERT INTO [SysModule] ([Id],[Name],[EnglishName],[ParentId],[Url],[Iconic],[Sort],[Remark],[State],[CreatePerson],[CreateTime],[IsLast],[Version]) values ('','*菜单','Root','','','',0,'',1,'Administrator','10 1 2012 12:00AM',0,NULL)
INSERT INTO [SysModule] ([Id],[Name],[EnglishName],[ParentId],[Url],[Iconic],[Sort],[Remark],[State],[CreatePerson],[CreateTime],[IsLast],[Version]) values ('BaseSample','模板样例','Sample by Ajax','SampleFile','SysSample','',0,'',1,'Administrator',NULL,1,NULL)
INSERT INTO [SysModule] ([Id],[Name],[EnglishName],[ParentId],[Url],[Iconic],[Sort],[Remark],[State],[CreatePerson],[CreateTime],[IsLast],[Version]) values ('Document','我的桌面','Start','PersonDocument','Home/Doc','',0,'',1,'Administrator','10 1 2012 12:00AM',1,NULL)
INSERT INTO [SysModule] ([Id],[Name],[EnglishName],[ParentId],[Url],[Iconic],[Sort],[Remark],[State],[CreatePerson],[CreateTime],[IsLast],[Version]) values ('Info','我的资料','Info','PersonDocument','Home/Info','',0,'',1,'Administrator','10 1 2012 12:00AM',1,NULL)
INSERT INTO [SysModule] ([Id],[Name],[EnglishName],[ParentId],[Url],[Iconic],[Sort],[Remark],[State],[CreatePerson],[CreateTime],[IsLast],[Version]) values ('InfoHome','主页','Home','Information','MIS/Article','',1,'',1,'Administrator','10 1 2012 12:00AM',1,NULL)
INSERT INTO [SysModule] ([Id],[Name],[EnglishName],[ParentId],[Url],[Iconic],[Sort],[Remark],[State],[CreatePerson],[CreateTime],[IsLast],[Version]) values ('Information','信息中心','Information','OA','','',0,'',1,'Administrator','10 1 2012 12:00AM',0,NULL)
INSERT INTO [SysModule] ([Id],[Name],[EnglishName],[ParentId],[Url],[Iconic],[Sort],[Remark],[State],[CreatePerson],[CreateTime],[IsLast],[Version]) values ('ManageInfo','管理中心','Manage Article','Information','MIS/ManageArticle','',4,'',1,'Administrator','10 1 2012 12:00AM',1,NULL)
INSERT INTO [SysModule] ([Id],[Name],[EnglishName],[ParentId],[Url],[Iconic],[Sort],[Remark],[State],[CreatePerson],[CreateTime],[IsLast],[Version]) values ('ModuleSetting','模块维护','Module Setting','RightManage','SysModule','',100,'',1,'Administrator','10 1 2012 12:00AM',1,NULL)
INSERT INTO [SysModule] ([Id],[Name],[EnglishName],[ParentId],[Url],[Iconic],[Sort],[Remark],[State],[CreatePerson],[CreateTime],[IsLast],[Version]) values ('MyInfo','我的信息','My Article','Information','MIS/MyArticle','',2,'',1,'Administrator','10 1 2012 12:00AM',1,NULL)
INSERT INTO [SysModule] ([Id],[Name],[EnglishName],[ParentId],[Url],[Iconic],[Sort],[Remark],[State],[CreatePerson],[CreateTime],[IsLast],[Version]) values ('PersonDocument','个人中心','Person Center','','','',2,'',1,'Administrator','10 1 2012 12:00AM',0,NULL)
INSERT INTO [SysModule] ([Id],[Name],[EnglishName],[ParentId],[Url],[Iconic],[Sort],[Remark],[State],[CreatePerson],[CreateTime],[IsLast],[Version]) values ('RightManage','权限管理','Authorities Management','','','',4,'',1,'Administrator','10 1 2012 12:00AM',0,NULL)
INSERT INTO [SysModule] ([Id],[Name],[EnglishName],[ParentId],[Url],[Iconic],[Sort],[Remark],[State],[CreatePerson],[CreateTime],[IsLast],[Version]) values ('RoleAuthorize','角色权限设置','Role Authorize','RightManage','SysRight','',6,'',1,'Administrator','10 1 2012 12:00AM',1,NULL)
INSERT INTO [SysModule] ([Id],[Name],[EnglishName],[ParentId],[Url],[Iconic],[Sort],[Remark],[State],[CreatePerson],[CreateTime],[IsLast],[Version]) values ('RoleManage','角色管理','Role Manage','RightManage','SysRole','',2,'',1,'Administrator','10 1 2012 12:00AM',1,NULL)
INSERT INTO [SysModule] ([Id],[Name],[EnglishName],[ParentId],[Url],[Iconic],[Sort],[Remark],[State],[CreatePerson],[CreateTime],[IsLast],[Version]) values ('SampleFile','开发指南样例','SampleFile','','SysSample','',1,'',1,'Administrator',NULL,0,NULL)
INSERT INTO [SysModule] ([Id],[Name],[EnglishName],[ParentId],[Url],[Iconic],[Sort],[Remark],[State],[CreatePerson],[CreateTime],[IsLast],[Version]) values ('SystemConfig','系统配置','System Config','SystemManage','SysConfig','',0,'',1,'Administrator','10 1 2012 12:00AM',1,NULL)
INSERT INTO [SysModule] ([Id],[Name],[EnglishName],[ParentId],[Url],[Iconic],[Sort],[Remark],[State],[CreatePerson],[CreateTime],[IsLast],[Version]) values ('SystemExcepiton','系统异常','System Exception','SystemManage','SysException','',2,'',1,'Administrator','10 1 2012 12:00AM',1,NULL)
INSERT INTO [SysModule] ([Id],[Name],[EnglishName],[ParentId],[Url],[Iconic],[Sort],[Remark],[State],[CreatePerson],[CreateTime],[IsLast],[Version]) values ('SystemJobs','系统任务','System Jobs','TaskScheduling','Jobs/Jobs','',0,'',1,'Administrator','10 1 2012 12:00AM',1,NULL)
INSERT INTO [SysModule] ([Id],[Name],[EnglishName],[ParentId],[Url],[Iconic],[Sort],[Remark],[State],[CreatePerson],[CreateTime],[IsLast],[Version]) values ('SystemLog','系统日志','System Log','SystemManage','SysLog','',1,'',1,'Administrator','10 1 2012 12:00AM',1,NULL)
INSERT INTO [SysModule] ([Id],[Name],[EnglishName],[ParentId],[Url],[Iconic],[Sort],[Remark],[State],[CreatePerson],[CreateTime],[IsLast],[Version]) values ('SystemManage','系统管理','System Management','','','',3,'',1,'Administrator','10 1 2012 12:00AM',0,NULL)
INSERT INTO [SysModule] ([Id],[Name],[EnglishName],[ParentId],[Url],[Iconic],[Sort],[Remark],[State],[CreatePerson],[CreateTime],[IsLast],[Version]) values ('UserManage','系统管理员','User Manage','RightManage','SysUser',NULL,1,NULL,1,'Administrator','10 1 2012 12:00AM',1,NULL)
insert语句
我们表里有数据了
回到前端页面，引入wdtree js及其样式表
<head>
.........
<script src="~/Scripts/jquery.tree.js"></script>
<link href="~/Content/tree/css/tree.css" rel="stylesheet" />
</head>
添加以下代码js代码到home.js下面
$(function () {
var o = {
showcheck: false,
url: "/Home/GetTree",
onnodeclick: function (item) {
var tabTitle = item.text;
var url = "../../" + item.value;
var icon = item.Icon;
if (!item.hasChildren) {
addTab(tabTitle, url, icon);
} else {
$(this).parent().find("img").trigger("click");
}
}
}
$.post("/Home/GetTree", { "id": "0" },
function (data) {
if (data == "0") {
window.location = "/Account";
}
o.data = data;
$("#RightTree").treeview(o);
}, "json");
});
js
创建Home的BLL层和DAL层
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using App.Models; namespace App.IBLL
{
public interface IHomeBLL
{
List<SysModule> GetMenuByPersonId(string moduleId);
}
}
IHomeBLL
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.Practices.Unity;
using App.IBLL;
using App.Models;
using App.IDAL;
namespace App.BLL
{ public class HomeBLL:IHomeBLL
{
[Dependency]
public IHomeRepository HomeRepository { get; set; }
public List<SysModule> GetMenuByPersonId(string moduleId)
{
return HomeRepository.GetMenuByPersonId(moduleId);
}
}
}
HomeBLL
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using App.Models; namespace App.IDAL
{
public interface IHomeRepository
{
List<SysModule> GetMenuByPersonId(string moduleId);
}
}
IHomeRepository
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using App.Models;
using App.IDAL; namespace App.DAL
{
public class HomeRepository : IHomeRepository,IDisposable
{ public List<SysModule> GetMenuByPersonId(string moduleId)
{
using (DBContainer db = new DBContainer())
{
var menus =
(
from m in db.SysModule
where m.ParentId == moduleId
where m.Id != ""
select m
).Distinct().OrderBy(a=>a.Sort).ToList();
return menus;
}
} public void Dispose()
{ }
}
}
HomeRepository
修改HomeController的代码
using App.IBLL;
using App.Models;
using Microsoft.Practices.Unity;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace App.Admin.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
[Dependency]
public IHomeBLL homeBLL { get; set; }
public ActionResult Index()
{
return View();
} /// <summary>
/// 获取导航菜单
/// </summary>
/// <param name="id">所属</param>
/// <returns>树</returns>
public JsonResult GetTree(string id)
{ List<SysModule> menus = homeBLL.GetMenuByPersonId(id);
var jsonData = (
from m in menus
select new
{
id = m.Id,
text = m.Name,
value = m.Url,
showcheck = false,
complete = false,
isexpand = false,
checkstate = ,
hasChildren = m.IsLast ? false : true,
Icon = m.Iconic
}
).ToArray();
return Json(jsonData, JsonRequestBehavior.AllowGet); } }
}
HomeController
别忘记容器的注入App.Core下的
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using App.BLL;
using App.DAL;
using App.IBLL;
using App.IDAL;
using Microsoft.Practices.Unity; namespace App.Core
{
public class DependencyRegisterType
{
//系统注入
public static void Container_Sys(ref UnityContainer container)
{
container.RegisterType<ISysSampleBLL, SysSampleBLL>();//样例
container.RegisterType<ISysSampleRepository, SysSampleRepository>(); container.RegisterType<IHomeBLL, HomeBLL>();
container.RegisterType<IHomeRepository, HomeRepository>();
}
}
}
DependencyRegisterType.cs
回到前端，预览以下效果，这一节代码比较多，大家只要放进去，代码我都有注释，看下就知道了
![构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（10）-系统菜单栏[附源码]](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pBdVkyNWliRzluY3k1amIyMHZZbXh2Wnk4ME16azJOVEl2TWpBeE16RXhMekU1TWpJMU56TTFMVFV6TmpCaE9ESmlOakl5TmpRM01UWTROamRrTjJNMU5tUXpObVV6WW1Ka0xuZ3RjRzVuLmpwZw%3D%3D.jpg?w=700 "构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（10）-系统菜单栏[附源码]")
我们终于有菜单栏了，距离成功又进了一步，如果你有自己的菜单栏想法，那么跳过这一节的内容。