《ASP.NET AJAX 經典講座》逐步教學 #5：在用戶端頁面直接呼叫 ASP.NET Web Services

2008-04-23

109085
0
AJAX

摘要:《ASP.NET AJAX 經典講座》逐步教學 #5：在用戶端頁面直接呼叫 ASP.NET Web Services

本書第七章〈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. 接著處理按鈕按下的用戶端事件：

    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>

下載完整原始碼

回首頁