兩年前，曾打算自己開發一個web開發框架，把部門、人員、權限、日志作為基本服務加入進去，在其基礎上可以做業務快速開發，結果沒有堅持下去，僅僅開了個頭就夭折了。究其原因，一方面是采用自己完全不熟悉的新技術，不算成熟的MVC，對習慣於WEB FORM開發的我，是一個比較大的沖擊，加上EntityFramework涌入的大量概念，對JQuery的一知半解，以及這三項技術自身不成熟帶來的BUG和版本的不斷升級變更，都帶來了很大困擾。兩年之后，重啟開發框架之旅。
開發工具選擇VS2012，后台使用MVC4.0+EntityFramework5，前台選用JQuery1.8.0+EasyUI1.3.1。
兩年前，曾經使用過JQuery，當時沒有成套的JQuery控件，往往是根據需要逐個搜尋，例如框架、Tab、彈出窗口等等，最大的問題就是沒有統一的風格和界面，缺少文檔和示例，以及網上各種對源碼進行任意修改和擴展的版本，需要自己花大量時間摸索和試驗，當時就覺得這種混亂的局面終會結束，出現一個統一的框架，現在來看，EasyUI做得相當不錯了，提供了大量常見控件，和統一的風格（包括界面風格和編程風格）。
官方網站：http://www.jeasyui.com/ 有控件說明、示例，另外有個翻譯的中文網站，缺點是沒有跟新版同步，很多參數和方法都對不起來了，所以建議看英文原版。
下面就來說一下最常見的布局。
對於MIS管理系統，常見的布局分為三大塊，頂部是系統名稱，加當前登錄人的賬號、姓名、部門等信息展現，以及注銷、切換賬號等操作按鈕；左側是系統菜單欄，右側是主工作區，點擊左側菜單，可以在主工作區顯示對應的業務處理界面。為了最大程度利用空間，通常還要求左側導航菜單欄可以折疊隱藏顯示。
之前的開發，通常就是使用Html的frameset標簽
<frameset cols="25%,50%,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset>
然后在自己編寫JS來控制折疊某個區域。
使用EasyUI就簡單多了,首先將下載的EasyUI包加入到工程中，我選擇放在web工程根目錄下，與視圖文件夾View同級存放，然后修改Home控制器對應的Index視圖：
1.在head標簽內部加入對EasyUI相關css樣式表的引用
@Styles.Render("~/EasyUI/themes/gray/easyui.css")
@Styles.Render("~/EasyUI/themes/icon.css")
2.在</body>標簽之前加入以下對js文件的引用
@Scripts.Render("~/EasyUI/jquery-1.8.0.min.js")
@Scripts.Render("~/EasyUI/jquery.easyui.min.js")
@Scripts.Render("~/EasyUI/locale/easyui-lang-zh_CN.js")
使用EasyUI的Layout控件有兩種方式，一種是使用div，若整個頁面都是布局，像本文這種情況，整個系統布局，則可以直接在body里加入EasyUI標記，如下所示：
<body class="easyui-layout"> <div region="north" title="" split="true" style="height: 100px;"></div> <div region="west" split="true" title="功能菜單" style="width: 200px;"> <ul id="mainMenu" class="easyui-tree"> </ul> </div> <div region="center" title="" style="padding: 5px; background: #eee;"> <div id="mainTabs" class="easyui-tabs" fit="true" border="false"> @* <div title="歡迎使用" closable="true"> <h1 style="font-size: 24px;">歡迎！</h1> <h1 style="font-size: 24px; color: red;">Welcome ！</h1> </div>*@ </div> </div> <div region="south" title="" split="true" style="height: 20px; text-align: center"> © @DateTime.Now.Year - 版權聲明 </div> </body>
效果圖如下：
EasyUI可以設定上下左右中五個區域，本文沒有使用右側區域，底部區域也僅僅放了一個版權聲明, 頂部是系統名稱，加當前登錄人的賬號、姓名、部門等信息展現，以及注銷、切換賬號等操作按鈕，左側為系統功能菜單導航樹，點擊葉節點后將在中心區域打開對應的業務功能頁面。中心區域還添加了一個EasyUI的Tab控件。
默認左側區域已經添加了可以折疊按鈕，其中split布爾屬性控制是否各區域邊框可拖動以便調整大小，title屬性可設置區域標題。
本文從實戰角度出發，僅指明關鍵屬性和要注意的事項，其他屬性請查閱官方網站說明。
關於樹形控件和Tab控件，將在后續中文章中陸續介紹。
第一次做開發平台，有些問題也在摸索和思考，歡迎同行討論，共同進步。
注：easyui商用需要付費授權，449刀，非年費，無時間和項目限制，其實這價格還說得過去