备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

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

2014-02-23 1114
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（10）-系统菜单栏[附源码] 似乎我们需要更多的模块了，我们有一个样例程序，可以帮助我们以后的系统开发做很多对照，我们稍后还有系统日志和系统异常的记录，这时浏览发生了困难，我们这一节来完成一个大家比较喜欢的东西吧，系统菜单栏，我们系统左边预留了一个位置，那里存放菜单，菜单在这里主要可以分为两种，　　1.

原文:构建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
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 ('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");
});
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 != "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 menus
                        select 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

文章标签：
Go
JavaScript
.NET
前端开发
关键词：
.NET系统
.NET源码
ASP.NET源码
ASP源码
ASP MVC
杰克.陈
目录
相关文章
源码星辰
|
17天前
|
开发框架 安全 .NET
ASP.NET三甲医院手术麻醉信息管理系统源码 对接麻醉机、监护仪、血气分析仪
辅助医院建设 •支持三级医院评级需求 •支持智慧医院评级需求 •支持互联互通评级需求 •支持电子病历评级需求
源码星辰
18 0
源码星辰
|
2月前
|
开发框架 Oracle 关系型数据库
ASP.NET实验室LIS系统源码 Oracle数据库
LIS是HIS的一个组成部分，通过与HIS的无缝连接可以共享HIS中的信息资源，使检验科能与门诊部、住院部、财务科和临床科室等全院各部门之间协同工作。　
源码星辰
37 4
亚丁号
|
3月前
|
开发框架 前端开发 JavaScript
盘点72个ASP.NET Core源码Net爱好者不容错过
盘点72个ASP.NET Core源码Net爱好者不容错过
亚丁号
71 0
亚丁号
|
3月前
|
开发框架 前端开发 JavaScript
分享129个ASP.NET源码总有一个是你想要的
分享129个ASP.NET源码总有一个是你想要的
亚丁号
32 0
亚丁号
|
3月前
|
开发框架 前端开发 .NET
分享119个ASP.NET源码总有一个是你想要的
分享119个ASP.NET源码总有一个是你想要的
亚丁号
45 1
亚丁号
|
3月前
|
开发框架 前端开发 .NET
分享68个ASP.NET源码总有一个是你想要的
分享68个ASP.NET源码总有一个是你想要的
亚丁号
74 0
亚丁号
|
3月前
|
开发框架 前端开发 JavaScript
分享53个ASP.NET源码总有一个是你想要的
分享53个ASP.NET源码总有一个是你想要的
亚丁号
34 0
亚丁号
|
3月前
|
开发框架 前端开发 .NET
分享42个ASP.NET源码总有一个是你想要的
分享42个ASP.NET源码总有一个是你想要的
亚丁号
28 0
源码星辰
|
1月前
|
开发框架 搜索推荐 .NET
ASP.NET体检中心源码，实现检前、检中、检后全流程管理
健康体检系统遵循整个健康体检的实际流程，以提高工作效率、降低错检、防止漏检提高人性化服务水平为目的，在体检过程中可以高效、自动化、人性化的处理数据与提供服务。针对体检流程中工作强度在时间分配上不均匀等特点，解决了体检信息处理效率问题，在不增加体检中心人力资源投入或少投入的基础上，提升信息处理的效率，从而突破体检中心日处理体检人数的上限，为体检中心创造更大经济效益的同时，还能有效的降低体检工作者的劳动强度。
源码星辰
36 5
源码星辰
|
2月前
|
开发框架 前端开发 .NET
ASP.NET云LIS区域检验云SaaS平台源码
云LIS区域检验平台由BS架构组成。统一接入区域内全部的检验数据，通过检验云，实现区域内检验信息数据共享，通过区域质控模块，对各个分支机构产生的报告进行质控，从而实现检验结果互认。同时，对各医疗机构上传的样本检验数据进行统一管理。
源码星辰
47 1
ASP.NET云LIS区域检验云SaaS平台源码

热门文章

最新文章

  • 1
    C#/.NET/.NET Core优秀项目和框架2024年3月简报
  • 2
    【干货】Java开发者快速上手.NET指南
  • 3
    MQTT常见问题之调用.net sdk 报“不知道这样的主机”如何解决
  • 4
    .NET智慧手术室管理平台源码
  • 5
    r语言中对LASSO回归，Ridge岭回归和弹性网络Elastic Net模型实现-4
  • 6
    .NET开源、免费、强大的交互式绘图库
  • 7
    .NET开源免费、功能强大的 Windows 截图录屏神器
  • 8
    对象存储oss使用问题之OSS SDK .net 使用下载例程报错如何解决
  • 9
    .NET开源、免费、跨平台的Git可视化管理工具
  • 10
    .NET开源免费的Windows快速文件搜索和应用程序启动器
  • 1
    ASP.NET三甲医院手术麻醉信息管理系统源码 对接麻醉机、监护仪、血气分析仪
    18
  • 2
    asp.net中条件查询+分页
    16
  • 3
    ASP.NET体检中心源码，实现检前、检中、检后全流程管理
    36
  • 4
    C# .NET面试系列七：ASP.NET Core
    63
  • 5
    C# .NET面试系列六：ASP.NET MVC
    99
  • 6
    ASP.NET云LIS区域检验云SaaS平台源码
    47
  • 7
    ASP.NET实验室LIS系统源码 Oracle数据库
    37
  • 8
    ASP.NET WEB+EntityFramework数据持久化——考核练习库——1、用户管理系统(考点：查询列表、增加、删除)
    67
  • 9
    ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
    34
  • 10
    ASP.NET WEB——项目中Cookie与Session的用法
    36

    • 相关课程

    更多
  • 前端开发框架Bootstrap使用教程
  • Python Web 框架 Flask 快速入门
  • Python Web 框架 Django 快速入门
  • Java Web项目实战 - 图书商城

    • 相关电子书

    更多
  • Java Spring Boot开发实战系列课程【第7讲】：Spring Boot 2.0安全机制与MVC身份验证实战(Java面试题)
  • Web应用系统性能优化
  • QQ移动页面框架优化实践

    • 相关实验场景

    更多
  • WEB网页编程实战
  • Web Terminal环境使用指南
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）