下面开始在UserManager.Web中利用easyUI构建web。

1. 先删除自带的controllers、models和views（里面的shared和web.config可以保存）下面的文件

2. 要利用easyUI，首先去网上下载jquery-easyui-1.3.2.zip，同时下载一份EasyUI-1.3.2.CHM帮助文档，方便查阅。

这里给出下载链接分享：

链接: http://pan.baidu.com/s/1c2xAGKS 密码: pkd6

解压后的easyui是这样的

3. 下面在Controllers右击添加新的控制器-HomeController.cs

这一部分可以先看前面提到的极客学院中讲解MVC的视频，简单了解一下。

4. 在Views视图下创建HomeController.cs对应的视图，Views先添加新建文件夹，命名为Home

再在Home下新建视图

命名为Index，不选择母版，添加。

这时web项目已经新增了HomeController.cs和Index.aspx两个文件，前者用来写后台判断逻辑，后者则用来表示页面。所以打开Home-Index，我们刚刚下载的easyUI也是在这里运用。

忘了介绍，easyUI是一款简单，功能强大的js框架，在jQuery基础上发展而来的。

http://www.jeasyui.com/index.php

这里是它的官方网址，里面有很多demo和教程可以学习观看和利用。

5. 把下载的easyUI解压后添加到添加到Web-Content下面，我们可以复制部分要用到的文件即可。先在Content下面新建Easyui文件夹（和Views新建Home操作一样，重复的地方就不图示了）。

把jquery-easyui-1.3.2目录下的jquery-1.8.0.min.js和jquery.easyui.min.js直接复制（快捷键Ctrl+C）复制到Content-Easyui下（快捷键Ctrl+V），同样，复制locale下的easyui-lang-zh_CN.js和整个themes文件夹。

6. 添加js库到（home）Index中。（因为项目Views中可能包含多个Index.aspx，这里前面括号加上前缀表示属于哪个视图的index页面）

按照顺序添加jquery-1.8.0.min.js、jquery.easyui.min.js、easyui-lang-zh_CN.js！

然后为（home）Index添加easyui/themes/default/easyui.css和themes/icon.css的样式。

7. 使用easyui中的layout样式添加到（home）Index中。

可以先查看下载的jquery-easyui-1.3.2/demo/layout中的demo样例，或者直接打开EasyUI-1.3.2.CHM（注意：把chm放在easyui文件夹下面，否则打开不能完整显示图片），查阅layout的使用。

<body class="easyui-layout">

    <div data-options="region:'north',border:false" style="height:61px;background:#0660bb;">

        <img src="/Content/Images/logo.png"/>

    </div>

	<div data-options="region:'west',split:true,title:'菜单栏'" style="width:250px;padding:10px;">west content</div>

	<div data-options="region:'south',border:false" style="height:20px;background:#ccc;padding:1px">当前登录人：JennyJiang</div>

	<div data-options="region:'center',title:'主面板'" style="padding:10px">hello world!</div>

</body>

　　将（home）Index中的<body>替换为上面的代码，显示layout：

layout按照上左右下中（north-west-east-south-center）的顺序，在使用easyui的layout时，必须将body设置class=“easyui-layout”，否则就没有用到，easyui的样式通过data-options来调整。其中，center是必须添加的，其他面板可以删除不显示。layout的data-options请查阅chm帮助文档学习。

8. 使用easyui的tree，设置菜单栏

使用帮助文档中的第二种格式，定义id为tt的ul，将tree的内容以json的格式传递，定义在MessController.cs中。

（home）Index中的body如下：

<body class="easyui-layout">

    <div data-options="region:'north',border:false" style="height:61px;background:#0660bb;">

        <img src="/Content/Images/logo.png"/>

    </div>

    <div data-options="region:'west',split:true,title:'菜单栏'" style="width:250px;padding:10px;">

        <ul id="tt"></ul>

    </div>

    <div data-options="region:'south',border:false" style="height:20px;background:#ccc;padding:1px">当前登录人：JennyJiang</div>

    <div data-options="region:'center',title:'主面板'" style="padding:10px">hello world!</div>

    <script type="text/javascript">

        $('#tt').tree({

            url: '/Mess/HomeMenu'

        });

    </script>

</body>

在Controllers中新建控制器，MessController.cs，代码如下：其中定义了tree中显示的内容，即一个json的字符串返回

namespace UserManager.Web.Controllers

{

    public class MessController : Controller

    {

        //

        // GET: /Json/

        public ActionResult HomeMenu()

        {

            string json = string.Empty;

            json = @"[{

                    ""id"":1,

                    ""text"":""用户列表"",

                    ""children"":[{

                        ""id"":11,

                        ""text"":""普通用户"",

                        ""state"":""closed"",

                        ""children"":[{

                            ""id"":111,

                            ""text"":""用户添加""

                        },{

                            ""id"":112,

                            ""text"":""用户功能""

                        }]

                    },{

                        ""id"":12,

                        ""text"":""超级用户"",

                        ""state"":""closed"",

                        ""children"":[{

                            ""id"":121,

                            ""text"":""用户添加""

                        },{

                            ""id"":122,

                            ""text"":""用户功能""

                        }]

                    },{

                        ""id"":13,

                        ""text"":""index.html""

                    },{

                        ""id"":14,

                        ""text"":""about.html""

                    },{

                        ""id"":15,

                        ""text"":""welcome.html""

                    }]

                }]";

            return Content(json);

        }

    }

}

显示页面如下：

9. 使用easyui的tab，点击左边菜单栏的添加用户，可以在右边主面板中显示

（home）Index中的body如下

<body class="easyui-layout">

    <div data-options="region:'north',border:false" style="height:61px;background:#0660bb;">

        <img src="/Content/Images/logo.png"/>

    </div>

    <div data-options="region:'west',split:true,title:'菜单栏'" style="width:250px;padding:10px;">

        <ul id="tt"></ul>

    </div>

    <div data-options="region:'south',border:false" style="height:20px;background:#ccc;padding:1px">当前登录人：JennyJiang</div>

    <div data-options="region:'center',title:'主面板'" style="padding:10px">

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

            <div title="home" style="padding:20px;display:none;">

                hello world!

            </div>

        </div>

    </div>

    <script type="text/javascript">

        $('#tt').tree({

            url: '/Mess/HomeMenu'

        });

        $('#tt').tree({

            onClick: function (node) {

                //alert(node.text);  // alert node text property when clicked

                // add a new tab panel

                $('#tabs').tabs('add', {

                    title: node.text,

                    content: 'Tab Body',

                    closable: true,

                });

            }

        });

    </script>

</body>

当点击左边菜单栏选项时，右边窗口会显示对应名称的tab，内容显示“Tab Body”。

但重复点击时仍然添加新的tab，对添加新的tab代码进行改进，查看easyui关于tab的帮助文档，有个exits。。。改进代码如下：

$('#tt').tree({

            onClick: function (node) {

                //alert(node.text);  // alert node text property when clicked

                // add a new tab panel   这里使用exits判断tab是否已经存在

                if($('#tabs').tabs('exists',node.text))

                {

                    $('#tabs').tabs('select',node.text);

                }

                else

                {

                    $('#tabs').tabs('add', {

                    title: node.text,

                    content: 'Tab Body',

                    closable: true,

                    });

                }

            }

        });

修改后，重复单击同一菜单栏时，不会再新建新的tab，而是返回到已建的tab。

另外，发现点击文件夹，也会新建tab，通过“id”筛选过滤简单地处理了。

10. 为tab创建一个新的view，而不是显示简单的“Tab Body”。新的视图采用easyui的datagrid。

先在Views-Home下新建视图UserEvent.aspx，这里一定要注意添加完视图后一定要返回修改HomeController.cs，为其添加一个UserEvent的跳转函数。

（将上面的代码中的content:xx替换为href:xx）

这里可以简单先参考帮助文档里的datagrid显示。

然而，每个菜单栏的选项点击后，都自动跳转到同一页面，有时间的话，大家可以多写几个view，根据node.text分别对应到相应的视图。

今天的学习先到这里，下一篇来写登录注销和数据库（SQLite）的一些东西。

最后放一张结果图：

asp.net+mvc+easyui+sqlite 简单用户系统学习之旅（二）—— easyui的简单实用的更多相关文章

  1. asp.net+mvc+easyui+sqlite 简单用户系统学习之旅（三）—— 简单登录页面+sqlite+动软代码生成器的使用

    上一节讲到利用easyui的layout.tree.tab和datagrid创建用户管理的页面,注意利用到easyui的页面一定要按顺序添加jQuery和easyUI的.js和.css样式,灵活查看e ...

  2. asp.net+mvc+easyui+sqlite 简单用户系统学习之旅（六）—— 简单过滤器的使用

    有些同学喜欢在测试或运行项目时,直接跳转页面到Home/Index下,但本次项目直接输入Home/Index则会报错 因为home/index中有个user.name参数,如果启动项目后直接跳转到ho ...

  3. asp.net+mvc+easyui+sqlite 简单用户系统学习之旅—— 摘要

    首次接触asp.net开发,希望把自己的学习之旅写下来,一方面做个知识归纳技术总结,另一方面开放到博客中,和大家一起交流学习! asp.net是目前流行的web开发技术之一,是微软旗下开发的基于.ne ...

  4. asp.net+mvc+easyui+sqlite 简单用户系统学习之旅（四）—— session传递登录人信息显示+用户注销

    前面的学习,已经做好了简单的登录和主页,涉及了三层软件架构,mvc,easyui的layout.tree.tab.window,sqlite,动软代码自动生成. 下面完善一下登录跳转主页后,在sout ...

  5. asp.net+mvc+easyui+sqlite 简单用户系统学习之旅（一）—— 手把手教你创建第一个三层架构+mvc的asp.net项目

    下面开启项目 1. 打开vs2010-文件-新建项目 2. 先创建一个空的解决方案: 选择其他项目类型-visual studio 解决方案-空白解决方案(默认.NET Framework 4),项目 ...

  6. asp.net+mvc+easyui+sqlite 简单用户系统学习之旅（七）—— 添加用户到数据库-obj转json

    这一节讲一下如何添加用户名和密码到已建的sqlite.db数据库中. 当在datagrid的toolbar中输入用户名.密码,然后点击添加按钮时,将该用户加入数据库,并显示出来.datagrid表格里 ...

  7. asp.net+mvc+easyui+sqlite 简单用户系统学习之旅（五）—— 解决tabs选择已建tab显示但datagrid的toolbar消失的问题

    项目需要反复运行,调整bug.发现在选择已有选项卡时,虽然不需要再新建tab,直接跳转到已有的tab上,但问题是显示的datagrid有事会出现toolbar消失的问题.网上也有不少同学出现类似问题, ...

  8. MongoDB学习：（二）MongoDB简单使用

    MongoDB学习:(二)MongoDB简单使用 MongoDB使用: 执行mongodb的操作之前,我们需要运行命令,来进入操作命令界面 >mongo 提示该错误,说明我们系统缺少一个补丁,该 ...

  9. 《ASP.NET MVC 5 高级编程》学习笔记

    前言: 记得当初培训的时候,学习的还是ASP.NET,现在回想一下,图片水印.统计人数.过滤器....HttpHandler是多么的经典! 不过后来接触到了MVC,便立马爱上了它.Model-View ...

随机推荐

  1. js中OOP小指南

    js中OOP小指南 在指南中,我将尝试解析以面向对象规范聚焦的es6的新特性. 首先, 什么是设计模式 范例是某个事务的例子或模型,在某种情况下,按照一种模式创建了计算机程序. 什么是面向对象 显然你 ...

  2. HDU 6216 A Cubic number and A Cubic Number【数学思维+枚举/二分】

    Problem Description A cubic number is the result of using a whole number in a multiplication three t ...

  3. Python与数据结构[3] -> 树/Tree[2] -> AVL 平衡树和树旋转的 Python 实现

    AVL 平衡树和树旋转 目录 AVL平衡二叉树 树旋转 代码实现 1 AVL平衡二叉树 AVL(Adelson-Velskii & Landis)树是一种带有平衡条件的二叉树,一棵AVL树其实 ...

  4. [BZOJ 2817] 波浪

    Link: BZOJ 2817 传送门 Solution: 算是比较神的DP了吧, 首先这个绝对值处理起来很难受,肯定要想办法去掉 于是想到从小到大插入的方式,便不存在绝对值的问题了 插入一个数只有5 ...

  5. [BZOJ1095]捉迷藏

    点了动态点分治的科技树,这道题是树形态不变的动态点分治,形态变化的话...待会补 考虑点分治过程中的这样一种结构:按递归层次把当前层的重心与上层重心互相连接,这就是点分治树,容易看出它的树高只有$O( ...

  6. [Interview]读懂面试问题，在面试官面前变被动为主动

    面试是供需双方心理的较量,作为求职者来说,了解对方问题的内涵,做到“明明白白他的心”,就能变被动为主动.因此,读懂面试问题,掌握面试考官的提问的目的,有准备.有针对性地回答,对提高应聘的成功率是有很大 ...

  7. Delphi 7生成XML

    文件格式为: Day 制1課 U12 ASSY01 Wrist 1009 0 2018/05/18 09:35:59 Day 制1課 U12 ASSY02 Wrist 1010 0 2018/05/1 ...

  8. 自问自答：在VB中如何实现像C++一样printf的功能

    问: 每个整型都转换成5位的字符串,不足的在前面补0.比如:1转换成“00001”,10转换成“00010”.怎么实现? 答: format(1,"00000") from: 百度 ...

  9. 解决sqlite删除数据后，文件大小不变问题 转载

    原文地址:http://blog.csdn.net/yangchun1213/article/details/7656146   说了这么多,没进主题,我的主题是给Sqlite在删除数据后擦屁股. 大 ...

  10. 【java】java中直接根据Date 获取明天的时间

    展示代码: @Test public void dateTest(){ Date now = new Date(); System.out.println(now); // java.util.Dat ...