ASP.NET Ajax之Page Methods

实现Ajax的途径很多，作为一个ASP.NET程序员，如果对ASP.NET Ajax基础知识不了解似乎就说不过去了。本文讲述Page Methods的使用。

既然是ASP.NET Ajax，首先需要在页面上添加一个ScriptManager并且设置EnablePageMethods="true"。然后在后台代码添加using System.Web,Services;。

然后开始编写后台方法，此时你需要注意：

1 将该方法声明为public； 

2 将该方法声明为static； 

3 为该方法添加[WebMethod]属性； 

之后就是前台页面调用，步骤如下：

1 在客户端使用如下JavaScript语法调用该页面方法：

      PageMethods.MethodName(param1, param2,..., callbackFunction);

      function callbackFunction(params){//do something here...;}

注意，PageMethods是不会有智能感知的，所以不要怀疑是自己写错了。

2 为客户端异步调用指定回调函数，在回调函数中接收返回值并进一步处理 。

下面给出一个简单的两级联动的示例：

后台方法：

 

代码

    [WebMethod]
     public   static   string  GetCountries()
    {
         // 实际应用中需要一个JSON解析器，将你数据库中的DataTable或者List<Entity>转化为JSON字符串。
          // 我这里示范传统的切割字符串（先用逗号切为数组，再用冒号切为Text和Value）
         return   " China:86,America:1,England:44,France:33 " ;
    }

    [WebMethod]
     public   static   string  GetCities( string  countryid)
    {
        // 模拟根据国家编号查询城市的数据库查询操作，返回JSON
         if  (countryid  ==   " 86 " )
             return   " [{city:'Beijing',no:'010'},{city:'Wuhan',no:'027'},{city:'Shanghai',no:'020'}] " ;
         if  (countryid  ==   " 1 " )
             return   " [{city:'New York',no:'010'},{city:'LA',no:'027'},{city:'Houston',no:'020'}] " ;
         if  (countryid  ==   " 44 " )
             return   " [{city:'London',no:'010'},{city:'Manc',no:'027'}] " ;
         if  (countryid  ==   " 33 " )
             return   " [{city:'Paris',no:'010'}] " ;
         return   "" ;
    }

前台调用：

代码

     < script language = " javascript "  type = " text/javascript " >
         function  getCountries() {
// GetCountries是后台方法名字，大小写不要错了。如果有参数，就把参数依次写在回调函数的前面；若没有则可不管
            PageMethods.GetCountries(loadCountries);}
// result是页面后台方法返回的字符串，后面2个参数暂时未用到
         function  loadCountries(result, userContext, methodName) {
             var  ddl1  =  document.getElementById( " ddl1 " );
             var  ary  =  result.toString().split( " , " );
             for  ( var  i  =   0 ; i  <  ary.length; i ++ ) {
                 var  item  =  ary[i].split( " : " );
                 var  opt  =   new  Option(item[ 0 ], item[ 1 ],  false ,  false );
                ddl1.options[ddl1.options.length]  =  opt;}}
// 根据国家选择城市
             function  getCities(obj) {
                 if  (obj.selectedIndex  !=   0 ) {
                     var  cid  =  obj.options[obj.selectedIndex].value;
                    PageMethods.GetCities(cid, loadCities);}
                 else  {
                     var  ddl2  =  document.getElementById( " ddl2 " );
                    ddl2.options.length  =   0 ;
                     var  opt  =   new  Option( " --Choose Your City-- " ,  "" ,  false ,  false );
                    ddl2.options[ddl2.options.length]  =  opt;}}
         function  loadCities(result, userContext, methodName) {
             var  ddl2  =  document.getElementById( " ddl2 " );
            ddl2.options.length  =   0 ;
             var  json  =  eval( " ( "   +  result  +   " ) " );
             for  ( var  i  =   0 ; i  <  json.length; i ++ ) {
                 var  opt  =   new  Option(json[i].city, json[i].no,  false ,  false );
                ddl2.options[ddl2.options.length]  =  opt;}}
     < / script>

 

这样的话实现一个三级联动也很简单，不过就是不知道效率如何。

补充说明：如果在Page Method里面需要调用页面的其他方法，那么这个方法和它一样必须设置为static。如果是调用其他dll的方法就没有这个限制。

/Files/1000/jscallserver.rar

转载于:https://www.cnblogs.com/1000/archive/2010/02/04/ASP-NET-Ajax-Page-Methods.html