請注明轉載地址：http://www.cnblogs.com/arhat
在上一章中呢，我們基本上搭建好了環境，那么本章我們就從基礎模塊開始寫起。由於用戶，角色，動作三個當中，都是依賴與動作的，所以本章我們從動作開始做起，先把這個基礎模塊建立起來，然后才能把用戶，角色和動作關聯起來形成權限。
首先建立一個新的Controller為ActionController,為其Index方法創建一個視圖文件，由於這樣的視圖文件太多了，而且重復性的代碼也比較多，所以我們把共有的部分移植到Views/Shared/_Layout.cshtml中，換句話說就是使用模板。
_Layout.cshtml內容如下：
<!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> <link href="/Content/easyui.css" rel="stylesheet" type="text/css" /> <link href="/Content/icon.css" rel="stylesheet" type="text/css" /> <link href="/Content/base.css" rel="stylesheet" /> <script src="/Content/jquery.min.js"></script> <script src="/Content/jquery.easyui.min.js"></script> <script type="text/javascript"> function createIFrame(src) { var iframe = "<iframe width='100%' height='100%' scrolling='no' frameborder='0' src='" + src + "'></iframe>"; return iframe; } @RenderSection("script",false) </script> </head> <body> @RenderBody() </body> </html>
然后我們建立ActionController的Index方法的View文件，內容如下：
@{ ViewBag.Title = "動作設置"; Layout = "/Views/Shared/_Layout.cshtml"; } @section script{ $(document).ready(function(){ initActionGrid(); }); function initActionGrid(){ $("#grid").datagrid({ url:'/Action/LoadActionData', fitColumns:true, rownumbers:true, toolbar: [{ iconCls: 'sys-icon-add', text:"添加動作", handler:addAction }], columns:[[ {field:'AId',title:'ID',width:10,align:'center'}, {field:'AName',title:'動作名',width:200,align:'center'}, {field:'AValue',title:'動作值',width:200,align:'center'}, {field:'opt',title:'操作',width:70,align:'center',formatter:function(v,r,i){ return "<a href='javascript:delAction("+r.AId+")'><img src='/Content/sys_icons/decline.png' /></a> <a href='javascript:editAction("+r.AId+")'><img src='/Content/sys_icons/disk_edit.png' /></a>"; }} ]] }); } function addAction(){ $('#dialog').dialog({ title: '添加動作', iconCls:"sys-icon-add", width: 400, height: 300, closed: false, cache: false, modal: true, onClose:function(){ $("#grid").datagrid("reload"); }, content:createIFrame("/Action/AddAction") }); } function delAction(_aid){ $.messager.confirm("提示","確認要刪除此動作嗎?",function(b){ if(b){ $.get("/Action/DelAction/",{aid:_aid},function(data){ if(data=="y"){ $("#grid").datagrid("reload"); } },"text"); } }); } } <table id="grid" data-options="fit:true"></table> <div id="dialog" style="overflow:hidden"></div>
這里使用了EasyUI的DataGrid和Dialog組件，同時我們通過相應的JS函數來實現對Action的CRUD操作。
在initActionGrid函數中我們隊Grid進行了一些初始化的操作，從參數可以看出我們的數據加載是通過Action/LoadData這個Action完成的，所以我們在ActionController中添加這樣的方法。
[HttpPost] public ActionResult LoadActionData() { var json = new { total = permitBLL.GetAllActionList().Count, rows = permitBLL.GetAllActionList() }; return Json(json,JsonRequestBehavior.DenyGet); }
這個方法中使用了B_Permit這個類的實例來獲得數據。下面我們看一下這個類的內容：
#region 查詢方法 /// <summary> /// 得到所有的Action /// </summary> /// <returns></returns> public List<Model.M_ArHat_Action> GetAllActionList() { List<Model.M_ArHat_Action> list = null; DataTable dt = permitDAL.SelectAllAction(); if (dt != null && dt.Rows.Count > 0) { list = new List<Model.M_ArHat_Action>(); Model.M_ArHat_Action action = null; foreach (DataRow row in dt.Rows) { action = new Model.M_ArHat_Action(); action.AId = Convert.ToInt32(row["AId"]); action.AName = row["AName"].ToString(); action.AValue = row["AValue"].ToString(); list.Add(action); } } return list; } #endregion #region 添加方法 /// <summary> /// 添加一個Action /// </summary> /// <param name="action"></param> public void AddAction(Model.M_ArHat_Action action) { permitDAL.AddAction(action); } #endregion
在這個類中，提供了兩個方法，一個是用來查詢的，一個是用來插入的。當然了這里肯定少不了DAL層的功勞，同時我們來看看DAL中的D_Permit.cs的內容：
public class D_Permit { #region SQL語句 //查詢所有的動作（未分頁） private static readonly string sql1 = "select * from ArHat_Action order by AId Desc"; //添加一個動作 private static readonly string sql2 = "insert into ArHat_Action values(@AName,@AValue)"; #endregion #region 添加方法 /// <summary> /// 添加一個動作 /// </summary> /// <param name="action"></param> public void AddAction(Model.M_ArHat_Action action) { SqlParameter[] parameters = { new SqlParameter("@AName",SqlDbType.VarChar,50), new SqlParameter("@AValue",SqlDbType.VarChar,50) }; parameters[0].Value = action.AName; parameters[1].Value = action.AValue; DAL.SqlHelper.ExecuteNonQuery(sql2, parameters); } #endregion #region 查詢方法 /// <summary> /// 查詢所有的動作 /// </summary> /// <returns></returns> public DataTable SelectAllAction() { return DAL.SqlHelper.ExecuteQuery(sql1); } #endregion }
在這個類中，我們實現了對Action的查詢和添加的SQL實現。說到這里呢，如果說要讓項目能夠更加的靈活，那么應該在三層架構的基礎上添加面向接口的編程，換句話說我們得創建一個IDAL和IBLL兩個項目，在這兩個項目中要寫出對數據庫和業務邏輯的抽象操作，這是最好不過了，但是本身由於老魏這個項目比較小，所以就沒有采用這中寫法，感興趣的朋友可以再QQ群中來共同的討論一下。
好了，現在我們來看一下最后運行的結果。
當我們點擊“添加動作”的時候，界面如下：
這里需要注意的是，在添加動作的js函數中，使用了content:createIFrame("/Action/AddAction")。也就是用iframe來加載AddAction的界面，當點擊保存的時候會執行一個Post請求。關於這連個Action我們來看一下內容：
[HttpGet] public ActionResult AddAction() { return View(); } /// <summary> /// 添加動作Post /// </summary> /// <param name="action"></param> /// <returns></returns> [HttpPost] public ActionResult AddAction(Model.M_ArHat_Action actionInfo) { try { permitBLL.AddAction(actionInfo); StringBuilder sb = new StringBuilder(); sb.Append(@" <script> parent.$(""#dialog"").dialog(""close""); </script> "); return Content(sb.ToString()); } catch (Exception ex) { return Content("添加失敗:" + ex.Message); } }
這里由於老魏沒有使用Jquery提供的jquery.unobtrusie-ajax.js，所以這里使用了Content來執行關閉對話框的方法。當然了，在UI端，需要注意的是要給Dialog設置一個onClose的事件，讓其關閉的時候能夠刷新父頁面。
至於刪除，老魏這里沒有做，如果大家在做的過程中遇到了，希望能夠自行的實現。本章到這里就寫到這里吧，雖然都是一堆代碼，看起來沒有什么，但是在寫js的時候真是費勁啊。
在這里得抱歉說一下了，老婆的預產期就要到了，所以后續的章節可能跟新的慢了，但是老魏保證的是肯定不會夭折的。