本書第七章〈ASP.NET AJAX遠端方法呼叫〉主要是說明如何利用 ASP.NET AJAX 呼叫遠端的 Web services。其中包括從用戶端頁面以 JavaScript 直接呼叫 ASP.NET Web services,以及以橋接的方式呼叫任何 Web services。

這裡用一個 step-by-step 的範例說明如何在用戶端頁面直接呼叫 ASP.NET Web services。用戶端頁面只簡單放一個 Button 和 Label,當按鈕按下時,會呼叫 Web service 的某個方法,該方法會傳回用戶端 IP 位址,而用戶端頁面在收到傳回值的時候,則將傳回值顯示於 Label 上。步驟如下:

1. New 一個 ASP.NET AJAX-Enabled Web Site。
2. Website > Add New Item。
3. 選擇 Web Service,檔案名稱輸入 MyService.asmx。
4. 編輯 MyService.asmx 的 code-behind 類別(App_Code\MyService.cs)

  4.1. 加入 using System.Web.Script;
  4.2. 為類別標上 [ScriptService] attribute:
 
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ScriptService]
    public class MyService : System.Web.Services.WebService
    {
        // ... 略
    }
 
  4.3. 撰寫可供 JavaScript 呼叫的 Web 方法,如下:
 
    [WebMethod]
    [ScriptMethod]
    public string GetClientIP()
    {
        return HttpContext.Current.Request["REMOTE_ADDR"];
    }
   
    注意:要加上 [ScriptMethod] attribute。
   
5. New 一個 Web form:JsCallWebService.aspx。

6. 從 Toolbox 的 AJAX Extensions 面板中拉一個 ScriptManager 控制項到網頁上,然後修改其標籤內容,如下(也可以把下面這段直接貼上):

        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="~/MyService.asmx" />
            </Services>
        </asp:ScriptManager>
       
7. 再分別拉一個 HTML Button 和 Label,程式碼如下:

        <input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
        <br />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
   
8. 接著處理按鈕按下的用戶端事件:

    <script language="javascript" type="text/javascript">

    function Button1_onclick()
    {
        // 呼叫 Web service 方法。
        MyService.GetClientIP();
    }
   
    function pageLoad()
    {
        // 指定 Web service 方法呼叫完成時的預設 callback。
        MyService.set_defaultSucceededCallback(methodComplete);
    }

    function methodComplete(results, context, methodName)
    {
        // Web service 方法呼叫完成時,將結果塞給 Label1 顯示。
        $get("Label1").innerHTML = results;
    }   
    </script>

 

下載完整原始碼