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