標籤：asp.net ajax easyui
話說今天周四，本該給自己放個假，好好休息休息，但無奈自己對IT實在是癡迷，心甘情願的想加加班把目標功能實現，功夫不負有心人，經過6個小時的鏖戰，我終於成功了。在此和大家分享下成果，希望大家給個贊。
我的目標效果：在頁面載入時，table表顯示後台資料表中的學生的資訊；點擊添加按鈕，出現彈框，可以新增學生資訊；選中某一學生記錄後，點擊修改按鈕，出現彈框，可以對學生資訊進行修改；選中某一學生記錄後，點擊刪除按鈕，便可刪除該學生資訊。如下所示：
目標效果有了，說說實現思路吧。
1.需要引入Easyui類庫和相關的js：
<head> <title></title> <link href="css/easyui.css" rel="stylesheet" type="text/css" /> <link href="css/icon.css" rel="stylesheet" type="text/css" /> <link href="css/demo.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.easyui.min.js" type="text/javascript"></script> <script src="js/test.js" type="text/javascript"></script></head>2.畫出顯示資料的table表
//用於傳遞使用者需要執行的操作<input id="test" name="test" type="hidden"> <!--表格顯示區--> <table id="tt" " title="管理學生資訊" class="easyui-datagrid" style="width: auto; height: 400px;" idfield="itemid" pagination="true" iconcls="icon-save" remoteSort="false" data-options="rownumbers:true, url:'JSONData.ashx/ProcessRequest',pageSize:5,pageList:[5,10,15,20], method:'get',toolbar:'#tb' ," fitcolumns= "true" striped="true" singleselect="true"> <thead> <tr> <th data-options="field:'serial',width:0" hidden="hidden"> 序號</th> <th data-options="field:'id',width:100",sortable:"true">學號</th> <th data-options="field:'name',width:100",sortable:"true">姓名</th> </tr> </thead> </table>3.畫出添加、修改、刪除三個按鈕
<!--添加、修改、刪除按鈕--> <div id="tb"> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="newUser()">新增學生</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="editUser()">修改學生</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="destroyUser()">刪除學生</a> </div>4.畫出點擊添加、修改按鈕後出現的彈框
<!--彈框--> <div id="dlg" class="easyui-dialog" style="width: 400px; height: 280px; padding: 10px 20px" closed="true" buttons="#dlg-buttons"> <div class="ftitle"> User Information</div> <form id="fm" method="post" novalidate> <div class="fitem"> <label>學號:</label> <input id="id" class="easyui-validatebox" required="true"> </div> <div class="fitem"> <label>姓名:</label> <input id="name" class="easyui-validatebox" required="true"> </div> </form> </div>到此頁面的顯示部分完成，下面需要用Ajax建立Web頁面和一般處理常式之間的互動
var url = "JSONData.ashx / ProcessRequest ";//開啟新增學生彈框function newUser() { $('#dlg').dialog('open').dialog('setTitle', '新增學生'); //設定表頭 $('#fm').form('clear'); //清空表單資料 document.getElementById("test").value = "add"; //設定表示為後台調不同方法資料提供介面 }//開啟修改學生彈框 function editUser() { $('#fm').form('clear'); var row = $('#tt').datagrid('getSelected'); if (row) { $('#dlg').dialog('open').dialog('setTitle', '修改學生'); //綁定資料列表 $('#id').val(row.id); $('#name').val(row.name); document.getElementById("test").value = "modify"; //設定表示為後台調不同方法資料提供介面 $('#fm').form('load', row); }}//儲存資訊 function saveUser() { //擷取頁面中輸入的值 var serial; var id = document.getElementById("id").value; var name = document.getElementById("name").value; var test = document.getElementById("test").value; var row = $('#tt').datagrid('getSelected'); if (test == "modify") { serial = row.serial; } else { serial == ""; } $('#fm').form('submit', { //設定地址與傳遞參數到後台 url: "JSONData.ashx?id=" + id + "&name=" + name + "&test=" + test + "&serial=" + serial, onSubmit: function () { return $(this).form('validate'); }, //判斷結果是否正確 success: function (result) { if (result.indexOf("T") == 0) { alert('恭喜您，資訊儲存成功！') $('#dlg').dialog('close'); // 關閉視窗 $('#tt').datagrid('reload'); } else { alert('儲存失敗，請您核對！') } var result = eval('(' + result + ')'); if (result.success) { $('#dlg').dialog('close'); // close the dialog $('#tt').datagrid('reload'); $.message.alert('提示', '儲存成功！', 'info'); // reload the user data } else { //$.messager.show({ // title: 'Error', // msg: result.msg //}); } } });}//刪除學生 function destroyUser() { document.getElementById("test").value = "delete"; //設定表示為後台調不同方法資料提供介面 var test = document.getElementById("test").value; var row = $('#tt').datagrid('getSelected'); if (row) { $.messager.confirm('提示', '你確定要刪除這條資訊嗎？', function (r) { if (r) { $('#fm').form('submit', { url: "JSONData.ashx?serial=" + row.serial + "&test=" + test, onSubmit: function () { }, //判斷結果是否正確 success: function (result) { if (result.indexOf("T") == 0) { $('#dlg').dialog('close'); alert('恭喜您，資訊刪除成功！') $('#tt').datagrid('reload'); } else { alert('添加失敗，請重新操作！') } var result = eval('(' + result + ')'); } }); } }); }} 通過JS代碼，我們可以發現，Ajax擷取使用者的資料，將其提交到一般處理常式JSONData.ashx中進行處理，並用回呼函數擷取一般處理常式的執行結果，JSONData.ashx代碼如下：
StudentDAL studentDAL = new StudentDAL(); public void ProcessRequest(HttpContext context)//context中包含前台與後台來回傳遞的值 { //判斷前台請求的是增刪改查的哪一個 string command = context.Request.QueryString["test"];//前台傳的標示值 if (command == "add") { //調用添加方法 Add(context); } else if (command == "delete") {//調用刪除方法 Delete(context); } else if (command == "modify") {//調用修改方法 Modify(context); } else {//調用查詢方法 Query(context); } } #region 添加記錄 /// <summary> /// 添加記錄 /// </summary> /// <param name="context"></param> public void Add(HttpContext context) { StudentEntity student = new StudentEntity(); student.id = context.Server.UrlDecode(context.Request.QueryString["id"]); student.name = context.Server.UrlDecode(context.Request.QueryString["name"]); try { if (studentDAL.Add(student)) { context.Response.Write("T"); } else { context.Response.Write("F"); } } catch (Exception ex) { } } #endregion #region 修改記錄 /// <summary> /// 修改記錄 /// </summary> /// <param name="context"></param> public void Modify(HttpContext context) { StudentEntity student = new StudentEntity(); student.serial = context.Server.UrlDecode(context.Request.QueryString["serial"]); student.id = context.Server.UrlDecode(context.Request.QueryString["id"]); student.name = context.Server.UrlDecode(context.Request.QueryString["name"]); try { if (studentDAL.Update(student)) { context.Response.Write("T"); } else { context.Response.Write("F"); } } catch (Exception ex) { } } #endregion #region 刪除記錄 /// <summary> /// 刪除記錄 /// </summary> /// <param name="context"></param> public void Delete(HttpContext context) { StudentEntity student = new StudentEntity(); student.serial = context.Server.UrlDecode(context.Request.QueryString["serial"]); try { if (studentDAL.Delete(student)) { context.Response.Write("T"); } else { context.Response.Write("F"); } } catch (Exception ex) { } } #endregion #region 查詢記錄 /// <summary> /// 查詢記錄 /// </summary> /// <param name="context"></param> public void Query(HttpContext context) { context.Response.ContentType = "text/plain"; //調用分頁的GetList方法 DataSet ds = studentDAL.Query(); string strJson = ToJson.Dataset2Json(ds, -1);//DataSet資料轉化為Json資料 context.Response.Write(strJson);//返回給前台頁面 context.Response.End(); } #endregion 在將資料表中的資料繫結到頁面中的table時，由於後台返回的結果是DataSet或DataTable類型，所以需要一個方法將DataSet或DataTable轉換為JSON類型，強大的ToJson類就完成了上述任務：
public class ToJson { #region DataSet轉換成Json格式 /// <summary> /// DataSet轉換成Json格式 /// </summary> /// <param name="ds">DataSet</param> /// <returns></returns> public static string Dataset2Json(DataSet ds, int total = -1) { StringBuilder json = new StringBuilder(); foreach (DataTable dt in ds.Tables) { //{"total":5,"rows":[ json.Append("{\"total\":"); if (total == -1) { json.Append(dt.Rows.Count); } else { json.Append(total); } json.Append(",\"rows\":["); json.Append(DataTable2Json(dt)); json.Append("]}"); } return json.ToString(); } #endregion #region dataTable轉換成Json格式 /// <summary> /// dataTable轉換成Json格式 /// </summary> /// <param name="dt"></param> /// <returns></returns> public static string DataTable2Json(DataTable dt) { StringBuilder jsonBuilder = new StringBuilder(); for (int i = 0; i < dt.Rows.Count; i++) { jsonBuilder.Append("{"); for (int j = 0; j < dt.Columns.Count; j++) { jsonBuilder.Append("\""); jsonBuilder.Append(dt.Columns[j].ColumnName); jsonBuilder.Append("\":\""); jsonBuilder.Append(dt.Rows[i][j].ToString()); jsonBuilder.Append("\","); } if (dt.Columns.Count > 0) { jsonBuilder.Remove(jsonBuilder.Length - 1, 1); } jsonBuilder.Append("},"); } if (dt.Rows.Count > 0) { jsonBuilder.Remove(jsonBuilder.Length - 1, 1); } return jsonBuilder.ToString(); } #endregion dataTable轉換成Json格式 } 至此，核心代碼都已經實現，剩下的就是一個學生實體--StudentEntity，一個訪問T_Student表的StudentDAL類，它們和我們平時訪問資料庫的方法一樣，在此不再贅述。
這個Demo大大增加了我學習Easyui的信心，本以為得一周才能完成的功能，沒想到兩天搞定，小小得瑟一下。和Easyui類似的還有extjs，它們都能畫出很妙的頁面圖，只不過Easyui是JQuery的架構，extjs是Ajax的架構。
如果大家想練練手，可以把我做好的Demo下載下來，看看My Code有什麼不知之處，歡迎大神拍磚，源碼：http://pan.baidu.com/s/1o6Cz4Qe。
好了，今天先到這吧，韓義打電話來讓我們回家包餃子去了，關於Easyui的學習，咱們改日再談。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
