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