這是一篇關于easyui配合ajax使用的文章，順帶介紹angularjs的使用以及讓你感受到angularjs的威力。網上對于ajax 的文也是多如牛毛 。我就不直接從那種原生的httpxmlrequest 對象的js 寫起了哈。看那種東西也存粹是了解 高層的東西是怎么來的 原理是啥真正做的時候寫那種東西 不是扯淡么 你叼你技術牛逼整站的代碼你全用那種寫。html js 這種東西最開始設計出來就沒考慮周全就是坨屎。還好現在有各種框架 可以幫助我們更容易的把這坨屎做的更美味。也還好由于互聯網事業如日中天 的推動 讓瀏覽器端的這堆東西正在往統一規范的方向發展。
我們來建立一個webform頁面 HelloAjaxNet.aspx。先說下ajax 這里我使用網上流傳甚廣的那個AjaxPro.2.dll 他的網站是 http://www.ajaxpro.info/ 這是一個個人作品 ，很好用。
本來新的asp.net 里自帶了服務端方法用webmethod 屬性聲明 客戶端pagemethods訪問的方式 ，各種對象也可以json數據化 ，功能跟上面一樣的。微軟自帶的是aspx的codebehind 代碼方法 一定要加static ，至于webconfig 在新版的vs2013開發環境下無須配置 如果是老的則新建ajax網站項目則webconfig自動弄好了然后服務端頁面載入事件中 ScriptManager.GetCurrent(Page).EnablePageMethods = true; 客戶端 必須有runat=server 的form 和 <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> 然后客戶端就可以pagemethods 的方式訪問。
我始終還是認為上面那個更好用 。關于他的原理我就不多說了 ，通過頁面載入時注冊服務端對象 ，然后生成的html頁面上就多了這么幾句
<script type="text/javascript" src="/ajaxpro/prototype.ashx"></script> <script type="text/javascript" src="/ajaxpro/core.ashx"></script> <script type="text/javascript" src="/ajaxpro/converter.ashx"></script> <script type="text/javascript" src="/ajaxpro/WebApplication.StudentsInfo,WebApplication.ashx"></script> <script type="text/javascript" src="/ajaxpro/WebApplication.Grad,WebApplication.ashx"></script> <script type="text/javascript" src="/ajaxpro/WebApplication.NewFolder.HelloAjaxNet,WebApplication.ashx"></script> <script type="text/javascript" src="/ajaxpro/WebApplication.DataEntity,WebApplication.ashx"></script>
為是什么呢 為的是引用一段js文件 ajaxpro/WebApplication1.NewFolder2.HelloAjaxNet,WebApplication1.ashx
然后你就明白了噻 這段客供你進行客戶端js調用的腳本 是服務端自動生成的 跟你 服務端的名字一模一樣 然后你就可以貌似像在客戶端回調服務端方法樣的 沒什么神奇的，我們主要就是想利用他的這個特性和json化數據的方便之處 來實現客戶端服務端數據的無縫傳遞。
關于json數據的序列化 要是以前就只有利用外部json庫 或者微軟自帶的來進行手動解析：
服務端：
public string ServerProcerMethod(string stu) { //System.Web.Script.Serialization.JavaScriptSerializer jsSerializer = new System.Web.Script.Serialization.JavaScriptSerializer(); //StuInfo s= jsSerializer.Deserialize<StuInfo>(stu); System.Web.Script.Serialization.JavaScriptSerializer jsSerializer = new System.Web.Script.Serialization.JavaScriptSerializer(); List<StuInfo> s = jsSerializer.Deserialize<List<StuInfo>>(stu); if (s != null && s.Count > ) { StuInfo stu= s[]; StringBuilder sb = new StringBuilder(); jsSerializer.Serialize(stu, sb); return sb.ToString(); } else return null; }客戶端：
//javascript 字符串轉json對象： var obj = JSON.parse(str); //javascript json 對象轉字符串： JSON.stringify(obj);
關于AjaxPro.2.dll 和ajax.dll的關系 ，網上說他們不一樣 其實壓根就是一個人搞的吧 我擦 。請在上面網站下載ajaxpro 這個才是完善的版本
引用dll文件后需要配置webconfig httphandler 作用就是讓 上面的ashx請求轉到我們的 ajaxpro代碼 ，進而讓我們的客戶端js直接調用服務端方法調用成功。
<system.webServer> <directoryBrowse enabled="true"/> <handlers> <add verb="*" path="*.ashx" name="myhandler" type="AjaxPro.AjaxHandlerFactory,AjaxPro."/> <!--<add verb="POST,GET" path="ajax/*.ashx" name="myhandler" type="Ajax.PageHandlerFactory, Ajax" />--> </handlers> </system.webServer>
然后其他的我就不多說了哈待會直接看服務端代碼。
easyui 你就可以理解為一堆擴展了的控件。就像jquery一樣 你把js對象 原生的html控件用他的東西一包 然后就可以點得出他一些為你寫好的方法 幫助你方便的處理數據。并且還有默認的還可以的控件外觀，這點對于做企業管理類軟件來說 還是真心不錯的，做其他的就只能呵呵了。下載easyui的文件 放到項目中 并引入easyui 相關js和樣式文件 還有jquery：
<script type="text/javascript" src="../jquery-easyui-../jquery.min.js"> </script> <link rel="stylesheet" type="text/css" href="../jquery-easyui-../themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="../jquery-easyui-../themes/icon.css" /> <script type="text/javascript" src="../jquery-easyui-../jquery.easyui.min.js"></script>
然后 ，然后你就可以使用easyui了 就像easyui 首頁 http://jeasyui.com/ 上介紹的那樣 通過css樣式 或者js代碼 把原生html控件渲染成easyui控件
<div class="easyui-dialog" style="width:px;height:px" data-options=" title:'My Dialog', iconCls:'icon-ok', onOpen:function(){}"> dialog content. </div> <input id="cc" style="width:px" /> $('#cc').combobox({ url: ..., required: true, valueField: 'id', textField: 'text' });是的 非常方便。其實國內還有好些js寫的比較牛的 弄了一些這樣ui 那樣ui 選來選去還是用這個吧。用的最多的需求就是ajax服務端分頁 ，我們來弄個吧。
我們先說下這個easyui的datagrid 打他狗日的，客戶端html放個table標簽 ：<table id="studb"></table> 然后用js這么一搞 $('#studb').datagrid() 他就給你渲染成easyui datagrid控件了 ，你可以在document.ready()時做這個事情。我們的數據表格是需要填充數據的 這些數據從哪來 顯示哪些列 怎么分頁 每頁顯示多少條，這些都是參數，怎么傳進去。easyui很多地方都接收json對象形式的一坨參數 ，比如這個datagrid：
function bindDataToTb() { var keywordStr = $('#keyword').val(); $('#studb').datagrid( { queryParams: { keyword: keywordStr }, //url:"WebForm.aspx/BindData", toolbar: '#searchBar', pagination: true, pageNumber: , singleSelect: true, pageSize: , pageList: [, , ], loader: function (param, success, error) { var da = WebApplication.NewFolder.HelloAjaxNet.BindData(param.keyword, param.page, param.rows) if (da.value.rows == null) { success(); } else success(da.value); }, pagePosition: 'bottom', columns: [[ { field: 'stuNo', title: 'Id', width: }, { field: 'name', title: '名字', width: }, { field: 'age', title: '年齡', width: }, { field: 'loginName', title: '登錄名', width: }, { field: 'loginPwd', title: '密碼', width: }, { field: 'GradId', title: '班級Id', width: }, { field: 'gradName', title: '班級', width: }, { field: 'none', title: '操作', width: , formatter: function (value, row, index) { var btn = '<a class="editcls" href="#" onclick="delstuClick(' + row.stuNo + ')">刪除</a>'; return btn; } } ]] }); }具體看loader 和columns ，loader用于定義你以什么形式載入數據 定義了loader上面的url就沒有必要了。
我這里的WebApplication1.NewFolder2.HelloAjaxNet.BindData(param.keyword, param.page, param.rows) 自然也是服務端的方法 用于檢索數據的 。
關于這三個param.keyword, param.page, param.rows 是我們用于實現loader時 easyui那種設計方式故意暴露給我們的參數 方便我們使用。
param.keyword 是我們上面定義的 我們點搜索的時候需要往服務端傳一個查詢關鍵詞 queryParams: { keyword: keywordStr }
param.page 是easyui自己的參數表示當前第幾頁 param.rows表示每頁行數，每當你 點表格的 上一頁 下一頁 的時候 就會自動往loader 發翻頁的參數 這個是自動的。
然后就從服務端獲取數據填充表格 ，就是這么一個工作過程。 還有colums 我就不說了就是定義顯示哪些列 和自定義列 那個很容易看懂。
easyui控件有屬性 方法，調用方法 的形式總算像這樣 ：$('#studb').datagrid('reload') 這就相當于調用了#studb這個表格控件的reload方法了 然后數據就會自動刷新，每個控件的具體見文檔。
服務端數據處理我們還是用entityframework 我一般都用codefirst的方式 這東西跟他自己的mssql數據庫 結合的很好 用起很方便。
服務端代碼：
//查詢（帶分頁 [AjaxPro.AjaxMethod] public static WebApplication.DataEntity BindData(string keyword, int page, int rows) { //, ref int pageIndex, out int totalPage if (keyword == null) keyword = ""; int pageIndex = ; int pageSize = ; int totalPage; if (page != ) pageIndex = page; if (rows != ) pageSize = rows; MyDb db = new MyDb(); var data = from studentInfo in db.Students where studentInfo.name.Contains(keyword) select new { stuNo = studentInfo.stuNo, name = studentInfo.name, age = studentInfo.age, gradName = studentInfo.grad.gradName }; //var data = from studentInfo in db.Students where studentInfo.name.Contains(keyword) select studentInfo; totalPage = data.Count() % pageSize == ? data.Count() / pageSize : data.Count() / pageSize + ; if (pageIndex > totalPage) pageIndex = totalPage; else if (pageIndex < ) pageIndex = ; //var dt = DataList<object>.Create(data.OrderBy(r => r.stuNo), new StudentsInfo(), pageIndex, pageSize).Value; object dt=null ; if(data.Count()>) dt= DataList<object>.Create(data.OrderBy(r => r.stuNo), new { stuNo = , name = "", age = , gradName = "" }, pageIndex, pageSize).Value; WebApplication.DataEntity result = new WebApplication.DataEntity(); result.total = data.Count(); result.rows = dt; return result; }關于數據部分 和EF linq 分頁那些我就不貼出來了 完整示例下載里面有。走走看吧 試試看吧 完全無刷新 服務端分頁，感覺棒棒噠
搜索那個我也不想說了哈 就是重新載入下數據而已，刪除是通過自定義 列的方式 傳id到js函數 然后調用服務端刪除。然后要說下 錄入功能 以及easyui自帶 的表單驗證也是相當方便的。
新建一個div 作為彈出層 里面有一個錄入信息的表格 各種html控件 只要寫上easyui對應的樣式 就自動渲染了 看彈出層的 class="easyui-dialog" data-options="closed:true,title:'新學生注冊',modal:true"
其實很簡單噻看字面意思就明白了 這些參數 都在easyui的文檔里有。驗證 也是在html元素上寫data-options 就可以了， ：
<div id="addBox" class="easyui-dialog" data-options="closed:true,title:'新學生注冊',modal:true" style="width: px; height: px"> <table class="auto-style"> <tr> <td>學生姓名：</td> <td> <input id="stuname" class=" easyui-textbox" data-options="required:true,missingMessage:'必填項！',validType:'email',invalidMessage:'email格式不正確！'" type="text" /></td> </tr> <tr> <td>班級： </td> <td> <input class="easyui-combobox" id="grad" name="grad" data-options="valueField:'id',textField:'gradName',required:true,missingMessage:'必填項！'" /></td> </tr> <tr> <td> <input id="saveBtn" onclick="saveClick()" type="button" value="保存" /></td> <td> <input id="Button" type="button" onclick="$('#addBox').dialog('close');" value="關閉" /></td> </tr> </table> </div>新建按鈕：
注意千萬別用button 元素 就是這種 <button>新加的</button> 這是個坑 ，折騰了好久。
保存按鈕調用 的js函數：
//保存信息 function saveClick() { var isvaliok = $("#addBox").form('validate');//包起來的需要提交信息的那個div框的id if (isvaliok == false) { $.messager.show({ title: '提示', msg: '請完善不正確的項后再提交', showType: 'show' }); return; } var stu = {}; stu.name = $("#stuname").val(); stu.age = ; stu.GradId = $("#grad").combobox('getValue'); stu.gradName = $("#grad").combobox('getValue'); if (isNaN(stu.GradId)) stu.GradId = null; var rst = WebApplication.NewFolder.HelloAjaxNet.addStu(stu); if (rst.value == "ok") { $('#addBox').dialog('close'); $('#studb').datagrid('reload'); var gradData = WebApplication.NewFolder.HelloAjaxNet.getGrad().value; $('#grad').combobox({ data: gradData }).combobox('reload'); } else { $.messager.show({ title: '提示', msg: rst.error.Message + rst.value, showType: 'show' }); } }注意到了噻：
var isvaliok = $("#addBox").form('validate');//包起來的需要提交信息的那個div框的id if (isvaliok == false) { $.messager.show({ title: '提示', msg: '請完善不正確的項后再提交', showType: 'show' }); return; }在easyui里進行驗證很簡單噻 只要在html代碼里把驗證格式定義好了 ，只需要傳入一個最外面容器控件的id $("#addBox").form('validate') 就自動幫我們驗證了。并且界面上還有提示 焦點自動放到第一個驗證不通過的控件上去了 完全不需要我們動手。
當然我們在客戶端 document.ready()的時候 必須要綁定表格和下拉框的數據：
$(function () { //頁面初始化 //載入表格數據 bindDataToTb(); //載入班級下拉框 var gradData = WebApplication.NewFolder.HelloAjaxNet.getGrad().value; $('#grad').combobox({ data: gradData }).combobox('reload'); var fd = new FormData(); });服務端保存的代碼：
//添加 [AjaxPro.AjaxMethod] public string addStu(StudentsInfo stu) { MyDb db = new MyDb(); if(stu.GradId==null) { if (string.IsNullOrEmpty(stu.gradName) == false) { Grad grd = new Grad(); grd.gradName = stu.gradName; Grad grdOld = db.grads.FirstOrDefault(r => r.gradName == stu.gradName); if(grdOld!=null) { return "類別已存在"; } else { db.grads.Add(grd); stu.grad = grd; } } } db.Students.Add(stu); db.SaveChanges(); return "ok"; }服務端代碼 如果我們沒有這個id的類別我們就認為這個類別是新的 ，新加一個類別 然后立即綁定 perfect 完美 ，棒棒噠
看上去是不是有模有樣。做管理類軟件還行。
這樣ui 那樣ui當你需要自定義樣式的時候發現什么ui都是浮云，例如我說的國內的寫js比較牛的 就已經造出來很多ui了 ，表格是很漂亮 很強大。 其實很多功能你還是用不到 你想改還很困難 當然我的js也是很菜的。 當你用到另一套ui 的時候又要熟悉它那一套 。我只想用個簡簡單單的自定義分頁表格而已 或者像asp.net里的服務器控件repeat 流式布局 四個數據一行那種 你怎么做。 還是自己動手吧。php里面有前端模板。
我這里只是簡單從實際需求了解下angular的威力 php里面模板什么的都是浮云 新建一個webform HelloAjaxNetAngular.aspx
注意這個例子 服務端代碼我一律用上面的絲毫都不會變 只是前端變了，angularjs 的主打思想是mvvm 模式 就是wpf里面那種依賴屬性 動態綁定 ，不知道你們用過沒 反正我用過 感覺就一個字 爽 ，做這種數據庫平臺程序 mfc winform 都是渣。
angularjs 的基礎我就不介紹了 哈 直接從需求入手 做一個分頁表格 加 信息更新 功能
angularjs的網站是 http://www.angularjs.org/ 這個網址在國內也是訪問不了的。一些相關的其他人的學習筆記有 http://www.angularjs.cn/ http://www.zouyesheng.com/angular.html
反正這兩個教程看了下對我沒 對我沒起到啥作用 感覺跟嚼木渣樣的 ，angularjs的理念雖然是mvvm 但是angularjs本身還是感覺晦澀難懂。
我就在這樣一個半懂不懂的狀態下寫了這個例子 ，所有的操作 幾乎都完全不需要向jquery那樣動dom 。真心感覺到了他的強大。前端就一個controller函數 管整個頁面，怎么一個一個的分 我也不明白 只知道controller 跟html限定一樣的樹狀結構。沒在范圍的html元素不能訪問其controller里的 變量。
我們來看這個controller 函數 ，我寫的時候也沒什么感覺 。就是感覺很存粹 就只感覺到兩個東西存在 。業務邏輯在操作數據。 就像在寫c#數據操作代碼樣：
function myCtr($scope) { var mod = [{ name: 'xiang', age: }, { name: 'xiang', age: }, { name: 'xiang', age: }]; $scope.data = mod; $scope.curobj = {}; $scope.pageEntity = { total: , rows: , page: , pgmsg: '' } //初始化默認第一頁 $scope.initPage = function () { var firstPage = WebApplication.NewFolder.HelloAjaxNetAngular.BindData($("#txtkeyword").val(), $scope.pageEntity.page, $scope.pageEntity.rows); $scope.data = firstPage.value.rows; var pageEntityMod = {}; pageEntityMod.total = firstPage.value.total; pageEntityMod.rows = $scope.pageEntity.rows; pageEntityMod.page = $scope.pageEntity.page; var totalpage = pageEntityMod.total % pageEntityMod.rows == ? parseInt(pageEntityMod.total / pageEntityMod.rows) : parseInt(pageEntityMod.total / pageEntityMod.rows) + ; pageEntityMod.pgmsg = "共 " + pageEntityMod.total + "條記錄 每頁 " + pageEntityMod.rows + "條，共 " + totalpage + "頁 ，當前第 " + pageEntityMod.page + "頁"; $scope.pageEntity = pageEntityMod; $scope.curobj = {}; } //更新當前 選定的 $scope.modifyCur = function () { var rst = WebApplication.NewFolder.HelloAjaxNetAngular.updateStu($scope.curobj) //刷新表格 當前選中信息 復原 $scope.initPage(); alert(rst.value); } //下翻頁 $scope.nextPage = function () { var totalpage = $scope.pageEntity.total % $scope.pageEntity.rows == ? parseInt($scope.pageEntity.total / $scope.pageEntity.rows) : parseInt($scope.pageEntity.total / $scope.pageEntity.rows) + ; var pagenewnum = $scope.pageEntity.page + ; if (pagenewnum <= totalpage) $scope.pageEntity.page += ; $scope.initPage(); } //上翻頁 $scope.previousPage = function () { var pagenewnum = $scope.pageEntity.page - ; if (pagenewnum >= ) $scope.pageEntity.page -= ; $scope.initPage(); } //搜索 $scope.search = function () { } //選中一行 $scope.del = function (sender, curobj) { //所有行的顏色還原//設置選中那一行的顏色 var rows = $(sender.target).parent().parent().parent().find("tbody").find("tr"); for (var i = ; i < rows.length; i++) { $(rows[i]).css("background", "white"); } $(sender.target).parent().css("background", "#ffed"); $scope.curobj = curobj; } //首次先調用下 以獲取第一頁 $scope.initPage(); }界面部分：
<div ng-controller="myCtr" id="mygrid"> <input id="txtkeyword" type="text" /><input ng-click="initPage()" type="button" value="搜索" /> <br /> <br /> <div style="height: px"> <table cellspacing="" border="" class="gridtable"> <thead> <th width="px">name</th> <th width="px">age</th> </thead> <tbody ng-repeat="stu in data"> <tr ng-click='del($event,stu)' style="background-color: white"> <td>{{stu.name}}</td> <td>{{stu.age}}</td> </tr> </tbody> </table> </div> <div id="pager"> <a href="#" ng-click="previousPage()">上一頁</a> <a href="#" ng-click="nextPage()">下一頁</a> <span>{{pageEntity.pgmsg}}</span> </div> <div> 姓名：<input type="text" value="{{curobj.name}}" ng-model="curobj.name" /><br /> 年齡：<input type="text" value="{{curobj.age}}" ng-model="curobj.age" /> <input id="Button" type="button" ng-click="modifyCur()" value="更改" /> </div> </div>看到我自己搞了一個數據綁定函數 參照easyui里datagrid的loader。 第一次請求得到分頁信息后 我立即把數據綁定到表格 你可以看到完全就像做模板樣的，然后初始化自己的分頁控件。 在ng-click 的時候像原來一樣觸發客戶端單擊 然后調用controller里的方法去更新數據 ，注意僅僅是根據業務邏輯去更新數據 其他的不需要做。關于上面兩段代碼不明白的自行去看angularjs 入門和數據綁定 用不了10分鐘，
由于有wpf那種雙向綁定機制，數據模型 數據更新了 頁面內容自動跟著變。甚至你可以看到我編輯下面文本框里的數據的時候 都還沒提交 上面表格的數據就跟著變 因為他們的數據是從同一個地方來的，看著恍惚都感覺是ajax哈。
上面所有示例的項目源碼下載 可直接運行，由于引了些外部庫進來十兆差點放不下
說點后話
其實照互聯網這樣推動發展下去的話 前端會統一 前端才是王道 到時候一個網頁 就是一個系統 一個客戶端。 后端只負責數據和安全。 現在的什么html5不是幾乎都成為工業標準了么 有些嵌入式設備都支持
暫時像博客園里我看到的有幾個講的 前后端天人合一的那種mvc模式 前端后端操作同一個model 前端更新屬性了有一種機制自動就更新到后端持久化到數據庫去了 或者后端更新model的某個屬性 前端html頁面的值自動就變了。 不是說做不到 畢竟牛人這么多 ，我覺得至少還不穩定吧。
各種ui有easyui ligerui fineui miniui Devexpress 還有很多js框架 seajs requirejs JavaScriptMVC backbone avalonjs knockout angular jquery jqueryui js真是屎一樣的東西啊各種框架學都學不完
尤其是軟件行業日新月異 基于框架 和平臺的技術太多了 不精通某樣技術沒關系 能使用就行 ，但是作為一個技術人員 你至少得精通一樣 或者一門技術 要不然就是個搬磚的 很遺憾 我基本還在搬磚的路上。寫業務代碼就是用一年的經驗混十年，寫業務代碼是他的工作 工作之余還得有點精神追究 研究下事情的本質 ，只要是還不錯的程序員 做這種數據庫系統久了都會自己搞點能快速開發的所謂的小框架 積累一些自己的工具庫 和經驗。
在工作上不要有什么偏見 只要他每天把業務代碼寫的出來 軟件開發也只是一門職業 你不是英雄 ，目的是解決問題 不是轉牛角尖。
我本人對js是不怎么感冒的 js也很爛，當初設計這個東西的時候就不完善給我們使用它造成了各種阻礙 ，但是你做web開發又不得不用它。這里也并不是對做前端的有什么偏見 感謝那些前端吃的很透的人 像司徒正美那些高手 制造了這些工具讓我們更容易的去完成這些網站程序。
新聞熱點
疑難解答
