实现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 为客户端异步调用指定回调函数,在回调函数中接收返回值并进一步处理 。
下面给出一个简单的两级联动的示例:
后台方法:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 "" ;
}
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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的方法就没有这个限制。