歡迎大家轉載，轉載請注明出處！
希望這個筆記對自己和大家有用，但是本人水平有限，如果出錯的地方，希望大家指出，多多批評，謝謝！
今天開始，將是easyui的組合使用，期間我會大致介紹下其中的API：
今天先來一個dialog的登陸界面，以及登陸失敗、成功后的彈窗（message框架）：
這里面就不給大家介紹后台代碼了，寫好后台代碼會補上，時間有限啊。
1 <link href="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" type="text/css" /> 2 <!--easyui最全的樣式包也可單獨引用你想使用的樣式包--> 3 <link href="jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" type="text/css" /> 4 <!--easyui自帶圖片樣式包，也可自行添加--> 5 <script src="jquery-easyui-1.3.2/jquery-1.8.0.min.js" type="text/javascript"></script> 6 <!--我使用的是easyui 1.3.2，基於jquery-1.8.0--> 7 <script src="jquery-easyui-1.3.2/jquery.easyui.min.js" type="text/javascript"></script> 8 <!--easyui的js包--> 9 <script src="jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js" type="text/javascript"></script> 10 <!--easyui的中文語言包，默認是英文--> 11 <script type="text/javascript"> 12 $(function () { 13 //初始化 14 initTable(); 15 }); 16 17 //個人習慣方法化書寫 18 function initTable() { 19 $("#dd").dialog({ 20 closable: false, //右上角的關閉按鈕，因為dialog框架關聯的是window框架，window框架關聯的是panel框架，所以該API是在panel框架中找到的 21 title: "登陸界面", //dialog左上角的名稱 22 modal: true, //模式化 23 width: 300, 24 height: 200, 25 buttons: [//dialog右下角的按鈕，以Json數組形式添加 26 { 27 text: "登錄", //按鈕名稱 28 iconCls: "icon-save", //按鈕左側顯示的圖片 29 handler: function () {//按鈕點擊之后出發的方法 30 //JQuery的ajax異步后台提交 31 loginFunc(); 32 } 33 }, { 34 text: "注冊", 35 handler: function () { 36 //注冊明天再寫，將用easyui自帶的form提交方式，以及自帶的ValidateBox驗證方式 37 } 38 }] 39 }); 40 } 41 42 //用戶登錄 43 function loginFunc() { 44 //這里我寫的是最簡略的JQuery異步方法，如想深入了解，請參看JQuery參考手冊 45 //要想后台傳遞的參數 46 var res = $("#loginForm").serialize(); //將form表單的內容序列化,這里也可以使用原始的取值方法 47 //mvc以及webform中可以直接傳遞到后台 48 $.post("/Login.ashx", res, function (data) { 49 if (data == "ok") {//后台傳遞過來 ok 表示登陸成功 50 $("#dd").dialog("close"); //關閉該dialog 51 $.messager.show({//瀏覽器右下角彈框，我列出了幾個屬性，具體請看API 52 title: '提示', 53 msg: '恭喜您，登陸成功！', 54 timeout: 5000,//彈框保留時間 55 showType: 'slide'//展示樣式 56 }); 57 } else { 58 $.message.alert('提示', "登陸失敗", "error"); //這里使用easyui的message框架，彈出提示信息 59 //這里有三個參數 第一個是Title 第二個是顯示信息 第三個是現實圖標樣式 有error，warning等，具體請看API或者demo 60 } 61 }); 62 } 63 </script> 64 </head> 65 <body> 66 <div id="dd"> 67 <form id="loginForm" method="POST"> 68 <table> 69 <tr> 70 <th> 71 用戶名 72 </th> 73 <td> 74 <input name="username" type="text" /> 75 </td> 76 </tr> 77 <tr> 78 <th> 79 密碼 80 </th> 81 <td> 82 <input name="password" type="password" /> 83 </td> 84 </tr> 85 </table> 86 </form> 87 </div> 88 </body> 89 </html>
登陸界面
登陸失敗彈出框
登陸成功右下角彈窗
上班看到評論，臨時加的一個后台代碼，寫的不是很詳細，沒有鏈接數據庫，望見諒。
1 public void ProcessRequest(HttpContext context) 2 { 3 context.Response.ContentType = "text/plain"; 4 //接收前台數據判斷是否為空，不判定有可能報錯 5 string name = context.Request.Form["username"] == null ? null : context.Request.Form["username"].ToString(); 6 string password = context.Request.Form["password"] == null ? null : context.Request.Form["password"].ToString(); 7 if (string.IsNullOrEmpty(name)||string.IsNullOrEmpty(password))//判斷是否有接收的值為空的，為空則跳轉到錯誤頁面或者直接返回數據 8 //返回數據的話應該是這樣： 9 // context.Response.Write("用戶名或者密碼不能為空！"); 10 // context.Response.End(); 11 { 12 context.Response.Redirect("ErrorPage.htm"); 13 context.Response.End(); 14 } 15 int res = 1;//這里是從數據庫查詢數據，返回響應行數，我就不寫那么詳細了 16 if (res<=0) 17 { 18 context.Response.Write("登錄失敗！"); 19 context.Response.End(); 20 } 21 context.Response.Write("ok"); 22 context.Response.End(); 23 }