構建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 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]GOSQL

　　

在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.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

View Code

 

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);        }    }}

　　

修改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

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

DependencyRegisterType

回到前端，預覽以下效果，這一節代碼比較多，大家只要放進去，代碼我都有注釋，看下就知道了

 

 我們終於有功能表列了，距離成功又進了一步，如果你有自己的功能表列想法，那麼跳過這一節的內容。

構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後台管理系統（10）-系統功能表欄