ASP.NET AJAX

　ASP.NET AJAX 的架構在設計上同時兼顧了 Client-side (AJAX Library) 和 Server-side (AJAX Extensions)，亦支援 Web Service 的整合應用；ASP.NET AJAX 具備了完整的型別系統，內建的控制項其 Namespace 已改為 System 開頭，如下圖 1 所示。由圖中可知，ASP.NET AJAX 的組件檔 (System.Web.Extensions.dll) 會用 GAC (全域組件快取) 安裝 (有關 GAC 可參考版工的上一篇文章「開發您的第一個 Custom Control - 使用 Visual Studio 2005」下半部)。此外，官方網站還提供了 39 個額外的 AJAX 控制項 (ASP.NET AJAX Control Toolkit) 及其原始碼 (以 C# 撰寫) 下載；若開發人員仍嫌其功能不符自己專案所需，仍可透過 ASP.NET AJAX Control Toolkit (附原始碼版本) 中的 TemplateVSI，撰寫具備 Ajax 功能的自訂元件或自訂控制項 (必須繼承 ExtenderControl 抽象類別)。

圖 1　核心的 ASP.NET AJAX Extensions 已改為 GAC (全域組件快取) 安裝，型別系統中的 Namespace 亦改為 System 開頭　

　接下來的範例我們要用 ASP.NET AJAX，建立一個可從 SQL Server 撈取資料的 GridView，且在換頁時不會整個 Web Form 都 postback。在開發環境中，作業系統只要是 Windows 2000 及之後的各個版本皆可，前提是必須有安裝 .NET Framework 2.0 或 3.0；而開發工具可用 Visual Studio 2005，或可免費下載及使用的 Visual Web Developer Express Edition。接下來要去 AJAX 的官方網站，下載 ASP.NET 2.0 AJAX Extensions 1.0、Documentation (非必要)、ASP.NET AJAX Control Toolkit (非必要)。若您的開發環境中已有舊版的 ASP.NET AJAX (Atlas Framework)，必須先將其移除，才能安裝下載回來的 ASPAJAXExtSetup.msi 檔案；安裝完這個 AJAX 核心程式後，會在 Windows 中自動新增下列目錄，並建立一些 Client-side runtime 所需要的 .js 檔案：C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025安裝好後，我們開啟 Visual Studio 2005，選擇功能表的「檔案→新增→網站」，會出現如下圖 2 中的視窗，選擇「ASP.NET AJAX-Enabled Web Site」這個選項、選好網站的儲存位置並建立後，在開發畫面左側的「工具箱」中會多出一個叫做 AJAX Extensions 的索引標籤，並內建 5 個控制項，其中的 ScriptManager 控制項還會自動出現在預設開啟的 Web Form 當中。有關這些控制項的作用，官方網站上亦有相關解釋，以下為其說明：

ScriptManager：用來管理用戶端的元件、下方三種控制項的 partial-page rendering (頁面局部更新)，以及註冊頁面相關的用戶端 script。每個 Microsoft AJAX 頁面都需要一個，也只能有一個。

UpdatePanel：只要將傳統的 ASP.NET 控制項放入其中，即可令其具備有 Ajax 能力，亦即可達成以「頁面局部更新」取代過去的 postback 整頁更新。

UpdateProgress：可顯示 UpdatePanel 控制項中 partial-page 更新的進度，可由開發人員自訂要顯示的內容。

Timer：可自訂要執行頁面「同步」(postback) 或「非同步」(callback) 更新的時間間隔。

圖 2　在 Visual Studio 2005 中建立的 AJAX 網站，和傳統的 ASP.NET 2.0 網站一樣，無須安裝 IIS 即可做測試在新建立的 AJAX 網站其 Web.config 檔中，會額外加入一些和 ASP.NET AJAX Framework 整合的相關設定，有關設定的相關細節可參考官方網站的介紹。接下來，請您按照下列步驟操作：

1. 在已建立 ScriptManager 控制項的 Default.aspx 中，從「工具箱」的 AJAX Extensions 索引標籤中，手動加入一個 UpdatePanel 控制項，預設名稱為 UpdatePanel1。

2. 從「工具箱」的「資料」索引標籤中，拖曳一個 GridView 到剛才的 UpdatePanel1 其編輯區域中。

3. 點選這個 GridView 右上角的 SmartTag，設定「自動格式化」和「資料來源」，並啟用「分頁」功能。

4. 本例的「資料來源」是使用 SQL Server 2005 的 Northwind 資料庫的 Orders 資料表。若您沒有這個資料庫，可從上述由官方網站下載的 Documentation 中，解壓縮 SampleData.zip 後找到該檔案，或選用其他的資料來源 (至於怎麼從 VS 2005 的「伺服器總管」建立資料庫連接，則不在本文討論範圍，請自行參考坊間書籍、說明文件或網路文章)。

5. 按 F5 或 Ctrl + F5 瀏覽這張 Web Form，您會發現 GridView 在換頁時已經不會再 postback，因此整個頁面在 GridView 換頁時也不會閃爍，IE 的右下角也不會再出現 progress bar。

接下來我們要在這個頁面中再加入 UpdateProgress 控制項，以便在 UpdatePanel 被用戶端 request 時，能顯示開發人員自訂的訊息。請您按照下列步驟操作：

1. 從「工具箱」的 AJAX Extensions 索引標籤中，拖曳一個 UpdateProgress 控制項到之前的 UpdatePanel1 下面，預設名稱為 UpdateProgress1。

2. 從 Visual Studio 的「屬性」視窗中，將 UpdateProgress1 的 AssociatedUpdatePanelID 屬性，設為 UpdataPanel1。 在 UpdateProgress1 的編輯區域中，輸入一些自訂的文字訊息，例如：取得訂單相關資料中…。設定完成後的畫面如圖 3 所示。

3.在 UpdateProgress1 的編輯區域中，輸入一些自訂的文字訊息，例如：取得訂單相關資料中…。設定完成後的畫面如圖 3 所示。

1. 圖 3　完成後的畫面。至目前為止無須撰寫任何程式碼　至目前為止雖然您已完成 UpdateProgress 控制項的設定，但按 Ctrl + F5 瀏覽並做 GridView 的換頁時，應該看不到剛才的自訂訊息。因為 UpdateProgress 控制項有一項 DisplayAfter 屬性，用來設定「送出 request 後到顯示 UpdateProgress 控制項之間的延遲時間」；若該值設得比 callback 所需的時間還短的話，使用者就看不到 UpdateProgress 控制項和自訂訊息。因該屬性預設值為 500 (毫秒)，因此若您頁面中 partial-page rendering 所花費的時間低於 0.5 秒，則 UpdateProgress 控制項及自訂的訊息根本就不會被顯示。

因此接下來我們要在後端的 VB (或 CS) 程式碼中動點手腳，故意將 GridView 每次換頁所需的時間延長為 5 秒，這樣一來每次點選 GridView 的頁碼後，都要隔 0.5 秒才會顯示 UpdateProgress 控制項及我們剛才自訂的「取得訂單相關資料中…」字樣，並會持續顯示 4.5 秒後才消失。此一動作是要模擬網站存取頻繁或資料庫大量查詢時的情況，但您亦可在實際開發專案時，以此方式測試 UpdateProgress 控制項是否能正常運作。

做法如下：
1. 在 Default.aspx.vb 中，建立 GridView 控制項的 PageIndexChanged 事件處理常式。

2. 手動加入下方程式碼：

System.Threading.Thread.Sleep(5000)　在本文一開始從官方網站下載時，若您有下載 ASP.NET AJAX Control Toolkit，解壓縮後 (建議放在安裝完核心程式後新增的目錄下)，可將其中的 SampleWebSite 資料夾以「網站」的模式開啟，裡面包含了 32 個 AJAX 的控制項使用教學。若您要在您的專案中使用這些 AJAX 控制項，可在 VS.NET「工具箱」新增一個索引標籤 (如圖 3 左側的「my AJAX Controls」)，在上面按滑鼠右鍵後選取「選擇項目」，會出現一個如圖 4 的「選擇工具箱項目」視窗，按其右下方的「瀏覽」按鈕，將路徑指到 SampleWebSite 資料夾底下，Bin 目錄中的 AjaxControlToolkit.dll 後，雙擊滑鼠左鍵或按「開啟」按鈕。完成後會出現圖 4 中的畫面，按「確定」按鈕後，即可在您的專案中直接從「工具箱」拖曳，引用現成的 39 個 AJAX 控制項。

圖 4　將包含 39 個 AJAX 控制項的 dll 組件檔加入專案中若您下載的是「包含原始碼」版本的 ASP.NET AJAX Control Toolkit，可直接點選其根目錄的 AjaxControlToolkit.sln 將方案開啟，接著選「以一般方式載入專案」。

開啟方案後，在 Visual Studio 的「方案總管」中，以滑鼠右鍵點選 TemplateVSI 後，選取「建置」指令，如下圖 5 所示；此時若再以滑鼠右鍵點選 TemplateVSI 上方的 [磁區代號]:\...\SampleWebSite\ 後，選取「在瀏覽器中檢視」指令，亦可開啟上述的控制項教學網站。但 TemplateVSI 主要是用來讓您安裝 Project Template (範本)，以便開發 AJAX 的 Custom Control 自訂控制項 (AJAX Control Extender)；當然您還是可以用 AJAX Control Toolkit 去製作一般的 AJAX 網站。建置完成後，在 Windows 檔案總管中的 TemplateVSI 目錄下，會多出 bin 和 obj 兩個資料夾，前者會內建多個 Extender 和 Template。

圖 5　建置 TemplateVSI 專案後，會安裝多種 Project Template
在 ASP.NET AJAX Control Toolkit 解壓縮後的目錄中，還有一個叫做 AJAX Control Extender 的資料夾，裡面有一個 AjaxControlExtender.vsi 安裝程式 (或是上述 TemplateVSI 的 bin 資料夾中也有)，點選安裝後會建立一些 Template，以便您用來建立自己的 AJAX Control Extender (AJAX 自訂控制項)；因其用途並非用來製作一般的網站，所以您無法在 Visual Web Developer 這款網頁開發工具中使用這些 Template，而僅能在 Visual C#、Visual Basic、或 Visual Studio 中操作。

安裝完後，若在 Visual Studio 中選擇功能表的「檔案→新增→網站」，會多出如圖 2 下方，「我的範本」中的「ASP.NET AJAX Control Toolkit Web Site」選項，其可用來新增已內建 Bin 資料夾和 AjaxControlToolkit.dll 的網站 (Toolkit-based website)。此時您可再仿照圖 4 中的做法，直接在「工具箱」的索引標籤內，引用此網站 Bin 資料夾的 39 個 AJAX 控制項；若您不願將來別的網站也引用此網站 Bin 中的 AjaxControlToolkit.dll，亦可將 AjaxControlToolkit.dll、AjaxControlToolkit.pdb 這兩支檔案，從 Windows 檔案總管中拷貝到 AjaxControlToolkit\Binaries 目錄下，或其他任何位置，以便讓將來新增的各個網站共用。

　參考文件 :[1] Alessandro Gallo, David Barkol, and Rama Krishna Vavilala, 2007, 「ASP.NET AJAX in Action」, Manning.[2] Official Microsoft ASP.NET AJAX Site, 「http://ajax.asp.net/」.[3] ASP.NET AJAX Documentation, 「http://ajax.asp.net/docs/」.[4] ASP.NET Web The Official Microsoft ASP.NET 2.0 Site Videos,「How Do I: Get Started with the ASP.NET AJAX Control Toolkit?」.