下面开始在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. 从1到整数n中1出现的次数

    题目:输入一个整数n,求从1到n这n个整数的十进制表示中1出现的次数.例如输入12,从1到12这些整数中包含1的数字有1,10,11和12共出现了5次.   不考虑时间效率的解法: int Numbe ...

  2. HDU 2521 反素数（数论，比较）

    #include<iostream> #include<cstring> #include<cmath> #include<cstdio> using ...

  3. 31、Django实战第31天：我的课程

    1.编辑usercenter-mycourse.html继承usercenter-base.html 2.编辑users.views.py ... from operation.models impo ...

  4. Ze_Min Tree 主席树

    前言 主席树,也叫可持久化线段树,所以他的本质是颗线段树,而可持久化指的是这颗线段树可以访问过去某个时刻线段树上的信息. 应用 应用的比较多的是查询区间的第k大值(因为其他的数据结构不好做). 实现 ...

  5. openresty的ngx.timer.at

    openresty的ngx.timer.at真是个强大的方法. 例如某些函数不可以在一些NGINX的执行阶段使用时,可以ngx.timer.at API 创建一个零延迟的timer,在timer中去处 ...

  6. SSH学习——Spring基础

    1.理解什么是Spring框架? spring是J2EE应用程序框架,是轻量级的IOC和AOP的容器框架,主要是针对javaBean的生命周期进行管理的轻量级容器,可以单独使用,也可以和Struts框 ...

  7. RabbitMQ技术详解（转）

    RabbitMQ是什么 定义 RabbitMQ是一个开源的AMQP实现,服务器端用Erlang语言编写,支持多种客户端,如:Python.Ruby..NET.Java.JMS.C.PHP.Action ...

  8. oracle 中的%type,%rowtype

    oracle 中的%type,%rowtype1.使用%TYPE 在许多情况下,PL/SQL变量可以用来存储在数据库表中的数据.在这种情况下,变量应该拥有与表列相同的类型.例如,students表的f ...

  9. vertica数据库怎么查看连接数是否已经达到最大值

  10. ORACLE查看并修改最大连接数的具体步骤

      第一步,在cmd命令行,输入sqlplus 第二步,根据提示输入用户名与密码 1. 查看processes和sessions参数 SQL> show parameter processes ...