《ASP.NET AJAX 經典講座》逐步教學 #1：手工打造 out-of-band 呼叫

2008-04-23

112004
0
AJAX

摘要:《ASP.NET AJAX 經典講座》逐步教學 #1：手工打造 out-of-band 呼叫

《ASP.NET AJAX 經典講座》 p.19--24 的範例逐步教學。

如果您尚未準備好開發環境，請先看這篇：《ASP.NET AJAX 經典講座》實作練習的基本環境。

目的

使用 XMLHttpRequest 自行發出 out-of-band 呼叫。

步驟

在網站中加入一個新網頁，檔案命名為 TestOutOfBandCall.aspx。
在網頁上放一個 DropDownList 伺服器控制項，命名為 EmployeeList。
在網頁上放一個一個 HTML Button（注意：不是 Button 伺服器控制項）、一個 Label 伺服器控制項。
指定 Button1 的 onclick 屬性為 "MoreInfo()"，此 JavaScript 函式的用途是在用戶端發出 out-of-band 呼叫，並將伺服器的執行結果回填至網頁的 Label1 元素的內容。我們把實際發出 out-of-band 呼叫的動作寫成另一個 JavaScript 函式：SendRequest，以便讓 MoreInfo 和其他函式重複叫用。MoreInfo 和 SendRequest 函式的原始碼請參考下方的程式列表 1 或本書的 p.19、p.23）。
撰寫網頁的伺服器端程式碼：Page_Load 事件以及 IsOutOfBand 和 PopulateList 函式。其中 IsOutOfBand 是用來判斷目前的請求是否為 out-of-band 請求，PopulateList 則是從資料中取出員工的姓氏，並塞給 EmployeeList 控制項（參見程式列表 2 或本書的 p.21）。
在劉覽器中檢視此網頁。從下拉清單選擇其中一名員工，然後點一下按鈕，下方會顯示該名員工的 ID。觀察重點：當你按按鈕時，雖然會呼叫伺服器端網頁，但是瀏覽器並沒有重新載入整個網頁，因為它發出的是 out-of-band 呼叫，且利用 DOM 將呼叫的執行結果回填至網頁的特定元素，以達到局部更新頁面的效果。

程式列表 1：用戶端網頁的 SendRequest JavaScript 函式

<script type="text/JavaScript">

function SendRequest(url, params)
{
  // 把一些參數附加至查詢字串
  var pageUrl = url + "?outofband=true&param=" + params;

  // 初始化 XmlHttpRequest 物件
  var xmlRequest, e;
  try 
  {
    xmlRequest = new XMLHttpRequest();
  }
  catch(e) 
  {
    try 
    {
      xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch(e) { }
  }

  // 準備 POST 同步請求
  xmlRequest.open("POST", pageUrl, false);
  xmlRequest.setRequestHeader("Content-Type",
                              "application/x-www-form-urlencoded");
  xmlRequest.send(null);
  return xmlRequest;
}

function MoreInfo()
{
  var empID = document.getElementById("EmployeeList").value;
  var xml = SendRequest("TestOutOfBand.aspx", empID);
  // 更新 UI（Note：書上是用 span 標籤，且命名為 Msg，這裡是用 Label 控制項，效果一樣）
  var label = document.getElementById("Label1");
  label.innerHTML = xml.responseText;
}

</script>

程式列表 2：TestOutOfBand.aspx.cs 原始碼

1 using System;

2 using System.Data;

3 using System.Configuration;

4 using System.Collections;

5 using System.Web;

6 using System.Web.Security;

7 using System.Web.UI;

8 using System.Web.UI.WebControls;

9 using System.Web.UI.WebControls.WebParts;

10 using System.Web.UI.HtmlControls;

11 using System.Data.SqlClient;

13 public partial class TestOutOfBand : System.Web.UI.Page

14 {

15 protected void Page_Load(object sender, EventArgs e)

16 {

17 if (IsOutOfBand())

18 return;

19 if (!IsPostBack)

20 PopulateList();

21 }

23 private bool IsOutOfBand()

24 {

25 bool isCallback = false;

26 isCallback = String.Equals(Page.Request.QueryString["outofband"],

27 "true", StringComparison.OrdinalIgnoreCase);

30 if (isCallback)

31 {

32 string param = Request.QueryString["param"].ToString();

33 Response.Write(ExecutePageMethod(param));

34 Response.Flush();

35 Response.End();

36 return true;

37 }

38 return false;

39 }

41 private void PopulateList()

42 {

43 SqlDataAdapter adapter = new SqlDataAdapter(

44 "SELECT employeeid, lastname FROM employees",

45 "SERVER=(local);DATABASE=northwind;UID=sa;");

46 DataTable table = new DataTable();

47 adapter.Fill(table);

48 EmployeeList.DataTextField = "lastname";

49 EmployeeList.DataValueField = "employeeid";

50 EmployeeList.DataSource = table;

51 EmployeeList.DataBind();

52 }

54 string ExecutePageMethod(string eventArgument)

55 {

56 return "You clicked: " + eventArgument;

57 }

58 }

回首頁