Microsoft ASP.NET AJAX 使用客户端调用服务器端的方法

从Atlas到Microsoft ASP.NET AJAX 1.0 RC发生了很大的变化，鉴于目前网上Microsoft ASP.NET AJAX 1.0 RC中文资料的匮乏，本文针对Atlas中PageMethods的变化编写了客户端调用服务器端方法的新的教程。以前处于Microsoft.Web.Preview组件中的Microsoft.Web.Resources.ScriptLibrary.PreviewGlitz.js现在已经更改，需要使用新的方式实现，详细请参考本文。

关键字： PageMethods ScriptLibrary ASP.NET AJAX 1.0 RC

Microsoft ASP.NET AJAX可以很方便的让我们在客户端使用脚本调用ASP.NET Web Services(.asmx),要启用这一特性，像前面提到的一样，必须要配置Web.Config，可以参照Microsoft ASP.NET AJAX安装目录下的Web.Config，如果是通过ASP.NET AJAX-enabled Web site模版建立的站点，则不需要再进行设置了。配置节点如下：

< system.web >
   < httpHandlers >
     < remove verb = " * "  path = " *.asmx " />
         < add verb = " * "  path = " *.asmx "  validate = " false "  type = " System.Web.Script.Services.ScriptHandlerFactory " />
   </ httpHandlers >
< system.web >

 

以上配置节为Web应用程序添加了一个HTTP handler：ScriptHandlerFactory，它的作用是处理脚本调用Web Service的请求，如果是非脚步对.asmx的调用请求，则转给默认的处理器。

使用脚本调用服务器方法有两种方式，一种是调用常规的ASP.NET Web Service，另一种直接调用页面代码页上的方法。两种方式都非常简单，对于前者，我们只需在现有的Web Service上增加一个属性：

[System.Web.Script.Services.ScriptService]

而对于页面上的方法，只需给现有方法增加如下特性,并改为静态方法：

[System.Web.Services.WebMethod]

 

下面我们分别对其进行详细讨论。

Web Service方式

首先为项目添加一个文件夹WebServices，来存放所有要用到的Web Servcie页面，然后在Web Services文件夹下面添加一个 Web Service命名为SimpleWebService.asmx，在后台增加一个SayHello方法，并指定WebMethod特性。完整的代码如下：
SimpleWebService.cs

using  System;
using  System.Web;
using  System.Collections;
using  System.Web.Services;
using  System.Web.Services.Protocols;
 
[System.Web.Script.Services.ScriptService]
[WebService(Namespace  =   " http://tempuri.org/ " )]
[WebServiceBinding(ConformsTo  =  WsiProfiles.BasicProfile1_1)]
public   class  SimpleWebService : System.Web.Services.WebService
{
    public SimpleWebService()
    {
    }
    [WebMethod]
    public string SayHello(string s)
    {
        return "Hello " + s;
    }
}

 

然后添加一个Web Form,这里取名ServiceMethodDemo.aspx,添加一些JavaScript函数调用Web Service,完整代码如下：

<% @ Page Language = " C# "  AutoEventWireup = " true "
 CodeFile = " ServiceMethodDemo.aspx.cs "  Inherits = " Demo6_ServiceMethodDemo "   %>
<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "
  " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml "   >
< head runat = " server " >
     < title > Web Service脚本调用示例 </ title >
     < script type = " text/javascript " >       
     //  调用Web Service的JavaScript函数 
     function  EchoUserInput()
     {
        var echoElem = document.getElementById("EnteredValue");
        SimpleWebService.SayHello(echoElem.value,
            OnSucceeded);
    }
     //  调用成功后的回调函数
     function  OnSucceeded(result)
     {
        var RsltElem = document.getElementById("Results");
        RsltElem.innerHTML = result;
    }
     </ script >
</ head >
< body >
     < form id = " Form1 "  runat = " server " >
     < asp:ScriptManager runat = " server "  ID = " scriptManager " >
       < Services >
         < asp:ServiceReference path = " ~/WebServices/SimpleWebService.asmx "   />
       </ Services >
       </ asp:ScriptManager >
       < div >
           < h2 > Web Service脚本调用示例 </ h2 >
             < p > 请在下面文本框内输入名字，然后点击按钮. </ p >
             < input id = " EnteredValue "  type = " text "   />
             < input id = " EchoButton "  type = " button "  
                value = " Echo "  onclick = " EchoUserInput() "   />
       </ div >
     </ form >
     < hr />< span id = " Results " ></ span >
</ body >
</ html >

 

 

最后在浏览器中查看，可以看到我们期望的效果，在页面的文本框中输入你的名字，点击按钮，页面显示出
Hello xxx!

Page Method 方式

如果不想独立创建Web Service，而只是希望能够调用页面上的一些方法，那么可以采用Page Method的的方法。同样的我们添加一个页面PageMethodDemo.aspx，增加一些JavaScript和一个后台方法，注意这个方法必须是静态方法，代码如下：

< script type = " text/javascript " >   
function  PageMethodCall() 
{
    var testString = "PageMethodCall"; 
    PageMethods.Test($get('txtName').value, OnSucceeded);
}
//  页面方法调用完成的回调函数.
function  OnSucceeded(result)
{
    // 显示调用结果
    var RsltElem = document.getElementById("Results");
    RsltElem.innerHTML = result;
}
</ script >



< form id = " form1 "  runat = " server " >
< asp:ScriptManager ID = " ScriptManager1 "  runat = " server " >
</ asp:ScriptManager >
< div >
     < h2 > Page Method </ h2 >
     < input ID = " txtName "  type = " text "   />
     < button id = " Button1 "  
        onclick = " PageMethodCall(); " > 调用Page Method </ button >
</ div >
< hr />         
< div >
     < span id = " Results " ></ span >
</ div >  
</ form >

 

代码页PageMethodDemo.aspx.cs

[System.Web.Services.WebMethod]
public   static   string  Test( string  name)
{
    return "Hello " + name + "!";
}