实例详解angularjs和ajax的结合使用

这是一篇关于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>

新建按钮：

 <a id="Button1" onclick="$('#addBox').dialog('open');" class="easyui-linkbutton">加新的</a>

注意千万别用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开发又不得不用它。这里也并不是对做前端的有什么偏见 感谢那些前端吃的很透的人 像司徒正美那些高手 制造了这些工具让我们更容易的去完成这些网站程序。