下面開始在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）的一些東西。
最后放一張結果圖：
