构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（10）-系统菜单栏[附源码]

原文:构建ASP.NET 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/2013 22:11:10 ******/
SET ANSI_NULLS ON
GOSET QUOTED_IDENTIFIER ON
GOSET ANSI_PADDING ON
GOCREATE 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 OFF
GOALTER 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 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','0','','',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','0','','',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','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 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','0','','',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");
});

创建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

回到前端，预览以下效果，这一节代码比较多，大家只要放进去，代码我都有注释，看下就知道了

我们终于有菜单栏了，距离成功又进了一步，如果你有自己的菜单栏想法，那么跳过这一节的内容。

终于搞了个百度云，园友不要提交邮箱了

链接：http://pan.baidu.com/s/1EHHyQ 密码：7mpd

posted on 2014-02-23 12:55 NET未来之路阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/3561794.html

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（10）-系统菜单栏[附源码]相关推荐

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（12）-系统日志和异常的处理②...
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(12)-系统日志和异常的处理② 上一讲我们做了日志与异常的结果显示列表,这一节我们讲要把他应用系统中来. ...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（31）-MVC使用RDL报表
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(31)-MVC使用RDL报表这次我们来演示MVC3怎么显示RDL报表,坑爹的微软把MVC升级到5都木有良 ...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（32）-swfupload多文件上传[附源码]...
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(32)-swfupload多文件上传[附源码] 文件上传这东西说到底有时候很痛,原来的asp.net服务器 ...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（39）-在线人数统计探讨
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(39)-在线人数统计探讨系列目录基于web的网站在线统计一直处于不是很精准的状态!基本上没有一种方法可 ...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（34）-文章发布系统①-简要分析...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(34)-文章发布系统①-简要分析原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入 ...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（13）-系统日志和异常的处理③
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(13)-系统日志和异常的处理③ 参考文章: (1)构建ASP.NET MVC4+EF5+EasyUI+Unity ...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（40）-精准在线人数统计实现-【过滤器+Cache】...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(40)-精准在线人数统计实现-[过滤器+Cache] 原文:构建ASP.NET MVC4+EF5+EasyUI+ ...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（44）-工作流设计-设计表单...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后 ...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（36）-文章发布系统③-kindeditor使用...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(36)-文章发布系统③-kindeditor使用原文:构建ASP.NET MVC4+EF5+EasyUI+Un ...

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（10）-系统菜单栏[附源码]

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（10）-系统菜单栏[附源码]相关推荐

最新文章

热门文章