一、目錄
1、多層架構+MVC+EF+AUTOFAC+AUTOMAPPER；
3、Ligerui首頁的快速搭建
4、Ligerui Grid組件--學生信息列表。
二、正文
（嘿，寫完了才發現這篇文章挺水。本來還想說說那些JS代碼的，想想還是不繼續水了……但是寫都寫了，湊個數，哈哈）
大多數信息管理系統首頁都是ligerui官網首頁這個模樣，左邊導航，右邊一個iframe。高級點的帶選項卡。
在這個首頁中，包含了ligerui很多組件：ligerLayout（布局）、Tab（選項卡）、ligerAccordion（面板）、ligerTree（樹）。ligerLayout將頁面划分塊，一般就是上下左右中（有的控件，如easyui是東南西北中），主要菜單那一塊就是左，右邊內容就是右，也可能是中（隱藏右邊）。Tab對應圖中“我的主頁”，操作觀感和瀏覽器頂部選項卡一樣。ligerAccordion在圖中對應的是主要菜單、功能列表、應用場景、實驗室，點擊可以展開或者隱藏。ligerTree嘛就是功能列表下面那一堆嘍。
那我們的標題是“快速構建”，那咋個算快呢？Follow me：
First Step:先去這下載ligerui源碼：http://git.oschina.net/ligerui/LigerUI/，下載來的文件把Source文件夾拷貝進我們的VS解決方案當中；
Second Step:第一篇文章說過，我們UI層是基於MVC的，那自然需要在任意Controller下新建一個action，比如我們是這樣的：
1 public class LigerUIController : Controller 2 { 3 //
4 // GET: /Admin/LigerUI/
5
6 public ActionResult Index() 7 { 8 return View(); 9 } 10
11
12 }
接着，在Index action方法體內右鍵添加視圖Index。
Third Step:來到我們的ligerui官網首頁鼠標右鍵：
點擊過后框架的代碼就出來嘍，全部復制到我們第二步新建的Index視圖當中。到這，已經成功一大半。
Fourth Step:MVC里頭因為引入了路由機制，所以我們所復制代碼中引入的JS文件路徑：
需要修改：
上圖有展現了引入的兩種常用方式，第一種是MVC自帶的方法，第二種是使用絕對路徑。上圖路徑是在我項目當中相關文件的路徑。CSS樣式引入和JS一致。
Fifth Step:第四步修改完成后，把我們的項目運行起來，在瀏覽器地址欄輸入剛才我們新建的action路徑，比如我的就是:http://localhost:6273/ligerui/index ，哈，效果出來了：
是不是和官網的不太一樣，這是為啥呢？如果你是谷歌瀏覽器，按下F12快捷鍵，點擊Console:
看到木，錯誤全在這！前五個錯誤告訴我們哪些文件找不到，你只需要在index視圖當中找到相應代碼，並修改其路徑（Source文件夾當中）就能達到和官網一致效果！
可以看到我們就是復制源碼，小小修改。
還有就是左側功能列表下的樹控件的數據來自一個JS文件，從這里看出來：
1 //樹
2 $("#tree1").ligerTree({ 3 //注意這里indexdata
4 data: indexdata, 5 checkbox: false, 6 slide: false, 7 nodeWidth: 120, 8 attribute: ['nodename', 'url'], 9 onSelect: function (node) { 10 if (!node.data.url) return; 11 var tabid = $(node.target).attr("tabid"); 12 if (!tabid) { 13 tabid = new Date().getTime(); 14 $(node.target).attr("tabid", tabid) 15 } 16 f_addTab(tabid, node.data.text, node.data.url); 17 } 18 });
source文件夾找到indexdata.js文件，按需修改節點名稱即可。
這種“查看網頁源代碼”對於學習前端控件挺有用的，看官網demo時候，右鍵“查看網頁源代碼”，仿照官網例子小改動來滿足自己的需求。
下幾篇，用一個學生信息列表來看看ligerui中的grid組件。
2013-12-03