MVC+EF+esayui初试（一布局加菜单显示）

最近都在做linq+ext.net的开发。这两天想学习下MVC和ef，刚好，在看ext.js的时候也喜欢上了esayui，所以就想用mvc+ef+esayui做一个汽车网后台管理来加强下。在这里也把我的经验和大家分享下。好了开始项目的准备工作，先准备下EsayUI的一些文件，可以到http://www.jeasyui.com/download/index.php下载最新的easyui包，然后在头部引入这个文件

 <link rel="stylesheet" type="text/css" href="/Content/Easy ui/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="/Content/Easy ui/themes/icon.css">

    <link rel="stylesheet" type="text/css" href="/Content/Easy ui/demo/demo.css">

    <script type="text/javascript" src="/Content/Easy ui/jquery.min.js"></script>

    <script type="text/javascript" src="/Content/Easy ui/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="/Content/Easy ui/locale/easyui-lang-zh_CN.js"></script>

由于这几个文件是每个页面通用的，所以把文件加在布局页中。这里建了一个JSCom.cshtml布局页，接着建立一个Index的控制器，添加Index视图，并引用JSCom.cshtml布局页,这里附上前台index页面的代码

<body class="easyui-layout">

    <div data-options="region:'north',border:false" style="height: 60px; background: #B3DFDA; padding: 10px">

        north region

    </div>

    <div data-options="region:'west',split:true,title:'管理'" style="width: 150px;">

        <div class="easyui-accordion" data-options="fit:true">

            <div title="菜单管理" data-options="iconCls:'icon-layout_content',tools: toolsAddMenu" style="overflow: auto;">

                <ul id="menu" class="easyui-tree" data-options="animate:true">

                </ul>

            </div>

            <div title="招聘管理" data-options="iconCls:'icon-user'">

                <ul id="zhaopin" class="easyui-tree">

                    <li data-options="iconCls:'icon-user_edit'">

                        <span>查看招聘信息</span>

                    </li>

                    <li data-options="iconCls:'icon-user_add'">

                        <span>添加招聘信息</span>

                    </li>

                    <li data-options="iconCls:'icon-bin_closed'">

                        <span>查看垃圾箱</span>

                    </li>

                </ul>

            </div>

            <div title="客户意见管理" data-options="iconCls:'icon-email'">

                <ul id="yijian" class="easyui-tree">

                    <li data-options="iconCls:'icon-email_open'">

                        <span>查看客户意见</span>

                    </li>

                    <li data-options="iconCls:'icon-bin_closed'">

                        <span>查看垃圾箱</span>

                    </li>

                </ul>

            </div>

            <div title="其他管理" data-options="iconCls:'icon-house'">

                <ul id="qita" class="easyui-tree">

                    <li data-options="iconCls:'icon-house'">

                        <span>其他管理1</span>

                    </li>

                    <li data-options="iconCls:'icon-house'">

                        <span>其他管理2</span>

                    </li>

                    <li data-options="iconCls:'icon-house'">

                        <span>其他管理3</span>

                    </li>

                    <li data-options="iconCls:'icon-house'">

                        <span>其他管理4</span>

                    </li>

                </ul>

            </div>

        </div>

    </div>

    <div id="win_Menu">

        <div class="easyui-layout" data-options="fit:true">

            <div data-options="region:'center'" style="padding: 10px;">

                <div style="padding: 10px 0 10px 60px">

                    <form id="ff" method="post">

                        <table>

                            <tr>

                                <td>菜单所属:</td>

                                <td>

                                    <input type="hidden" id="NID" name="ID" />

                                    <select id="TopID" name="TopID" class="easyui-combotree" style="width: 170px;" data-options="required:true,url:'/Menu/GetMenus'"></select>

                                </td>

                            </tr>

                            <tr>

                                <td>菜单名称:</td>

                                <td>

                                    <input class="easyui-validatebox" type="text" name="Name" data-options="required:true" /></td>

                            </tr>

                            <tr>

                                <td>前台URL:</td>

                                <td>

                                    <input class="easyui-validatebox" type="text" name="Url" data-options="required:true,validType:'url'" /></td>

                            </tr>

                            <tr>

                                <td>后台URL:</td>

                                <td>

                                    <input class="easyui-validatebox" type="text" name="AdminUrl" data-options="required:true" /></td>

                            </tr>

                            <tr>

                                <td>显示位置:</td>

                                <td>

                                    <input class="easyui-validatebox" type="text" name="Sort" data-options="required:true" /></td>

                            </tr>

                            @*                            <tr>

                                <td>图片:</td>

                                <td><input class="easyui-validatebox" type="text" name="subject" data-options="required:true"/></td>

                            </tr>*@

                            <tr>

                                <td>是否开放:</td>

                                <td>

                                    <select class="easyui-combobox" name="Display">

                                        <option value="1">是</option>

                                        <option value="0">否</option>

                                    </select>

                                </td>

                            </tr>

                        </table>

                    </form>

                </div>

            </div>

            <div data-options="region:'south',border:false" style="text-align: right; padding: 5px 0 0;">

                <a class="easyui-linkbutton" data-options="iconCls:'icon-accept'" href="javascript:void(0)" onclick="javascript:ffSubmit();">确定</a>

                <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="javascript:$('#win_Menu').window('close')">取消</a>

            </div>

        </div>

    </div>

    <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width: 100px; padding: 10px;">east region</div>

    <div data-options="region:'south',border:false" style="height: 50px; background: #A9FACD; padding: 10px;">south region</div>

    <div data-options="region:'center'">

        <div id="CTabs" class="easyui-tabs" data-options="fit:true">

            <div title="主页" data-options="iconCls:'icon-house'">

                主页

            </div>

        </div>

    </div>

</body>

这里布局后，前台页面如下：

这个说个细节问题，之前手动添加左侧的树形菜单，在添加<span>这个节点少个一闭合节点，结果找谷歌，火狐，ie8+都没问题，在ie7以下布局都错位了，找了一段时间再发现，真是坑爹呀。

好了，接下来先做菜单管理这块，由于菜单是动生成的，所以在js里面通过url异步到后台获取

 $("#menu").tree({

                url: "/Menu/GetMenus", onContextMenu: function (e, node) {

                    e.preventDefault();

                    $(this).tree('select', node.target);

                    $('#m_menu').menu('show', {

                        left: e.pageX,

                        top: e.pageY

                    });

                }

            });

创建一个Menu控制器，添加GetMenus的方法，因为这里考虑到菜单最多只有两级的情况，所以用拼接的方式生成

    //菜单数据格式

        //[{

        //       "id": 1,

        //       "text": "My Documents",

        //       "attributes":{url:"/new/update"},

        //       "children": [{

        //           "id": 11,

        //           "text": "Photos",

        //           "state": "closed"

        //       }]

        //   },

        //   {

        //       "id": 2,

        //       "text": "My ",

        //   }      ]

        public ActionResult GetMenus()

        {

            StringBuilder stb = new StringBuilder();

            stb.Append("[{\"id\":0,\"iconCls\":\"icon-layout_content\",\"text\":\"首菜单\"},");

            List<Menu> parentMenu = apa.Menus.Where(p => p.TopID == ).OrderBy(p => p.Sort).ToList();

            if (parentMenu.Count > )

            {

                foreach (var n in parentMenu)

                {

                    stb.Append("{\"id\":" + n.ID.ToString() + ",\"iconCls\":\"icon-layout_content\",\"attributes\":{\"url\":\"" + n.AdminUrl + "\"},\"text\":\"" + n.Name + "\"");

                    var SonMenus = apa.Menus.Where(p => p.TopID == n.ID).OrderBy(p => p.Sort).ToList();

                    if (SonMenus.Count > )

                    {

                        stb.Append(",\"children\":[");

                    }

                    foreach (var sn in SonMenus)

                    {

                        stb.Append("{\"id\":" + sn.ID.ToString() + ",\"iconCls\":\"icon-layout_header\",\"attributes\":{\"url\":\"" + sn.AdminUrl + "\"},\"text\":\"" + sn.Name + "\"},");

                    }

                    if (SonMenus.Count > )

                    {

                        stb.Remove(stb.Length - , );

                        stb.Append("]");

                    }

                    stb.Append("},");

                }

            }

            stb.Remove(stb.Length - , );

            stb.Append("]");

            return Content(stb.ToString());

        }

当然，这是应付式的做法，因为只考虑到只有两次菜单才敢去拼凑，不过要是多级菜单呢？明显，这种拼凑法简直是有点蛋疼，即不美观，又很看看懂，所以在后面改进了一下，采用递归的形式来生成菜单，首先，先创建一个表示树节点的类：

  /// <summary>

    /// 定义EasyUI树的相关数据，方便控制器生成Json数据进行传递

    /// </summary>

    public class EasyTreeData

    {

        /// <summary>

        /// ID

        /// </summary>

        public string id { get; set; }

        /// <summary>

        /// 节点名称

        /// </summary>

        public string text { get; set; }

        /// <summary>

        /// 是否展开

        /// </summary>

        public string state { get; set; }

        /// <summary>

        /// 图标样式

        /// </summary>

        public string iconCls { get; set; }

        /// <summary>

        ///其他属性

        /// </summary>

        public object attributes { get; set; }

        /// <summary>

        /// 子节点集合

        /// </summary>

        public List<EasyTreeData> children { get; set; }

        /// <summary>

        /// 默认构造函数

        /// </summary>

        public EasyTreeData()

        {

            this.children = new List<EasyTreeData>();

            this.state = "open";

            this.attributes = null;

        }

        /// <summary>

        /// 常用构造函数

        /// </summary>

        public EasyTreeData(string id, string text, string iconCls = "",object attributes=null,string state = "open")

            : this()

        {

            this.id = id;

            this.text = text;

            this.state = state;

            this.iconCls = iconCls;

            this.attributes = attributes;

        }

    }

有了这个类，就简单很多了，接着传一个递归的函数：

        //递归获取树节点

        public List<EasyTreeData> getSonMenus(int? topid = , string iconCls = "icon-layout_content")

        {

            List<Menu> parentMenu = apa.Menus.Where(p => p.TopID == topid).OrderBy(p => p.Sort).ToList();

            List<EasyTreeData> listTree = new List<EasyTreeData>();

            foreach (var sn in parentMenu)

            {

                EasyTreeData er = new EasyTreeData(sn.ID.ToString(), sn.Name, iconCls, new { url = sn.AdminUrl });

                er.children = getSonMenus(sn.ID, "icon-layout_header");

                listTree.Add(er);

            }

            return listTree;

        }

然后改下GetMenus这个方法：

        public ActionResult GetMenus()

        {

            return Json(getSonMenus(), JsonRequestBehavior.AllowGet);


        }

这样看上去就爽多了，没有那么复杂的拼接，而且是递归的方式，可以完全实现多级菜单。运行后效果如下：

好了，先到这样吧，下次在分享下添加菜单，企业、新闻信息，和datagrid、KindEditor在里面的使用。

本人也是菜鸟，分享这个主要是希望能有更多的学习者一起探讨，对于我不足的地方还请大家指导下。

MVC+EF+esayui初试（一布局加菜单显示）的更多相关文章

开源题材征集 + MVC&EF Core 完整教程小结
到目前为止,我们的MVC+EF Core 完整教程的理论部分就全部结束了,共20篇,覆盖了核心的主要知识点. 下一阶段是实战部分,我们将会把这些知识点串联起来,用10篇(天)来完成一个开源项目. 现向 ...
ASP.NET MVC+EF框架+EasyUI实现权限管理系列(23)-设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用
ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 (2):数据库访问层的设计Demo (3):面向接口编程 (4 ):业务逻辑层的封装 ...
ASP.NET MVC+EF框架+EasyUI实现权限管理系列(14)-主框架搭建
原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(14)-主框架搭建 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 (2 ...
ASP.NET MVC+EF框架+EasyUI实现权限管理(附源码)
前言:时间很快,已经快到春节的时间了,这段时间由于生病,博客基本没更新,所以今天写一下我们做的一个项目吧,是对权限的基本操作的操作,代码也就不怎么说了,直接上传源码和图片展示,下面我们直接进入主题介绍 ...
ASP.NET MVC通用权限管理系统(响应布局)源码更新介绍
一.asp.net mvc 通用权限管理系统(响应布局)源码主要以下特点: AngelRM(Asp.net MVC)是基于asp.net(C#)MVC+前端bootstrap+ztree+lodash ...
国产化之路-统信UOS + Nginx + Asp.Net MVC + EF Core 3.1 + 达梦DM8实现简单增删改查操作
专题目录国产化之路-统信UOS操作系统安装国产化之路-国产操作系统安装.net core 3.1 sdk 国产化之路-安装WEB服务器国产化之路-安装达梦DM8数据库国产化之路-统信UOS + ...
ASP.NET Core 中文文档第四章 MVC（3.3）布局视图
原文:Layout 作者:Steve Smith 翻译:娄宇(Lyrics) 校对:孟帅洋(书缘) 视图(View)经常共享视觉元素和编程元素.在本篇文章中,你将学习如何在你的 ASP.NET 应用程 ...
ASP.NET MVC+EF框架+EasyUI实现权限管理系列(24)-权限组的设计和实现(附源码)(终结)
ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 (2):数据库访问层的设计Demo (3):面向接口编程 (4 ):业务逻辑层的封装 ...
瞧一瞧,看一看呐,用MVC+EF快速弄出一个CRUD,一行代码都不用写,真的一行代码都不用写!!!!
瞧一瞧,看一看呐用MVC+EF快速弄出一个CRUD,一行代码都不用写,真的一行代码都不用写!!!! 现在要写的呢就是,用MVC和EF弄出一个CRUD四个页面和一个列表页面的一个快速DEMO,当然是在不 ...

随机推荐

VC++ 学习笔记（一）：如何开始
毫无疑问,学习C++是一件痛苦的事情. 我大概十年前接触C++.那是在学校里,准备考研究生,某学校要求考C++.我就开始一点一点学习,学习的过程还是比较舒服的.不得不说,就古典C++的理论,钱老讲的还 ...
Generating a new ASP.NET session in the current HTTPContext
void regenerateId() { System.Web.SessionState.SessionIDManager manager = new System.Web.SessionState ...
neo4j安装与示例
Neo4j有两种访问模式:服务器模式和嵌入模式参考,下面主要讲windows下这两种模式的配置与访问示例 1 Windows下Neo4j服务器模式安装与示例安装: 1.下载Neo4j,我下载的版本是 ...
dll return a string
char g_szText[1024]; __declspec(dllexport) const char * __stdcall FuncName(const unsigned char *p) { ...
Fedora 手动删除系统中不再需要的包
最新文章:Virson‘s Blog 1.安装yum-utils yum install yum-utils 2.使用package-cleanup --leaves列举系统中不再需要的包 packa ...
精选29款非常实用的jQuery应用插件
今天我们来分享一些实用的jQuery应用插件,没有特别花哨,但都比较实用,jQuery菜单.jQuery图片都有涉及到,一起来看看. 1.jQuery+CSS3仿IOS无线局域网Wifi DEMO演示 ...
mac word 快捷键
https://support.office.com/en-us/article/Word-keyboard-shortcuts-c0ca851f-3d58-4ce0-9867-799df7366 ...
MemCached用法
所需要的jar包: com.danga.MemCached.MemCachedClient com.danga.MemCached.SockIOPool 自行下载/** * 缓存服务器集群,提供缓存连 ...
log4j2配置
在eclipse使用log4j2的时候遇到个问题: 我已经把log4j2.xml放到/src目录下了,而且设置从trace开始都打印到终端,但是我的程序里trace, info都不打印,到了error ...
bower 新建.bowerrc文件
Twitter工程师团队推出了Bower,这是一个针对Web开发的包管理器.该工具主要用来帮助用户轻松安装CSS.JavaScript.图像等相关包,并管理这些包之间的依赖. 随着网页功能变得越来越复 ...

MVC+EF+esayui初试（一 布局加菜单显示）

MVC+EF+esayui初试（一 布局加菜单显示）的更多相关文章

随机推荐

热门专题

MVC+EF+esayui初试（一布局加菜单显示）

MVC+EF+esayui初试（一布局加菜单显示）的更多相关文章