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 == 0).OrderBy(p => p.Sort).ToList();

            if (parentMenu.Count > 0)

            {

                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 > 0)

                    {

                        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 > 0)

                    {

                        stb.Remove(stb.Length - 1, 1);

                        stb.Append("]");

                    }

                    stb.Append("},");

                }

            }

            stb.Remove(stb.Length - 1, 1);

            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 = 0, 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(0), JsonRequestBehavior.AllowGet);


        }

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

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

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

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

时间： 2024-11-08 17:32:08

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

ASP.NET MVC EF 数据库初试水

首先,创建MVC项目,引用EntityFramework,创建了一个Student类 using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace EFF.Models { public class Student { public int StudentID { get; set; } public string Name { get; set; } public i

开源题材征集 + MVC&amp;EF Core 完整教程小结

到目前为止,我们的MVC+EF Core 完整教程的理论部分就全部结束了,共20篇,覆盖了核心的主要知识点. 下一阶段是实战部分,我们将会把这些知识点串联起来,用10篇(天)来完成一个开源项目. 现向园友征集题材,你提需求我来实现. 请在评论中提出你的需求,并加以简明扼要的描述. 题材最好是有趣的.有一定应用价值的,例如像Trello这样的效率管理系统. 我将会在选取一个相对适合的题材,通过敏捷开发,快速迭代,将详细开发过程记录下来,抛砖引玉,供大家参考. 前面已完成的20篇我们以技术为主导,后

ASP.NET MVC+EF框架+EasyUI实现权限管理系列(4)-业务逻辑层的封装

原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(4)-业务逻辑层的封装 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo    (3):面向接口编程 前言:前面几篇博客我们基本已经介绍完了搭建整个项目和数据库访问层以及一些业务逻辑层的实现,当然了,我们的数据库访问层这样还是可以在进行封装的,但是我到这里就行了吧,项目也不大,不需要那么麻烦的,那么我们今天开始介绍我们需要介绍的内容,那就是我

ASP.NET MVC+EF框架+EasyUI实现权限管理系列(8)-DbSession线程内唯一

原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(8)-DbSession线程内唯一 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo    (3):面向接口编程   (4 ):业务逻辑层的封装  (5):前台Jquery easyUI实现   (6):EF上下文实例管理   (7):DBSession的封装 前言:通过上篇博客我们完成了对DbSession的代码编写,DbSession就相

【菜鸟看框架】——MVC+EF实现分页

引言 分页这个名词对于现在的我们来说已经非常的熟悉,因为我知道了为什么我会在显示数 据的时候采用分页的形式,有人说为了显示的美观,有的人说为了在众多的数据中能容 易的找到我们想要的数据等等,这些都是其中的一些原因,但是这些东西我们完全可以 用VS自带的控件来实现,也就是所以的假分页,那么假分页和真分页的本质是什么呢? 假分页是一次性把所要的数据全部在数据库中查询出来,只是在显示的时候分页显示罢 了,这样显然是非常影响性能的,而真分页是每次取每页的数据条数,这样在大数据的 时候就能体现出了它的优势

MVC3+EF4.1学习系列(十)----MVC+EF处理树形结构

通过前几篇文章 我们处理了 一对一, 一对多,多对多关系 很好的发挥了ORM框架的做用 但是 少说了一种 树形结构的处理, 而这种树形关系 我们也经常遇到,常见的N级类别的处理, 以及经常有数据与类别挂钩.今天主要写下EF处理树形结构以及 MVC如何展示树形结构. 前面几篇的例子 一直用的是一个例子,内容是连贯的.这篇是完全单独的~ 先来说下工作中会遇到的常见场景 针对这几个场景来处理~ 1.类别 a.类别可以有无限级别 b.类别的最末端 不确定是第几级 某个节点 可以到二级 其他的节点 有可能

MVC+EF bootstrap-table使用DataTable

MVC+EF返回数据集时都会对应一个实体,这种情况当然是确定的实体,但是当返回的实体是不确定的又该如何?思前想后,觉得datatable应该可以满足需求,但是当兴致勃勃的组合完sql按照以前的方式( return Json(new { total = pageCount, rows = list }, JsonRequestBehavior.AllowGet);)返回json时前台接收报错 ”序列化类型为“System.Reflection.RuntimeModule”的对象时检测到循环引用“

MVC+EF 理解和实现仓储模式和工作单元模式

MVC+EF 理解和实现仓储模式和工作单元模式 原文:Understanding Repository and Unit of Work Pattern and Implementing Generic Repository in ASP.NET MVC using Entity Framework 文章介绍 在这篇文章中,我们试着来理解Repository(下文简称仓储)和Unit of Work(下文简称工作单元)模式.同时我们使用ASP.NET MVC和Entity Framework 搭

ASP.NET MVC+EF框架+EasyUI实现权限管理系列

http://www.cnblogs.com/hanyinglong/archive/2013/03/22/2976478.html ASP.NET MVC+EF框架+EasyUI实现权限管理系列之开篇 前言:博客又有一段时间没有更新了,心里感觉这段时间空空的,好像什么都没有学下,所以就想写博客,所以就有了这个系列,这里当然也要感谢大家了,因这个 项目我已经上传了,得到了很多网友的评价,也有好多人发邮件给我说这个框架容易出现问题,不能访问,这也是支持我写这个系列的动力,我将这个项目写成一个 系列