ASP.NET MVC4.0+EF+LINQ+bui+bootstrap+网站+角色权限管理系统（4）

接下来就是菜单管理了，菜单分为两部分，一部分是菜单管理，另一部分是左边的树形菜单

数据库添加菜单表Menus

USE [MVCSystem]
GO

/****** Object:  Table [dbo].[Menus]    Script Date: 01/19/2016 13:18:09 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[Menus](
    [MenuID] [int] IDENTITY(1,1) NOT NULL,
    [MenuPID] [int] NULL,
    [MenuName] [nvarchar](50) NULL,
    [MenuHref] [nvarchar](50) NULL,
    [IsTop] [int] NULL,
    [State] [int] NULL,
    [Groupes] [nvarchar](50) NULL,
    [Closeable] [bit] NULL,
    [Collapsed] [bit] NULL,
 CONSTRAINT [PK_Menus] PRIMARY KEY CLUSTERED
(
    [MenuID] 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

ALTER TABLE [dbo].[Menus] ADD  CONSTRAINT [DF_Menus_MenuPID]  DEFAULT ((0)) FOR [MenuPID]
GO

ALTER TABLE [dbo].[Menus] ADD  CONSTRAINT [DF_Menus_IsTop]  DEFAULT ((1)) FOR [IsTop]
GO

ALTER TABLE [dbo].[Menus] ADD  CONSTRAINT [DF_Menus_State]  DEFAULT ((1)) FOR [State]
GO

ALTER TABLE [dbo].[Menus] ADD  CONSTRAINT [DF_Menus_Groupes]  DEFAULT (N'N') FOR [Groupes]
GO

然后 创建相应的模型、控制器、视图等

MenusController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVCSystem.Web.Common;
using MVCSystem.Web.Models;

namespace MVCSystem.Web.Areas.Admin.Controllers
{
    public class MenusController : BaseController
    {
        //
        // GET: /Admin/Menus/
        /// <summary>
        /// 数据列表
        /// </summary>
        /// <returns></returns>
        public ActionResult Index()
        {
            return View();
        }
        public JsonResult GetList(GridPager pager)
        {
            var aList = db.DB_Menus.ToList();
            var json = (from a in aList
                        where a.IsTop ==
                        select new
                        {
                            AID=a.MenuID,
                            AText=a.MenuName,
                            AState = (a.State==)?"启用":"禁用",
                            BMenus = getBMenus(a.MenuID)

                        }).ToArray();
            return Json(json, JsonRequestBehavior.AllowGet);
        }

        private JsonResult getBMenus(int PID) { 

         var aList = db.DB_Menus.ToList();
            var json = (from b in aList
                        where b.MenuPID == PID
                        select new
                        {
                            BID=b.MenuID,
                            BText=b.MenuName,
                            BState = (b.State == ) ? "启用" : "禁用",
                            BHref = b.MenuHref

                        }).ToArray();
            return Json(json, JsonRequestBehavior.AllowGet);
        }

    }
}

M_Menus.cs

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Web;

namespace MVCSystem.Web.Models
{
    [Table("Menus")]
    public class M_Menus
    {
        [Key]
        public int MenuID{ get; set; }
        public int? MenuPID{ get; set; }
        public string MenuName{ get; set; }
        public string MenuHref{ get; set; }
        public string Groupes { get; set; }
        public bool Closeable { get; set; }
        public bool Collapsed { get; set; }
        public int IsTop{ get; set; }
        public int State { get; set; }

    }
}

Menus视图

Index.cshtml

@using MVCSystem.Web;
@{
    ViewBag.Title = "Index";
    Layout = "~/Areas/Admin/Views/Shared/_Layout_Admin.cshtml";
}
<div class="form-inline definewidth m20">
    <button type="button" onclick="menusAddEdit(0,1)" class="btn btn-primary" id="addAnew">添加主菜单</button> &nbsp;&nbsp;
    <button type="button" onclick="menusAddEdit(0,0)" class="btn btn-success" id="addBnew">添加子菜单</button>
</div>
<table class="table table-bordered table-hover definewidth m10" >
    <thead>
    <tr>
        <th>菜单标题</th>
        <th>链接</th>
        <th>状态</th>
        <th>管理操作</th>
    </tr>
    </thead>
    <tbody class="tbody">

        </tbody>
       </table>

<div id="windDlog" class="hidden">

</div>

    <script type="text/javascript">

        $(function () {

            $.getJSON("/Admin/Menus/GetList", function (data) {
                var strTr = "";
                for (var i = 0; i < data.length; i++) {
                    strTr += "<tr> <td colspan='2' style='font-weight:bold;'>" + data[i].AText + "</td><td>" + data[i].AState + "</td><td><a href='javascript:;' onclick='menusAddEdit(" + data[i].AID + ",1)'>编辑</a>&nbsp;&nbsp;<a href='javascript:;' onclick='DeleteShow(" + data[i].AID + "," + data[i].BMenus.Data.length + ")'>删除</a></td></tr>";

                    for (var j = 0; j < data[i].BMenus.Data.length; j++) {

                        strTr += "<tr><td style='text-indent:2em;'>" + data[i].BMenus.Data[j].BText + "</td><td>" + data[i].BMenus.Data[j].BHref + "</td><td>" + data[i].BMenus.Data[j].BState + "</td><td><a href='javascript:;' onclick='menusAddEdit(" + data[i].BMenus.Data[j].BID + ",0)'>编辑</a>&nbsp;&nbsp;<a href='javascript:;' onclick='DeleteShow(" + data[i].BMenus.Data[j].BID + ",0)'>删除</a></td></tr>"
                    }
                }
                $(".tbody").html(strTr);
            })
        })

    </script>

添加、修改、删除的原理都是一样的，这里不多做讲解了，大家可以参考前面的去写一下，完全写出来也没意思了！

下面贴出运行后的效果，大家可以参照扩展下：

完成了菜单的管理功能，下面就是动态获取左边的导航菜单了

我们可以根据菜单结构，返回相应的数据json：

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCSystem.Web.Areas.Admin.Controllers
{
    public class HomeController : BaseController
    {
        //
        // GET: /Admin/Home/

        public ActionResult Index()
        {
            return View();
        }

        public JsonResult GetList()
        {
            var aList = db.DB_Menus.Where(e=>e.State==).ToList();
            var json = (from a in aList
                        where a.IsTop ==
                        select new
                        {
                            text = a.MenuName,
                            items = getBMenu(a.MenuID),
                            collapsed=a.Collapsed
                        }).ToArray();
            return Json(json, JsonRequestBehavior.AllowGet);
        }

        private Array getBMenu(int PID)
        {

            var arr = (from c in db.DB_Menus
                       where c.MenuPID == PID
                       select new
                       {
                           id =c.MenuID,
                           text = c.MenuName,
                           href=c.MenuHref,
                           closeable= c.Closeable
                       }).ToArray();
            return arr;

        }

    }
}

对应的视图Index.cshtml

<!DOCTYPE HTML>
<html>
 <head>
  <title>后台管理系统</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link href="~/Content/assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
  <link href="~/Content/assets/css/bui-min.css" rel="stylesheet" type="text/css" />
   <link href="~/Content/assets/css/main-min.css" rel="stylesheet" type="text/css" />

 </head>
 <body>

  <div class="header">

      <div class="dl-title">
       <!--<img src="/chinapost/Public/assets/img/top.png">-->
      </div>

    <div class="dl-log">欢迎您，<span class="dl-log-user">root</span><a href="/chinapost/index.php?m=Public&a=logout" title="退出系统" class="dl-log-quit">[退出]</a>
    </div>
  </div>
   <div class="content">
    <div class="dl-main-nav">
      <div class="dl-inform"><div class="dl-inform-title"><s class="dl-inform-icon dl-up"></s></div></div>
      <ul id="J_Nav"  class="nav-list ks-clear">
          <li class="nav-item dl-selected"><div class="nav-item-inner nav-home">系统管理</div></li>        

      </ul>
    </div>
    <ul id="J_NavContent" class="dl-tab-conten">

    </ul>
   </div>
  <script type="text/javascript" src="~/Content/assets/js/jquery-1.8.1.min.js"></script>
  <script type="text/javascript" src="~/Content/assets/js/bui-min.js"></script>
  <script type="text/javascript" src="~/Content/assets/js/common/main-min.js"></script>
  <script type="text/javascript" src="~/Content/assets/js/config-min.js"></script>
  <script type="text/javascript">
      $(function () {

     $.getJSON("/Admin/Home/GetList", function (data) {

    BUI.use('common/main',function(){
          var config = [
            { id: 'a', menu: data}
        ];
          new PageUtil.MainPage({
            modulesConfig : config
          });
          $(".tab-content iframe").attr("src", readCookie("href"));
          $(".tab-item-title").text(unescape(readCookie("text")));
          $(".bui-nav-tab-item").attr("title",unescape(readCookie("text")));
          $(".bui-menu .menu-leaf").click(function () {
              writeCookie("href", $(this).find("a").attr("href"), 990000);
              writeCookie("text", $(this).find("em").text(), 990000);
          })
        });
     })
      })
      function writeCookie(name, value, timeNum) {
          var expire = "";
          if (timeNum != null) {
              expire = new Date((new Date()).getTime() + timeNum);
              expire = "; expires=" + expire.toGMTString();
          }
          document.cookie = name + "=" + escape(value) + expire + ";path=/";
      }
      function readCookie(name) {
          var cookieValue = "";
          var search = name + "=";
          if (document.cookie.length > 0) {
              offset = document.cookie.indexOf(search);
              if (offset != -1) {
                  offset += search.length;
                  end = document.cookie.indexOf(";", offset);
                  if (end == -1) end = document.cookie.length;
                  cookieValue = (document.cookie.substring(offset, end))
              }
          }
          return cookieValue;
      }
  </script>
<!-- script end -->
 </body>
</html>

由于动态输出，刷新的时候就需要把上一个点击的动作存储到cookie中，：

 function writeCookie(name, value, timeNum) {//写入cookie
          var expire = "";
          if (timeNum != null) {
              expire = new Date((new Date()).getTime() + timeNum);
              expire = "; expires=" + expire.toGMTString();
          }
          document.cookie = name + "=" + escape(value) + expire + ";path=/";
      }
      function readCookie(name) {//读取cookie
          var cookieValue = "";
          var search = name + "=";
          if (document.cookie.length > 0) {
              offset = document.cookie.indexOf(search);
              if (offset != -1) {
                  offset += search.length;
                  end = document.cookie.indexOf(";", offset);
                  if (end == -1) end = document.cookie.length;
                  cookieValue = (document.cookie.substring(offset, end))
              }
          }
          return cookieValue;
      }

运行效果如下：

源码下载：http://www.yealuo.com/Sccnn/Detail?KeyValue=2f926407-f80b-4bff-a729-949a53efed7b

作者：boyzi007

出处：http://www.cnblogs.com/boyzi/

QQ：470797533

QQ交流群：364307742
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。