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