[轉]EasyUI+MVC+EF簡單用戶管理Demo（問題及解決）

時間 2019-11-08

標籤 easyui+mvc+ef easyui mvc 簡單用戶管理 demo 問題解決简体版

原文原文鏈接

寫在前面

　　關於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腳本須要寫東西，可是頁面佈局就很簡單。控制器那邊只有一個上下文操做，沒有任何封裝，對於像小菜同樣的咱們是個福利，畢竟路是一點一點走出來的。