![构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（10）-系统菜单栏[附源码]](https://700zi.400zi.cn/uploadfile/img/14/769/c0b5af227133e8d86186d68adf58651e.jpg)
构建 MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（10）-系统菜单栏[附源码]
原文:构建 MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（10）-系统菜单栏[附源码]
似乎我们需要更多的模块了，我们有一个样例程序，可以帮助我们以后的系统开发做很多对照，我们稍后还有系统日志和系统异常的记录，这时浏览发生了困难，我们这一节来完成一个大家比较喜欢的东西吧，系统菜单栏，我们系统左边预留了一个位置，那里存放菜单，菜单在这里主要可以分为两种，
1. outlook模式，可以用easyui的accordion，做起来可以很漂亮，博客园很多人写的系统，我都看到了用这个，菜单前面还可以放菜单图标，这里给大家看一个效果（这是J-UI富客户端框架的菜单栏）优点是漂亮啊，缺点也很明显，只有两层结构，系统庞大，菜单太多，显示就很麻烦了，不够用和不好看，accordion配合tree看起来很繁琐，本人比较喜欢简洁的东西
accordion：accordion和tree结合：
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/ 22:11:10 ******/SET ANSI_NULLS ONGOSET QUOTED_IDENTIFIER ONGOSET ANSI_PADDING ONGOCREATE 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]GOSET ANSI_PADDING OFFGOALTER TABLE [dbo].[SysModule] WITH NOCHECK ADD CONSTRAINT [FK_SysModule_SysModule] FOREIGN KEY([ParentId])REFERENCES [dbo].[SysModule] ([Id])GOALTER 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 ('0','顶级菜单','Root','0','','',0,'',1,'Administrator','10 1 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 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 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 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 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 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 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 12:00AM',1,NULL)INSERT INTO [SysModule] ([Id],[Name],[EnglishName],[ParentId],[Url],[Iconic],[Sort],[Remark],[State],[CreatePerson],[CreateTime],[IsLast],[Version]) values ('PersonDocument','个人中心','Person Center','0','','',2,'',1,'Administrator','10 1 12:00AM',0,NULL)INSERT INTO [SysModule] ([Id],[Name],[EnglishName],[ParentId],[Url],[Iconic],[Sort],[Remark],[State],[CreatePerson],[CreateTime],[IsLast],[Version]) values ('RightManage','权限管理','Authorities Management','0','','',4,'',1,'Administrator','10 1 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 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 12:00AM',1,NULL)INSERT INTO [SysModule] ([Id],[Name],[EnglishName],[ParentId],[Url],[Iconic],[Sort],[Remark],[State],[CreatePerson],[CreateTime],[IsLast],[Version]) values ('SampleFile','开发指南样例','SampleFile','0','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 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 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 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 12:00AM',1,NULL)INSERT INTO [SysModule] ([Id],[Name],[EnglishName],[ParentId],[Url],[Iconic],[Sort],[Remark],[State],[CreatePerson],[CreateTime],[IsLast],[Version]) values ('SystemManage','系统管理','System Management','0','','',3,'',1,'Administrator','10 1 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 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.SysModulewhere m.ParentId == moduleIdwhere m.Id != "0"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 menusselect new{id = m.Id,text = m.Name,value = m.Url,showcheck = false,complete = false,isexpand = false,checkstate = 0,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
回到前端，预览以下效果，这一节代码比较多，大家只要放进去，代码我都有注释，看下就知道了
我们终于有菜单栏了，距离成功又进了一步，如果你有自己的菜单栏想法，那么跳过这一节的内容。
终于搞了个百度云，园友不要提交邮箱了
链接：/s/1EHHyQ 密码：7mpd
posted on -02-23 12:55 NET未来之路 阅读(...) 评论(...) 编辑 收藏
