寫在前面
關于EasyUI了解差不多，就想結合MVC、EF做一個簡單的用戶管理Demo，其實沒多少東西，但這是小菜我第一次做。主要是熟悉下其中的流程，當然也遇到一些問題，走了很多的彎路。
Demo做的過程就不詳細描述了，大家可以在文章后面下載下來看下，這邊就只記錄下在做的過程中遇到的一些問題和解決方式，希望可以幫到像我一樣的小菜，也歡迎大神指點。
自己動手，豐衣足食。
iframe-src
Easyui左邊菜單鏈接到內容區域的tab，tab頁面一般用的是iframe，在ASP.NET我們一般使用下面這樣的src：
1 <iframe scrolling="auto" frameborder="0" src="Home.html" style="width:100%;height:100%;"></iframe>
在MVC中如果直接使用這樣的src鏈接會找不到頁面地址，我們需要這樣做：
1 <iframe scrolling="auto" frameborder="0" src="Home/GetView?viewPara=Home" style="width:100%;height:100%;"></iframe>
src格式是“{controller}/{action}?viewPara={ViewName}”，控制器代碼：
1 /// <summary> 2 /// iframe獲取視圖 3 /// </summary> 4 /// <returns></returns> 5 public ActionResult GetView(string viewPara) 6 { 7 return View(viewPara); 8 }
如果填寫的ViewName不是在本目錄下，要填寫相對目錄比如：src="Home/GetView?viewPara=../User/User_List“。
EntityFramework版本
關于這個問題，這邊我要詳細的描述下，雖然最后解決方式很簡單，但是在找出這個問題的時候花了我好幾個小時，很是郁悶。
MVC我們提交表單一般是用Aajx，如下登陸提交表單檢查賬號：
1 $.ajax({ 2 url: "Login/CheckUserLogin", 3 type: "POST", 4 dataType: "json", 5 data: { "Name": $("#UserName").val(), "Password": $("#Password").val() }, 6 //contentType: "application/json", 7 success: function (data) { 8 if (data.result == "success") { 9 window.location.href = "/Home/Index"; 10 } 11 else { 12 alert(data.content); 13 window.location.href = "/Login/Login/"; 14 } 15 }, 16 error: function (xhr, error, ex) { 17 alert("出現錯誤，請稍后再試，帶來不便，敬請諒解"); 18 window.location.href = "/Login/Login/"; 19 } 20 });
可以看出js代碼沒什么問題，從URL看出是提交到Login控制器的CheckUserLogin，那我們代碼可以這樣寫：
1 /// <summary> 2 /// 處理登錄的信息 3 /// </summary> 4 /// <param name="userInfo"></param> 5 /// <returns></returns> 6 public JsonResult CheckUserLogin(UserInfo userInfo) 7 { 8 //return Json(new { result = "error", content = "用戶名密碼錯誤，請您檢查" }); 9 using (EasyUIDemoDBEntities db = new EasyUIDemoDBEntities()) 10 { 11 //linq查詢 12 var users = from p in db.UserInfo 13 where p.Name == userInfo.Name && p.Password == userInfo.Password && p.Enable == true 14 select p; 15 if (users.Count() > 0) 16 { 17 userInfo = users.FirstOrDefault(); 18 Response.Cookies["UserName"].Value = userInfo.Name; 19 Response.Cookies["UserName"].Expires = DateTime.Now.AddDays(7); 20 return Json(new { result = "success", content = "" }); 21 } 22 else 23 { 24 return Json(new { result = "error", content = "用戶名密碼錯誤，請您檢查" }); 25 } 26 } 27 }
EasyUIDemoDBEntities是我們創建模型的上下文，從代碼上可以看出也沒什么問題，那我們在第十行設置個斷點，運行一下：
上面報的是“Internal Server Error”錯誤，我們上面在CheckUserLogin方法中設置的斷點根本沒有執行到，網上找了很多的資料，但是沒有沒能找到方式解決，我原本以為是Ajax提交問題，然后改成Get提交，把using里的代碼屏蔽掉是可以的，那就說明Ajax沒什么問題。
回到“Internal Server Error”這段話，從字面上理解是主機服務器問題，網上說是后臺代碼問題，當時沒怎么注意，心想沒什么問題啊，最后實在找不到其他原因，就新建一個控制臺程序，把using里面的代碼復制過去，運行一下，報下面錯誤：
從上面調試的結果看出，我們離真相越來越近了，也說明一點：不要太相信自己的代碼。從異常上可以看出是EntityFramework版本問題。
第一個是控制臺程序的EntityFramework版本，第二個是實例模型的EntityFramework版本，因為我們創建控制臺程序的時候，NuGget添加程序包EntityFramework是添加的最新版本，而新建實體模型的時候，添加的是4.4版本，我們把EntityFramework版本修改一致就可以了。
connectionStrings
上面的問題解決了，我們就可以調試代碼了，但是下面又出現這樣的問題：
異常表示找不到EasyUIDemoDBEntities連接字符串，但是我們創建的實體模型App.Config文件中是有EasyUIDemoDBEntities連接字符串的，網上搜了一下，說是要在主程序也要加連接字符串，MVC添加EasyUIDemoDBEntities連接字符串后，運行OK。
View、Action、頁面跳轉
解決完iframe的src有關后，我們現在要這樣做：登錄輸入用戶名和密碼，如果正確的話跳轉到主界面，關于MVC中js跳轉頁面我們可以這樣寫：
1 //window.location.href = "Home/GetView?viewPara=Index"; 2 //window.location.href = "@Url.Content("/Home/Index/")"; 3 window.location.href = "/Home/Index";
Home表示Controller，Index表示Action，主界面的src還是按照我們上面解決方式寫，跳轉到主界面會出現下面這種情況：
我們如果改下路由直接瀏覽主界面，是可以正常瀏覽的，但是從上面可以看出iframe的src根本沒有執行到Home控制器，網上也沒搜到相關資料，最后在Home控制器添加下面代碼就好了：
1 public ActionResult Home() 2 { 3 return View(); 4 }
不知是什么情況？再做個試驗：我們再主界面的主頁這樣寫：
1 <iframe scrolling="auto" frameborder="0" src="Home/GetView?viewPara=../User/User_Add" style="width:100%;height:100%;"></iframe>
src不指向Home，而指向User目錄下的User_Add，Home控制器代碼：
1 public ActionResult Index() 2 { 3 return View(); 4 } 5 public ActionResult Home() 6 { 7 return View(); 8 } 9 /// <summary> 10 /// iframe獲取視圖 11 /// </summary> 12 /// <returns></returns> 13 public ActionResult GetView(string viewPara) 14 { 15 return View(viewPara); 16 }
在三個Action中分別設置斷點，從登錄頁面跳轉到主界面會發現，Index和Home執行到了，但是正常應該是執行Index和GetView，因為我們沒有寫任何關于Home鏈接的代碼，如果我們直接進入的是主界面，會發現Index和GetView是執行到的，從上面可能明白一些，但是又好像不明白，這個有待研究。
除了主界面加載的時候home鏈接問題，還有就是菜單點擊iframe問題，解決方法就是每個頁面寫一個Action。
EasyUI中DataGrid綁定
easyui中使用datagrid綁定數據大家做的時候可能也用到過，主要是按照一定的json格式輸出就行了，這是我第一次做，遇到下面問題，花了很多時間：
1 /// <summary> 2 /// 獲取用戶的所有信息 3 /// </summary> 4 /// <returns></returns> 5 public ActionResult GetAllUserInfo() 6 { 7 int pageIndex = Request["page"] == null ? 1 : int.Parse(Request["page"]); 8 int pageSize = Request["rows"] == null ? 20 : int.Parse(Request["rows"]); 9 10 using (EasyUIDemoDBEntities db = new EasyUIDemoDBEntities()) 11 { 12 var data = from u in db.UserInfo 13 select new { u.ID, u.Name, u.Phone, u.Password, u.Mail, u.CreateTime, u.Address, u.Enable }; 14 var result = new { total = data.Count(), rows = data }; 15 return Json(result, JsonRequestBehavior.AllowGet); 16 } 17 return Json(datajson); 18 }
前端代碼：
1 $(function () { 2 //初始化彈出窗體 3 initTable(); 4 }); 5 6 //初始化表格 7 function initTable() { 8 $('#test').datagrid({ 9 title: '用戶列表', 10 iconCls: 'icon-user', 11 loadMsg: '數據加載中...', 12 nowrap: true, 13 autoRowHeight: true, 14 striped: true, 15 url: '/User/GetAllUserInfo', 16 sortName: 'ID', 17 sortOrder: 'asc', 18 border: true, 19 remoteSort: false, 20 idField: 'ID', 21 pageSize:10, 22 pagination: true, 23 rownumbers: true, 24 columns: [[ 25 { field: 'ck', checkbox: true }, 26 { field: 'ID', title: 'ID', width: 50, sortable: true }, 27 { field: 'Name', title: '用戶名', width: 100, sortable: true }, 28 { field: 'Phone', title: "電話", width: 150, sortable: true }, 29 { field: 'Password', title: "密碼", width: 150, sortable: true }, 30 { field: 'Mail', title: "EMail", width: 150, sortable: true }, 31 { 32 field: 'CreateTime', title: "添加時間", width: 150, sortable: true, 33 formatter: function (value, row, index) { 34 //return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d h:m:s"); 35 } 36 }, 37 { field: 'Address', title: "地址", width: 250, sortable: true }, 38 { 39 title: '是否啟用', field: 'Enable', width: 80, formatter: function (val, rowdata, index) { 40 if (val) { 41 return '<a class="grid_Enable" href="javascript:void(0)" >' + val + '</a>'; 42 } else { 43 return '<a class="grid_unEnable" href="javascript:void(0)" >' + val + '</a>'; 44 } 45 } 46 } 47 ]], 48 onLoadSuccess: function () { 49 $(".grid_Enable").linkbutton({ text: '啟用', plain: true, iconCls: 'icon-ok' }); 50 $(".grid_unEnable").linkbutton({ text: '禁止', plain: true, iconCls: 'icon-stop' }); 51 }, 52 }); 53 }
前端代碼沒什么問題，大家使用easyui綁定數據也是這么使用的，但是如果按照上面的代碼是顯示不出數據，最后找到原因是var result格式問題，修改一下代碼如下：
1 using (EasyUIDemoDBEntities db = new EasyUIDemoDBEntities()) 2 { 3 var temp = from u in db.UserInfo select u; 4 total = temp.Count(); 5 var users = temp.OrderByDescending(s => s.ID) 6 .Skip<UserInfo>((pageIndex - 1) * pageSize).Take<UserInfo>(pageSize); 7 List<UserInfo> list = new List<UserInfo>(); 8 foreach (UserInfo item in users) 9 { 10 list.Add(item); 11 } 12 var data1 = new 13 { 14 total = total, 15 rows = list 16 }; 17 return Json(data1); 18 }
或者是修改rows = users.ToList<UserInfo>();隱式類型轉化成泛型，其實說到底就是自己知識的不足，關于隱式類型和泛型，以及Json()方法的使用，雖然找到問題及解決方式，但是深層次的原因還是不清楚，可以查詢綁定的完整代碼：
1 /// <summary> 2 /// 獲取用戶的所有信息 3 /// </summary> 4 /// <returns></returns> 5 public ActionResult GetAllUserInfo() 6 { 7 int pageIndex = Request["page"] == null ? 1 : int.Parse(Request["page"]); 8 int pageSize = Request["rows"] == null ? 10 : int.Parse(Request["rows"]); 9 int total = 0; 10 using (EasyUIDemoDBEntities db = new EasyUIDemoDBEntities()) 11 { 12 var temp = from u in db.UserInfo select u; 13 total = temp.Count(); 14 var users = temp.OrderByDescending(s => s.ID) 15 .Skip<UserInfo>((pageIndex - 1) * pageSize).Take<UserInfo>(pageSize); 16 var data = new 17 { 18 total = total, 19 rows = users.ToList<UserInfo>() 20 }; 21 return Json(data); 22 } 23 }
效果：
新增、修改和刪除數據
這個簡單示例服務端就只有一個上下文，下面以新增為例，修改刪除都是類似操作，下載來看可以看下完整代碼，新增用戶操作前端代碼：
1 @*添加用戶彈窗*@ 2 <div id="AddUserDialog" class="easyui-dialog" style="width:360px;height:310px;padding:10px 20px" 3 closed="true" resizable="true" modal="true" buttons="#dlg-buttons" align="center"> 4 <form id="ff" method="post" novalidate="novalidate"> 5 <table id="tblAdd"> 6 <tr> 7 <td><label for="Name">用戶名：</label></td> 8 <td><input class="easyui-validatebox" type="text" id="Name" name="Name" data-options="required:true,validType:'length[1,32]'" /></td> 9 </tr> 10 <tr> 11 <td><label for="Password">密碼：</label></td> 12 <td><input class="easyui-validatebox" type="text" id="Password" name="Password" data-options="required:true,validType:'length[1,32]'" /></td> 13 </tr> 14 <tr> 15 <td><label for="PasswordOK">確認密碼：</label></td> 16 <td><input class="easyui-validatebox" type="text" id="PasswordOK" name="PasswordOK" data-options="required:true" validType="equalTo['Password']" invalidMessage="兩次輸入密碼不匹配" /></td> 17 </tr> 18 <tr> 19 <td><label for="Phone">電話：</label></td> 20 <td><input class="easyui-numberbox" type="text" id="Phone" name="Phone" data-options="validType:'length[1,14]'" /></td> 21 </tr> 22 <tr> 23 <td><label for="Mail">郵箱:</label></td> 24 <td><input class="easyui-validatebox" type="text" id="Mail" name="Mail" data-options="required:true,validType:'email'" /></td> 25 </tr> 26 <tr> 27 <td><label for="Address">地址：</label></td> 28 <td><textarea id="Address" name="Address" style="height:50px;"></textarea></td> 29 </tr> 30 <tr> 31 <td><label for="Enable">啟用：</label></td> 32 <td><select id="Enable" name="Enable" class="easyui-combobox" panelHeight='auto'> 33 <option value="1">啟用</option> 34 <option value="0">禁止</option> 35 </select> 36 </td> 37 </tr> 38 <tr> 39 <td colspan="2" style="text-align:center; padding-top:10px"> 40 <a href="javascript:void(0)" class="easyui-linkbutton" id="btnAddUser" iconcls="icon-ok" >確定</a> 41 <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#AddUserDialog').dialog('close')">關閉</a> 42 </td> 43 </tr> 44 </table> 45 </form> 46 </div>
js代碼：
1 //添加用戶對話框 2 function AddUserDialog() { 3 $('#AddUserDialog').dialog('open').dialog('setTitle', '添加用戶'); 4 ClearText(); 5 } 6 //添加用戶添加事件 7 function BindAddUserClickEvent() { 8 $("#btnAddUser").click(function () { 9 //驗證所有的文本框是否通過用戶的驗證 10 var valid = $('#ff').form('validate'); 11 if (valid == false) { 12 return false; 13 } 14 var CBEnable = true; 15 if ($("#Enable").combobox('getValue')=="0") { 16 CBEnable = false; 17 } 18 19 //創建傳遞的參數 20 var postdata = { 21 Name: $("#Name").val(), 22 Password: $("#Password").val(), 23 Mail: $("#Mail").val(), 24 Phone: $("#Phone").val(), 25 Address: $("#Address").val(), 26 Enable: CBEnable 27 }; 28 29 //發送異步請求到后臺保存用戶數據 30 $.post("/User/AddUser", postdata, function (data) { 31 if (data == "OK") { 32 alert("添加成功"); 33 $('#AddUserDialog').dialog('close'); 34 $("#test").datagrid("reload"); 35 } 36 else { 37 alert("添加失敗，請您檢查"); 38 } 39 }); 40 }); 41 }
控制器代碼：
1 /// <summary> 2 /// 添加用戶 3 /// </summary> 4 /// <param name="userinfo"></param> 5 /// <returns></returns> 6 public ActionResult AddUser(UserInfo userinfo) 7 { 8 userinfo.CreateTime = DateTime.Now; 9 using (EasyUIDemoDBEntities db = new EasyUIDemoDBEntities()) 10 { 11 db.UserInfo.Add(userinfo); 12 db.SaveChanges(); 13 } 14 return Content("OK"); 15 }
可以看到前端的AddUserDialog是一個添加用戶彈窗，這里面主要注意的是一些easyui控件的取值或賦值操作，比如combobox的取值為：$("#Enable1").combobox('getValue');賦值為：$('#Enable').combobox('setValue', '1');這些都是一些小操作，用的時間長慢慢就會了。可以看到easyui使用起來還是蠻方便的，可能js腳本需要寫東西，但是頁面布局就很簡單。控制器那邊只有一個上下文操作，沒有任何封裝，對于像小菜一樣的我們是個福利，畢竟路是一點一點走出來的。
效果圖、完整示例Demo下載
完整示例Demo下載：http://pan.baidu.com/s/1i3kMyzV
后記
上面的示例Demo可能對很多人來說很簡單，但是如果你自己一點一滴的去完成它，你會發現會有很多的東西要去學習，有時候會眼高手低的去做一些事情，但反過頭來確實高看了自己。當然這個Demo還有很多問題要去完善，現在還在學習中，與你共勉。
如果你覺得本篇文章對你有所幫助，請點擊右下部“推薦”，^_^
EasyUI參考示例教程：
文章列表
留言列表
