下面开始在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. HDU 6354.Everything Has Changed-简单的计算几何、相交相切圆弧的周长 (2018 Multi-University Training Contest 5 1005)

    6354.Everything Has Changed 就是计算圆弧的周长,总周长=大圆周长+相交(相切)部分的小圆的弧长-覆盖掉的大圆的弧长. 相交部分小圆的弧长直接求出来对应的角就可以,余弦公式, ...

  2. Codeforces 891B - Gluttony

    891B - Gluttony 题意 给出一个数字集合 \(a\),要求构造一个数组 \(b\) 为 \(a\) 的某个排列,且满足对于所有下标集合的子集 \(S=\{x_1,x_2,...,x_k\ ...

  3. Codeforces #432 Div2 D

    #432 Div2 D 题意 给出一些数字,如果这些数字的的 \(gcd\) 不为1则称这些数字 \(good\). 可以有两种操作: 花费 x 删掉一个数 花费 y 将一个数加 1 问使这些数 \( ...

  4. mysql 获取当前日期及格式化（转）

    MySQL 获取当前日期及日期格式 获取系统日期: NOW() 格式化日期: DATE_FORMAT(date, format) 注: date:时间字段,format:日期格式 select now ...

  5. POJ 3608 Bridge Across Islands （旋转卡壳）

    [题目链接] http://poj.org/problem?id=3608 [题目大意] 求出两个凸包之间的最短距离 [题解] 我们先找到一个凸包的上顶点和一个凸包的下定点,以这两个点为起点向下一个点 ...

  6. 3.3常用类（java学习笔记）Runtime与Process

    一.Runtime 我们来看下文档中对Runtime的说明: 每一个java程序都有一个属于Runtime类的实例,它允许程序连接到程序运行环境. 当前runtime可以用getRuntime()方法 ...

  7. Mongodb 学习笔记简介

    目录 1       准备工作... 5 1.1        相关网址... 6 1.1        下载安装... 6 1.1.1         下载:... 6 1.1.2         ...

  8. MathType输入矩阵或者向量的注意事项

    如图A区域是换行搞得,BC是插入矩阵,AC明显看着不一样,就是说行间不要使用换行,列间隔不要用空格(ctrl+shift+space),直接插入矩阵,向量就是矩阵的行或者列数目是1. 还有就是需要注意 ...

  9. 深入了解JavaScript权威指南

    JavaScript对象可以看作是属性的无序集合,每个属性就是一个键值对,可增可删.JavaScript中的所有事物都是对象:字符串.数字.数组.日期,等等.JavaScript对象除了可以保持自有的 ...

  10. 我的vim配置---jeffy-vim-v2.1.tar

    http://files.cnblogs.com/pengdonglin137/jeffy-vim-v2.1.rar 使用方法: 在Linux下,解压后,进入解压后的目录,执行./install.sh ...