ASP.NET Mvc 后台管理系统（左侧列表数据库加载）Demo

创建数据库脚本

USE [master]
GO
--创建数据库
/****** Object:  Database [MyTrees]    Script Date: 03/04/2019 11:14:35 ******/
CREATE DATABASE [MyTrees] ON  PRIMARY 
( NAME = N'MyTrees', FILENAME = N'C:Program Files (x86)Microsoft SQL ServerMSSQL10_50.MSSQLSERVERMSSQLDATAMyTrees.mdf' , SIZE = 3072KB , MAXSIZE = UNLIMITED, FILEGROWTH = 1024KB )
 LOG ON 
( NAME = N'MyTrees_log', FILENAME = N'C:Program Files (x86)Microsoft SQL ServerMSSQL10_50.MSSQLSERVERMSSQLDATAMyTrees_log.ldf' , SIZE = 1024KB , MAXSIZE = 2048GB , FILEGROWTH = 10%)
GO

ALTER DATABASE [MyTrees] SET COMPATIBILITY_LEVEL = 100
GO

IF (1 = FULLTEXTSERVICEPROPERTY('IsFullTextInstalled'))
begin
EXEC [MyTrees].[dbo].[sp_fulltext_database] @action = 'enable'
end
GO

ALTER DATABASE [MyTrees] SET ANSI_NULL_DEFAULT OFF 
GO

ALTER DATABASE [MyTrees] SET ANSI_NULLS OFF 
GO

ALTER DATABASE [MyTrees] SET ANSI_PADDING OFF 
GO

ALTER DATABASE [MyTrees] SET ANSI_WARNINGS OFF 
GO

ALTER DATABASE [MyTrees] SET ARITHABORT OFF 
GO

ALTER DATABASE [MyTrees] SET AUTO_CLOSE OFF 
GO

ALTER DATABASE [MyTrees] SET AUTO_CREATE_STATISTICS ON 
GO

ALTER DATABASE [MyTrees] SET AUTO_SHRINK OFF 
GO

ALTER DATABASE [MyTrees] SET AUTO_UPDATE_STATISTICS ON 
GO

ALTER DATABASE [MyTrees] SET CURSOR_CLOSE_ON_COMMIT OFF 
GO

ALTER DATABASE [MyTrees] SET CURSOR_DEFAULT  GLOBAL 
GO

ALTER DATABASE [MyTrees] SET CONCAT_NULL_YIELDS_NULL OFF 
GO

ALTER DATABASE [MyTrees] SET NUMERIC_ROUNDABORT OFF 
GO

ALTER DATABASE [MyTrees] SET QUOTED_IDENTIFIER OFF 
GO

ALTER DATABASE [MyTrees] SET RECURSIVE_TRIGGERS OFF 
GO

ALTER DATABASE [MyTrees] SET  DISABLE_BROKER 
GO

ALTER DATABASE [MyTrees] SET AUTO_UPDATE_STATISTICS_ASYNC OFF 
GO

ALTER DATABASE [MyTrees] SET DATE_CORRELATION_OPTIMIZATION OFF 
GO

ALTER DATABASE [MyTrees] SET TRUSTWORTHY OFF 
GO

ALTER DATABASE [MyTrees] SET ALLOW_SNAPSHOT_ISOLATION OFF 
GO

ALTER DATABASE [MyTrees] SET PARAMETERIZATION SIMPLE 
GO

ALTER DATABASE [MyTrees] SET READ_COMMITTED_SNAPSHOT OFF 
GO

ALTER DATABASE [MyTrees] SET HONOR_BROKER_PRIORITY OFF 
GO

ALTER DATABASE [MyTrees] SET  READ_WRITE 
GO

ALTER DATABASE [MyTrees] SET RECOVERY FULL 
GO

ALTER DATABASE [MyTrees] SET  MULTI_USER 
GO

ALTER DATABASE [MyTrees] SET PAGE_VERIFY CHECKSUM  
GO

ALTER DATABASE [MyTrees] SET DB_CHAINING OFF 
GO


USE [MyTrees]
GO
--创建表
/****** Object:  Table [dbo].[Tree]    Script Date: 03/04/2019 11:15:21 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[Tree](
    [Id] [int] IDENTITY(1,1) NOT NULL,
    [Title] [nvarchar](50) NOT NULL,
    [Url] [nvarchar](50) NOT NULL,
    [ParentId] [int] NOT NULL,
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

数据库字段

创建空白解决方案

创建MVC项目

EF链接数据库

修改App.config配置信息

model层

创建TreeViewModel类

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

namespace MyTreeDemo.Models
{
    public class TreeViewModel
    {
        public int id { get; set; }
        public string text { get; set; }
　　　　　
        public List<TreeViewModel> children { get; set; }

        public MyAttr attributes { get; set; }
        public TreeViewModel()
        {
            this.attributes = new MyAttr();
            this.children = new List<TreeViewModel>();
        }
    }
}

　创建MyAttr类

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

namespace MyTreeDemo.Models
{
    public class MyAttr
    {
        public string url { get; set; }
    }
}

创建Home控制器

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

namespace MyTreeDemo.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        MyTreesContext dbContext = new MyTreesContext();
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetTree()
        {
           
            List<TreeViewModel> vmList = new List<TreeViewModel>();
            //调用递归方法
            GetTreeBySelf(0, vmList);
            return Json(vmList, JsonRequestBehavior.AllowGet);     
        }


        //递归方法
        public void GetTreeBySelf(int parentId, List<TreeViewModel> children)
        {
           List<Tree> tlist= dbContext.Trees.AsNoTracking().Where(c => c.ParentId == parentId).ToList();
            foreach (Tree t in tlist)
            {
                TreeViewModel tvm = new TreeViewModel();
                tvm.id = t.Id;
                tvm.text = t.Title;
                tvm.attributes.url = t.Url;
                GetTreeBySelf(t.Id, tvm.children);
                children.Add(tvm);
            }
        }
        //添加页面
        public ActionResult UserAdd()
        { 
            return View();
        }
        //获取数据结构
        public ActionResult AjaxGetTree()
        {
            //树结构列表
            List<Tree> tlist = dbContext.Trees.AsNoTracking().ToList();
            return Json(tlist,JsonRequestBehavior.AllowGet);
        }

       
    }
}

使用EasyUI框架

创建index页面

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/JS/EasyUI/jquery.min.js"></script>
    <script src="~/JS/EasyUI/jquery.easyui.min.js"></script>
    <link href="~/JS/EasyUI/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/JS/EasyUI/themes/icon.css" rel="stylesheet" />
    <script src="~/JS/Index.js"></script>
</head>
<body class="easyui-layout">
    <div data-options="region:'north',title:'第三波网上书店',split:true" style="height:100px;"></div>
   
    <div data-options="region:'west',title:'导航栏',split:true" style="200px;">
        <ul id="tt"></ul>
    </div>
    <div data-options="region:'center',title:'工作区域'" style="padding:5px;background:#eee;">
        <div id="MyTabs" class="easyui-tabs"data-options="fit:true"  >
           
            <div title="我的信息" " style="padding:20px;display:none;">
                <p>
                    <input class="easyui-textbox" style="200px">
                    <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
                </p>
                <p>
                    <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'">刷新</a>
                    <a id="btnAlert" href="#" class="easyui-linkbutton">弹出消息框</a>
                    <a id="btnConfirm" href="#" class="easyui-linkbutton">弹出对话框</a>
                    <a id="btnNewPage" href="#" class="easyui-linkbutton">弹出新页面</a>
                    <div id="dd"></div>
                </p>
            </div>
        </div>
    </div>
</body>

</html>

index页面用JS脚本

(function () {
   
    function LoadList() {
        //左侧树节点
        $('#tt').tree({
            url: "/home/GetTree",
            //加载Json数据
            loadFilter: function (data) {    
                    return data;
            },

            onClick: function (node) {
                //判断面板是否存在(不存在创建页买,存在跳转到指定页面)
                var isOk = $("#MyTabs").tabs('exists', node.text);
                if (isOk == false) {
                    // 添加分页面板    
                    $('#MyTabs').tabs('add', {
                        title: node.text,
                        href: node.attributes.url,
                        closable: true,
                    });
                } else {
                    $("#MyTabs").tabs('select', node.text);
                }            

            }
        });  
    };

    //点击事件
    function BandList() {
        //点击弹出消息框
        $(function () {
            $("#btnAlert").click(function () {
                $.messager.alert('警告', '警告消息');    
            });
        });

        //点击弹出对话框
        $(function () {
            $("#btnConfirm").click(function () {
                $.messager.confirm('确认', '您确认想要删除记录吗？', function (r) {
                    if (r) {
                        alert('确认删除');
                    }
                });  

            });
        });
         //点击弹出新页面
        $(function () {
            $("#btnNewPage").click(function () {
                $('#dd').dialog({
                    title: 'My Dialog',
                     400,
                    height: 200,
                    closed: false,
                    href: '/Home/Text',
                    modal: true
                });  
            });
        });
    };

    $(function () {
        LoadList();
        BandList();
    });
})();

创建UserAdd页面

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>UserAdd</title>
</head>
<body>
    <script type="text/javascript">
        (function () {

            function loadList() {
                $('#dg').datagrid({
                    //路径
                    url: '/Home/AjaxGetTree',
                    //标题
                    title: "节点列表",
                    //加载提示信息
                    loadMsg: "正在加载中",
                    //分页
                    pagination: true,
                    columns: [[
                        { field: 'Id', title: '编号' },
                        { field: 'Title', title: '节点名称',  100 },
                        { field: 'Url', title: '路径',  100 },
                        { field: 'operator', title: '编辑'  }
                    ]]
                });  

            }
            $(function () {
                loadList();
            });
           
        })();
    </script>


    <div>

        <table id="dg"></table>
    </div>
</body>
</html>