下面开始在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. fmod()函数和modf()函数

    最近从博客上看到了一个fmod函数,结果又蹦出来一个modf函数 fmod()函数: 头文件:#include<math.h> C库函数... fmod()用来对浮点数进行取模(求余),原 ...

  2. Codeforces 702A Maximum Increase(dp)

    题目链接:http://codeforces.com/problemset/problem/702/A 题意: 给你N个数,a[0], a[1], a[2], ....., a[n-1],让你找出最长 ...

  3. python3爬虫爬取煎蛋网妹纸图片（下篇）2018.6.25有效

    分析完了真实图片链接地址,下面要做的就是写代码去实现了.想直接看源代码的可以点击这里 大致思路是:获取一个页面的的html---->使用正则表达式提取出图片hash值并进行base64解码--- ...

  4. Linux命令之free

    free [选项] 显示系统中未使用和使用的内存情况,包括物理内存.交换区内存(swap)和内核缓冲区内存.共享内存将被忽略. (1).选项 -b,-k,-m,-g 以Byte,KB,MB,GB为单位 ...

  5. 为何jsp 在resin下乱码，但在tomcat下却工作良好的问题

    关于JSP页面中的pageEncoding和contentType两种属性的区别:       pageEncoding是jsp文件本身的编码       contentType的charset是指服 ...

  6. [NOI2018]屠龙勇士(exCRT)

    首先很明显剑的选择是唯一的,直接用multiset即可. 接下来可以发现每条龙都是一个模线性方程.设攻击第i条龙的剑的攻击力为$s_i$,则$s_ix\equiv a_i\ (mod\ p_i)$. ...

  7. [Atcoder Grand Contest 003] Tutorial

    Link: AGC003 传送门 A: 判断如果一个方向有,其相反方向有没有即可 #include <bits/stdc++.h> using namespace std; ]; map& ...

  8. 【数位dp】hdu3555 Bomb

    题意就是找0到n有多少个数中含有49.数据范围接近10^20 DP的状态是2维的dp[len][3]dp[len][0] 代表长度为len不含49的方案数dp[len][1] 代表长度为len不含49 ...

  9. 【动态规划】【二分】【最长不下降子序列】洛谷 P1020 导弹拦截

    最长不下降子序列的nlogn算法 见 http://www.cnblogs.com/mengxm-lincf/archive/2011/07/12/2104745.html 这题是最长不上升子序列,倒 ...

  10. 求一个整数个位数之和 Exercise06_02

    import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:求一个整数个位数之和 * */ public class Exercise ...