ASP.NET MVC+EF框架+EasyUI實現權限管系列 (開篇) (1):框架搭建 (2):數據庫訪問層的設計Demo (3):面向接口編程 (4 ):業務邏輯層的封裝
前言：今天經理買了一個諾基亞的Windows Phone 8系統，特感興趣，所以在哪里看了很長時間，這篇文章就寫的有點遲， 從這個Demo開始到現在我已經寫了4篇博客了，終於可以看到頁面的東西了，當然這相對於這個項目來說的話那時小巫見大巫了，權限項目還沒有開始寫呢，當然前面的這些基礎是最終要的，所以我寫的很慢，而且組織句子真心不容易，這不是說知識點，而是直接將項目往上寫，寫的太寬了，怕大家看不懂，所以寫的比較詳細，但是皇天不負苦心人，現在這個Demo的后台基本寫完了，現在我們開始使用easyUI設計前台的頁面，很快我們就能夠看到效果了。廢話不多說了，下面我們開始我們的征程。
1． 實現用戶(UserInfo)的增刪改查
(1)當我們開始着手設計前台頁面的時候，我們先要下載到easyUI的官方Demo，然后我們在LYZJ.UserLimitMVC.UI.Portal項目中添加UserInfoController控制器，添加完控制器后，會有一個Index方法，最后我們在Index方法上面添加一個視圖(View)，這時候我們就要在前台寫easyUI的代碼了，所以我們就將easyUI的Demo放到我們的項目里面，方便我們的使用。
(2)我們在項目的Content文件夾下面新建一個JqueryeasyUI文件夾,然后將easyUI的所有項目都拷貝過來存放到此文件夾下面。
(3)這時候我們的項目配置就完成了，下面看一下我們的文件是如何存放在里面的，截圖所示：
(4)當添加easyUI的時候每個人的編程習慣或者說公司的規定都會有一定的說明，我這樣添加是一種方法，還有一種方法就是“各就各位”，也就是說JS文件就放到Jquery文件夾下面，而其他文件放到content文件夾下面，但是這樣的話我覺得用起來有點亂，所以我就這樣放置了，大家喜歡怎么樣就怎么樣來放置。
2.使用easyUI實現用戶的增刪改查的頁面Index.cshtml
(1)因為這里是使用easyUI來實現的頁面，所以我就不解釋了，因為我使用的時easyUI的DataGird控件，所以我們到easyUI的Demo里面找到這個頁面，然后對這個頁面進行復制，修改操作即可，當然我的前台代碼我也給了非常詳細的注釋，大家可以參考一下。下面我就展示一下代碼：
1 @{ 2 3 Layout = null; 4 5 } 6 7 <!DOCTYPE html> 8 9 <html> 10 11 <head> 12 13 <meta name="viewport" content="width=device-width" /> 14 15 <title>實現用戶的增刪改查</title> 16 17 @*添加Jquery EasyUI的樣式*@ 18 19 <link href="~/Content/JqueryEasyUI/themes/default/easyui.css" rel="stylesheet" /> 20 21 <link href="~/Content/JqueryEasyUI/themes/icon.css" rel="stylesheet" /> 22 23 @*添加Jquery，EasyUI和easyUI的語言包的JS文件*@ 24 25 <script src="~/Content/JqueryEasyUI/jquery-1.8.0.min.js"></script> 26 27 <script src="~/Content/JqueryEasyUI/jquery.easyui.min.js"></script> 28 29 <script src="~/Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js"></script> 30 31 @*實現對EasyUI的DataGird控件操作的JS代碼*@ 32 33 <script type="text/javascript"> 34 35 $(function () { 36 37 //當頁面首次刷新的時候執行的事件 38 39 initTable(); 40 41 }); 42 43 //實現對DataGird控件的綁定操作 44 45 function initTable() { 46 47 $('#test').datagrid({ //定位到Table標簽，Table標簽的ID是test 48 49 // UserInfo是控制器，GetAllUserInfos是控制器中獲取用戶數據的一個Action 50 51 url: '/UserInfo/GetAllUserInfos', //指向后台的Action來獲取當前用戶的信息的Json格式的數據 52 53 title: '用戶的展示', //標識 54 55 //下面的這些屬性如果誰不太清楚的話我建議去官方網站去學習或者在群里我們討論，這里就不說了 56 57 iconCls: 'icon-save', 58 59 width: 500, 60 61 height: 350, 62 63 nowrap: true, 64 65 autoRowHeight: false, 66 67 striped: true, 68 69 collapsible: true, 70 71 pagination: true, 72 73 rownumbers: true, 74 75 sortName: 'ID', 76 77 sortOrder: 'desc', 78 79 remoteSort: false, 80 81 idField: 'ID', 82 83 frozenColumns: [[ 84 85 { field: 'ck', checkbox: true }, 86 87 { title: '主鍵', field: 'ID', width: 80, sortable: true }, 88 89 { title: '用戶名', field: 'UName', width: 120, sortable: true }, 90 91 { title: '密碼', field: 'Pwd', width: 100, sortable: true } 92 93 ]], 94 95 toolbar: [{ 96 97 id: 'btnadd', 98 99 text: '添加', 100 101 iconCls: 'icon-add', 102 103 handler: function () { 104 105 $('#btnsave').linkbutton('enable'); 106 107 } 108 109 }, { 110 111 id: 'btncut', 112 113 text: '修改', 114 115 iconCls: 'icon-cut', 116 117 handler: function () { 118 119 $('#btncut').linkbutton('enable'); 120 121 } 122 123 }, '-', { 124 125 id: '刪除', 126 127 text: 'Save', 128 129 iconCls: 'icon-cancel', 130 131 }] 132 133 }); 134 135 } 136 137 </script> 138 139 </head> 140 141 <body> 142 143 <div> 144 145 <!-----------------------EasyUI的DataGird控件的放置-----------------------> 146 147 <table id="test" style="width: 700px" title="用戶操作" iconcls="icon-edit"> 148 149 150 151 </table> 152 153 </div> 154 155 </body> 156 157 </html>
3.控制器實現獲取用戶信息的Action方法
(1)當我們構造好前台之后，這時候我們就需要實現后台的操作的方法，我們在前台的EasyUI里面有一個URL屬性，傳遞的就是控制器下面的方法，我們在寫的時候也要對應和這個設置一摸一樣，不然的話默認會找不到。
(2)當我們操作控制器的時候我們需要使用前面幾篇博客中實現的業務邏輯層的一些東西，所以我們這里需要添加一些引用，LYZJ.UserLimitMVC.IBLL，LYZJ.UserLimitMVC.BLL，LYZJ.UserLimitMVC.Model
(3) 當我們需要操作項目的View視圖的時候，我們是需要和數據庫進行交互的，那麽我們怎么將數據庫中的信息注冊到項目中去呢，這里有一個很簡單的方法就是我們在MVC的Model層添加ADO.NET實體模型—>從數據庫中生成—>選擇數據庫的連接，隨便連接一個數據庫，當選擇表的時候我們不需要選擇，這樣就建立了一個空的模型，當我們添加完成之后我們在講這個模型刪除即可，然后我們再修改web.config中的內容，首先我們找到LYZJ.UserLimitMVC.Model類庫下面的App.Config,然后我們復制下面的這段代碼：
1 <connectionStrings> 2 3 <add name="DataModelContainer" connectionString="metadata=res://*/DataModel.csdl|res://*/DataModel.ssdl|res://*/DataModel.msl;provider=System.Data.SqlClient;provider connection string="data source=HYL;initial catalog=LYZJShopDB;persist security info=True;user id=sa;password=saa;MultipleActiveResultSets=True;App=EntityFramework"" providerName="System.Data.EntityClient" /> 4 5 </connectionStrings>
到我們的項目的Web.Config中的<configuration>節點下面，然后注釋剛才我們自動生成connectionString節點，這時候我們的數據庫等的配置就完成了。
(4) 下面我們再數據庫中輸入幾條數據，進行測試，因為我們的項目含有分頁，所有我建議往數據庫中手動添加數據超過10條以上。
(5) 我們在書寫控制器的時候也一定要使用接口編程。
(6) 下面就是我控制器中實現的方法，代碼貼出來大家指點一下
1 namespace LYZJ.UserLimitMVC.UI.Portal.Controllers 2 3 { 4 5 public class UserInfoController : Controller 6 7 { 8 9 //在這里也需要依賴接口編程 10 11 private IBLL.IUserInfoService _userInfoService = new UserInfoService(); 12 13 public ActionResult Index() 14 15 { 16 17 return View(); 18 19 } 20 21 public ActionResult GetAllUserInfos() 22 23 { 24 25 //Json格式的要求{total:22,rows:{}} 26 27 //實現對用戶分頁的查詢，rows：一共多少條，page：請求的當前第幾頁 28 29 int pageIndex = Request["page"] == null ? 1 : int.Parse(Request["page"]); 30 31 int pageSize = Request["rows"] == null ? 10 : int.Parse(Request["rows"]); 32 33 int total = 0; 34 35 //調用分頁的方法，傳遞參數,拿到分頁之后的數據 36 37 var data = _userInfoService.LoadPageEntities(pageIndex, pageSize, out total, u => true, true, u => u.ID); 38 39 //構造成Json的格式傳遞 40 41 var result = new {total = total, rows = data}; 42 43 return Json(result, JsonRequestBehavior.AllowGet); 44 45 } 46 47 } 48 49 }
(7)上面代碼我們雖然已經貼出來了，但是我們不知道對不對，這時候我們啟動瀏覽器直接去訪問這個控制器下面的方法來獲得Json數據，然后我們看Json數據是否正確，結果如圖所示：
4.最后的效果
(1)這篇博客到這里我們已經看到了結尾了吧，很榮幸的告訴大家，你們猜對了，下面我再上幾張效果圖，展示一下即可，如果各位博友還有什么地方不太懂得話可以給我留言或者加入我的群問我，我將很樂意為你去解決的！
最后我再這里提示一個非常重要的注意項，很多人在用easyUI獲取數據的時候明明后台傳遞的Json串沒有任何問題，而且前台的代碼對應的頁寫的沒錯，那麽那里出的問題呢，那就是Json串中的單詞寫錯了，這里傳遞給后台的json串應該是：{total:22,rows:{}}，有圖為證
源碼下載
(1):完整源碼下載
Kencery返回本系列開篇