下面开始在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）的一些东西。
最后放一张结果图：
