摘要:《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. 接著處理按鈕按下的用戶端事件:
<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>