系列目录

似乎我们需要更多的模块了,我们有一个样例程序,可以帮助我们以后的系统开发做很多对照,我们稍后还有系统日志和系统异常的记录,这时浏览发生了困难,我们这一节来完成一个大家比较喜欢的东西吧,系统菜单栏,我们系统左边预留了一个位置,那里存放菜单,菜单在这里主要可以分为两种,
  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
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)-系统菜单栏[附源码]的更多相关文章

  1. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(1)-前言与目录(持续更新中...)

    转自:http://www.cnblogs.com/ymnets/p/3424309.html 曾几何时我想写一个系列的文章,但是由于工作很忙,一直没有时间更新博客.博客园园龄都1年了,却一直都是空空 ...

  2. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(48)-工作流设计-起草新申请

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(48)-工作流设计-起草新申请 系列目录 创建新表单之后,我们就可以起草申请了,申请按照严格的表单步骤和分 ...

  3. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(47)-工作流设计-补充

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(47)-工作流设计-补充 系列目录 补充一下,有人要表单的代码,这个用代码生成器生成表Flow_Form表 ...

  4. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(46)-工作流设计-设计分支

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(46)-工作流设计-设计分支 系列目录 步骤设置完毕之后,就要设置好流转了,比如财务申请大于50000元( ...

  5. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(45)-工作流设计-设计步骤

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(45)-工作流设计-设计步骤 系列目录 步骤设计很重要,特别是规则的选择. 我这里分为几个规则 1.按自行 ...

  6. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单 系列目录 设计表单是比较复杂的一步,完成一个表单的设计其实很漫长,主要分为四 ...

  7. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(43)-工作流设计-字段分类设计

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(43)-工作流设计-字段分类设计 系列目录 建立好42节的表之后,每个字段英文表示都是有意义的说明.先建立 ...

  8. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(42)-工作流设计01

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(42)-工作流设计01 工作流在实际应用中还是比较广泛,网络中存在很多工作流的图形化插件,可以做到拉拽的工 ...

  9. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(40)-精准在线人数统计实现-【过滤器+Cache】

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(40)-精准在线人数统计实现-[过滤器+Cache] 系列目录 上次的探讨没有任何结果,我浏览了大量的文章 ...

  10. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(41)-组织架构

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(41)-组织架构 本节开始我们要实现工作流,此工作流可以和之前的所有章节脱离关系,也可以紧密合并. 我们当 ...

随机推荐

  1. .NET Core系列 : 1、.NET Core 环境搭建和命令行CLI入门

    2016年6月27日.NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布,社区里涌现了很多文章,我也计划写个系列文章,原因是.NET Core的入门门槛相当高, ...

  2. 有朋友问了数据库ID不连续,怎么获取上一篇和下一篇的文章?(不是所有情况都适用)

    呃 (⊙o⊙)…,逆天好久没写SQL了,EF用的时间长了,SQL都不怎么熟悉了......[SQL水平比较菜,大牛勿喷] 方法很多种,说个最常见的处理 因为id是自增长的,所以一般情况下下一篇文章的I ...

  3. 【WCF】使用“用户名/密码”验证的合理方法

    我不敢说俺的方法是最佳方案,反正这世界上很多东西都是变动的,正像老子所说的——“反(返)者,道之动”.以往看到有些文章中说,为每个客户端安装证书嫌麻烦,就直接采用把用户名和密码塞在SOAP头中发送,然 ...

  4. 重撸JS_1

    1.声明 用 var 或 let 声明的未赋初值的变量,值会被设定为undefined(译注:即未定义值,本身也是一个值) 试图访问一个未初始化的变量会导致一个 ReferenceError 异常被抛 ...

  5. Android数据加密之MD5加密

    前言: 项目中无论是密码的存储或者说判断文件是否是同一文件,都会用到MD5算法,今天来总结一下MD5加密算法. 什么是MD5加密? MD5英文全称“Message-Digest Algorithm 5 ...

  6. ASP.NET Core应用的错误处理[1]:三种呈现错误页面的方式

    由于ASP.NET Core应用是一个同时处理多个请求的服务器应用,所以在处理某个请求过程中抛出的异常并不会导致整个应用的终止.出于安全方面的考量,为了避免敏感信息的外泄,客户端在默认的情况下并不会得 ...

  7. C++中的命名空间

    一,命名空间(namespace)的基本概念以及由来 1.什么是标识符: 在C++中,标识符可以是基本的变量,类,对象,结构体,函数,枚举,宏等. 2.什么是命名空间: 所谓的命名空间是指标识符的可见 ...

  8. 奇葩问题-TextView无法获取值

    问题场景 前几天写一个界面的时候,遇到一个非常奇葩的问题.app第一次安装的时候,这里针对用户第一次安装的时候,后来是不会出现这个问题了.我明明是对某个界面的一个textview赋值了,而且服务端也返 ...

  9. How those spring enable annotations work--转

    原文地址:http://blog.fawnanddoug.com/2012/08/how-those-spring-enable-annotations-work.html Spring's Java ...

  10. 【Machine Learning】Python开发工具:Anaconda+Sublime

    Python开发工具:Anaconda+Sublime 作者:白宁超 2016年12月23日21:24:51 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现 ...