微軟 ASP.NET 2.0 的AJAX 利劍～ ASP.NET AJAXepaper.gotop.com.tw/pdf/ACL021700.pdf微軟ASP.NET...
44
微軟 ASP.NET 2.0 的 AJAX 利劍～ ASP.NET AJAX 5-1 AJAX 非同步技術 5-2 AJAX 簡單範例 5-3 AJAX 範例程式特點說明 5-4 瞭解 AJAX 應用程式與 ASP.NET AJAX 5-4-1 AJAX 所針對的開發議題 5-4-2 AJAX 技術概念 5-4-3 ASP.NET AJAX 架構提供一個 AJAX 新途徑 5
Transcript of 微軟 ASP.NET 2.0 的AJAX 利劍～ ASP.NET AJAXepaper.gotop.com.tw/pdf/ACL021700.pdf微軟ASP.NET...
微軟 ASP.NET 2.0 的 AJAX 利劍～
ASP.NET AJAX
5-1 AJAX 非同步技術
5-2 AJAX 簡單範例
5-3 AJAX 範例程式特點說明
5-4 瞭解 AJAX 應用程式與 ASP.NET AJAX
5-4-1 AJAX 所針對的開發議題
5-4-2 AJAX 技術概念
5-4-3 ASP.NET AJAX 架構提供一個 AJAX 新途徑
5
5-2
前言 自從 2002 年 VS.NET 2002 版的發表，微軟的網頁技術正式由 ASP 邁
向新的 ASP.NET 里程碑，劃時代的 ASP.NET 在短短幾年時光躍居成為熱
門主流，順利攻佔資訊媒體與網頁程式開發人員的目光焦點，深獲大家的
喜愛與讚賞，同時也造就全球一股.NET 熱潮，於此時您看見本篇文章時，
下一代的 VS 2005 與 ASP.NET 2.0 已經正式發表（美國 11/7 日），由於前
一代 ASP.NET 1.0 技術的成功，很自然的大家早就引領期盼 ASP.NET 2.0豐富控制項與底層功能完整性能夠早日到來，但如果您只知道 ASP.NET 2.0、VS 2005 產品或技術，目前您已置身於 ASP.NET 技術危機，因為在
您背後正有一把巨大的利劍飛來，一個不小心就穿刺您堅強的技術盔甲，
有這麼誇張嗎？一點也不誇張！因為一個火候尚淺的 ASP.NET 初學者只
要巧妙熟練運用這把利劍，在某些 ASP.NET 網頁設計環結就能擊敗功力深
厚的網頁程式設計師，而經驗老道的網頁程式設計師還不知自己敗在何
處，那這把從虛空飛來的利劍叫什麼名字呢？它叫「ASP.NET AJAX」，
是一個 AJAX 的 Framework，掌握了這把利劍如同掌握了電影「臥虎藏龍」
中的青冥寶劍，能夠在剎那之間擊敗最強的敵手（隱喻網頁設計的難題），
以下將為您解釋什麼是 AJAX，什麼又是 ASP.NET AJAX。
5-1 AJAX 非同步技術 AJAX 是由「Asynchronous JavaScript and XML」這幾個英文字的開
頭所組成，是一種非同步的技術，表面上看來是「非同步」、「JavaScript 」、「XML」這三種東西，好像沒什麼了不起！？大家多多少少都有玩過，寫
網頁的人多少都懂 JavaScript，有的人熟到不能再熟了，XML 也有摸過，
至於同不同步好像不重要，幾個月前我第一次看到 AJAX 這字眼時直覺就
是如此，想說～又要新瓶裝舊酒或冷飯熱炒了嗎？所以瞄過一眼國外文章
後就匆匆帶過，但接連三天〝AJAX〞這個字眼在美國微軟的 MSDN Blog中一堆專家接二連三提出，我才感覺苗頭好像不對，竟然有我不知道的技
術存在（如果 AJAX 很重要很 Power 的話），故深入 Study 一下 AJAX 原
理與技術，OH~My GOD！還真的蠻 Power 的。
大家都知道 JavaScript 是 Client 端古老的王者，而 .NET 是新一代
Server 端的究極霸主，在大多數時候兩者之間幾乎是不相干，因為各做各
5-3
的，AJAX 它 Power 的地方似乎不在於「Asynchronous JavaScript and XML」表面上技術，而重點在於 AJAX 能夠巧妙將 Client 端與 Server 端技術串起
來融合在一起，Client 端一旦能夠援引 Server 端的應用程式，您將會發覺
所設計的網頁力量將源源不絕，而這用傳統的 ASP 或 ASP.NET 來說似乎
〝不可能〞，因為 Web 是無狀態，故 Browser 和 Web Server 之間是不會
有任何連線，只會有所謂的 Request 與 Response 的行為，且兩者的記憶體
管理空間和模式根本是兩個世界，故 JavaScript 要和 .NET Code 無礙地融
合也不太可能，但透過 AJAX 非同步模式的力量，可使得 JavaScript 能夠
自由自在呼叫 C#、VB.NET或 Web Service強大的力量，然後還能回傳 .NET型別物件如 DataSet 供 JavaScript 來處理；除此之外 AJAX 非同步技術只
需傳遞少量資料回 Server 處理，不像現在必須用 Postback 大笨牛的方式將
整個頁面回傳 Server 端處理，從此可以和 Postback 大笨牛 Say bye bye，動作靈巧得不可思議！（但意思不是要丟棄 Postback，而是視需要使用
AJAX 可以更靈活）。
OK！言歸正傳，那要如何使用 AJAX 呢？首先我要澄清一點 AJAX 只
是一種〝概念〞，意思是透過「Asynchronous JavaScript and XML」這三
類的技術實作出來的東西都可稱做 AJAX，而非指特定某個元件或產品，
就我目前所知要實作 AJAX 有幾種方式：
1. 完全手工自己打造 AJAX 缺點是對大多數人而言太困難也太耗時，同
時對 AJAX 知識也非常欠缺。
2. 使用 Callback 方式 缺點是只支援 ASP.NET 2.0，且功能仍不夠完整。
3. 使用現成的 AJAX Library 但 Library 畢竟只是 Library，和 Framework
比起來稍微遜色了點，但優點是可免費取得，同時適用 ASP.NET 1.0
與 2.0，不失為一個好途徑。
4. 微軟 ASP.NET AJAX 優點是定位在 Framework 層級，初步的規劃與
設計 Scope 較為完整，同時兼顧與考量 Client 端與 Server 端，可惜的
是只支援 ASP.NET 2.0。
5-4
5-2 AJAX 簡單範例 為了讓各為能夠瞭解什麼是 AJAX，以下是一個 AJAX 的手工範例（意
即不引用任何的 Library 或 AJAX framework），此範例頗為精要易懂，其
作用主要是透過 Client 端的 Browser 來即時監控 Web 伺服器資源或效能變
化，各位只要做過一遍範例就能夠瞭解 AJAX 在網頁開發上是多麼具有威
力了。
範例 5-1 AJAX 簡單範例
本範例是一個簡單的 AJAX 例子，但麻雀雖小五臟俱全，可由此窺見
原始AJAX非同技術是如何運作，而本範例無論是VS.NET 2003與VS 2005開發工具皆適用，且不需要安裝任何特殊的 AJAX 套件，步驟說明如下：
建立 Web 專案
首先在 VS 2005（或 VS.NET 2003）建立一個普通的 WEB 專案，專案名
稱為「05AJAX」，或者您沒有 VS 開發工具，直接用筆記本建立也行。
建立 Client 端頁面
請在 Web 專案中加入一個 Client 端頁面「Client.htm」，並將此頁面設定
為起始頁，這個頁面會向 Web 伺服器網頁發出非同步呼叫請求，並且將伺
服器回傳資料更新到網頁元素中，程式碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html> <head> <script language="javascript"> var XmlHttp=new ActiveXObject("Microsoft.XMLhttp"); function sendAJAX() { XmlHttp.Open("POST","Server.aspx",true); XmlHttp.send(null); XmlHttp.onreadystatechange=ServerProcess; } function ServerProcess() {
5-5
if (XmlHttp.readystate==4 || XmlHttp.readystate=='complete')
{ document.getElementById('nameList').innerHTML =XmlHttp.responsetext; } } setInterval('sendAJAX()',1000); </script> </head> <body> <div id="nameList"></div> </body> </html>
圖 5-1 Client.htm 頁面
5-6
建立 Server 端處理程式
另外在專案中加入一個 Server.aspx 網頁（含 .cs），程式碼如下：
using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using System.Diagnostics; public partial class Server : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { PerformanceCounter myMemory = new PerformanceCounter(); myMemory.CategoryName = "Memory"; myMemory.CounterName = "Available KBytes"; string txtResult = "-->伺服器可用記憶體大小：" +
myMemory.NextValue().ToString() + "KB"; Response.Write(DateTime.Now.ToLongTimeString() + txtResult); } }
程式說明：
首先記得引用 System.Diagnostics 命名空間，因為 PerformanceCounter必須使用讓命名空間，而 PerformanceCounter 類別可讓您監控 Windows作業系統的各種效能計數器，在此透過它取得伺服器每秒可用記憶體大小
變化情形。
5-7
圖 5-2 Server.aspx 頁面
完成後請執行 Client.htm 程式，頁面載入時大約會花 5 秒啓始
Performance-Counter 物件，之後透過 AJAX 便可每秒獲得 Server 可用記憶
體變化情形，當然也許有的人會想到用 Server Side 的 Timer，但那種方式
會造成 Server 的 Loading 爆增，人多的話還可能搞垮你的 Server，但 AJAX就具有極佳的彈性與靈巧，透過 AJAX 您可以即時偵測到資料庫或事件的
變化，即時顯現在網頁上，比如說我有十台 WEB Server（只開 Port 80），
以 AJAX 這種方式即可以單一網頁上監控到十台 Server CPU 與記憶體或網
路流量等大小，是不是十分具吸引力呢。
圖 5-3 伺服器每秒記憶體變化情形
5-8
5-3 AJAX 範例程式特點說明 以上的 AJAX 範例應用程式有幾個特點：
1. JavaScript 要如何可以 Call 得到 .NET Server 上的方法或 Web
Service，若以傳統網頁程式觀念來看似乎是〝不可能〞，因為 Client
端的 JavaScript 沒法直接參照到 Server 端的 .NET CLR 的記憶體位址。
2. 在以往也許有的人想辦法實做 Server 的 Timer 來達成相同的效果，但
做過的人應感受到以 Server 端方式是多麼地笨重與耗費系統資源，若
提供多人同 時使用可能 Server 負擔會更加沉重。
3. AJAX 程式能夠不留痕跡地與呼叫 Server 應用程式或 Web Service，並
處理回傳資料迅速更新網頁資料，讓人幾乎忘了 Client 端與 Server 端
的分隔存在。
4. 後面對 XMLHTTP 的運作會有一個初步的解釋。
5-4 瞭解 AJAX 應用程式與 ASP.NET AJAX 本小節將敍述在開發 AJAX 時，程式開發人員所會面臨之議題，並針
對 AJAX 開發實際上會涉及哪些技術，最後針對這些議題與技術整合，說
明微軟提供的 ASP.NET AJAX 解決方案其架構組成，看看 ASP.NET AJAX能夠為開發人人員帶來何種助益與效益。
5-4-1 AJAX 所針對的開發議題 使用者與開發者皆能體驗到傳統網頁應用程式 Request-Response 模式
所造成的侷限性，因為網頁是無狀態的，故每當網頁資料或使用者介面需
要變更時，必須將整個網頁 post back 到伺服器更新，意即頁面必須進行
Client 端與 Server 端之間的往返，尤其是當 Client 與 Server 之間若有極大
量的資料過度頻繁的往返，將會造成者用者感受到非常漫長的等待。
另一個議題是網頁瀏覽器之中的 HTML 控制項與桌面應用程式的
Rich UI 相較之下顯得能力有限，很多瀏覽器都包含增強的 HTML 控制項，
但是這些增強的 HTML 控制項都是針對特定瀏覽器而實作，因此想要獲得
這些增強 HTML 控制項的 Rich UI，網頁應用程式開發者必須針對特定瀏
5-9
覽器建立應用程式，這將會非常複雜，故很多開發人員避免在他們網頁之
中建立以特定 Client 端特徵的功能，因此使用者發現網頁應用程式的吸引
力相較於其他類型的應用程式要小得多。AJAX 開發方法是針對以上兩個
開發議題提供解決方案。
5-4-2 AJAX 技術概念
AJAX 是建立在一個核心概念：「使用非同步呼叫，並結合 XML 方式
傳輸資料與大量使用 Client Script。」
在 AJAX 技術中，程式開發人員能夠以 Client 端 Scripts 方式透過
XMLHTTP 來進行非同步的 Web 服務呼叫，而 XMLHTTP 通訊協定常用於
將資訊封裝成 XML 資料型式在網路間傳送，大多數的瀏覽都有實作
XMLHTTP 類別，而此類別用於建立一個進行遠端呼叫與資料收發的 proxy物件，透過非同步方式進行呼叫，網頁中的資料與使用者介面不需要進行
Client 端與 Server 端之間的往返，結果是具有較少的資料傳送與較佳的應
用程式效能，非同步呼叫能夠使得網頁應用程式能夠有更佳良好的反應
性，因為使用者能夠在呼叫工作仍在 Server 端執行的同時，而在 Client 端瀏覽器繼續進行工作。
另一方面 AJAX 大量使用 Client 端 Script，特別是 JavaScript，JavaScript 是用於進行遠端呼叫、執行 Client 端應用程式的處理與建立增強
的使用者介面功能。
AJAX 的解決方案使用 JavaScript 並搭配其他數種 Client 端類型技
術，包括了：
瀏覽器的 Document Object Model（DOM）：DOM 將這些元素呈現在
HTML 網頁中成為標準的物件組（如 document、windows 等等），並
且能夠透過程式化方式來操作它們。
動態 HTML（DHTML）：當使用者在頁面中輸入時，DHTML 透過 Client
端的 Script 方式延伸了 HTML 互動的反應能力，並且使其變得更容易，
並且不需要往返的行為。
行為（Behaviors）：這是一種程式化包裝在使用者介面中的動作（如
拖曳 drag and drop 行為），並且能夠與網頁元素產生連結。
5-10
元件（Component）：是一種能夠提供擴充 Client 端使用者介面功能
特點的客製化 JavaScript 物件。
JavaScript 結合這些 Client 端技術後，使得程式開發人員足以建立能夠
媲美桌上型應用程式的使用者介面功能特點，在這有兩個例子可提供給大
家參考：
1. 微軟 Virtual Earth 網站：一個提供電子地圖的網站。
2. 微軟 Outlook Web Access：一種透過 WEB 瀏覽器收發 e-mail 的 Client
端使介面。
以上兩個例子皆展示出以 AJAX 技術所建立豐富的使用者介面與高效
能之應用程式典範。
然而使用這些技術來建構 AJAX 應用程式是複雜的，直到現在程式開
發人員仍必須手動建立事件處理、訊息傳遞、和建立豐富性使用者介面所
需要的細節。而且再者因為 JavaScript 不是物件導向語言（OOP），故它
沒有強型別、命名空間、例外事件處理與其 OOP 之特點，為這些功能特點，
程式開發人員還經常必須以其他的語言來撰寫內建於其中的專屬基礎架構
程式碼。
5-4-3 ASP.NET AJAX 架構提供一個 AJAX 新途徑
ASP.NET 如何能夠利用 AJAX 應用程式的威力？微軟的答案是：
「ASP.NET AJAX」，ASP.NET AJAX 提供所有 AJAX 的能力，但是卻進
一步擴充其概念，並且大幅降低 AJAX應用程式開發的複雜性，而 ASP.NET AJAX 同時提供了 Client 端與 Server 端兩方面的能力，以下為架構圖。
5-11
圖 5-4 ASP.NET AJAX 架構圖
ASP.NET AJAX 架構說明如下：
Client 端方面
ASP.NET AJAX 在 Client 端的 AJAX 解決方案正式名稱為「Microsoft AJAX Library」，Microsoft AJAX Library 實際上是由一堆 JavaScript（.js）所組成的 Script Library 函式庫，詳細的 JavaScript 檔案名稱如下：
MicrosoftAjax.debug.js
MicrosoftAjax.js
MicrosoftAjaxTimer.debug.js
MicrosoftAjaxTimer.js
MicrosoftAjaxWebForms.debug.js
MicrosoftAjaxWebForms.js
5-12
然而上面六支程式骨子裡只能算是三支而已，因為以.debug.js 結尾的
程 式 名 稱 是 為 了 除 錯 方 便 用 的 ， 例 如 MicrosoftAjax.debug.js 與
MicrosoftAjax.js二者程式功用是相同的，前者為 debug版本，後者為 release版本。
Microsoft AJAX Library 本身並非是單純的 JavaScript，是在 JavaScript中加入了物件導向特性，如型別系統、資料型別、命名空間、事件等等，
這些特性給予程式開發人員一個熟悉的程式撰寫模式，使得您能夠開發出
更高品質、具有維護性與可重複使用性的程式碼，實際功能特徵說明如下：
瀏覽器相容層（Browser compatibility layer）
瀏覽器相容層是負責處理 ASP.NET AJAX 的 JavaScript 在各種瀏覽器
上執行的相容性，以確保 JavaScript 在常見的瀏覽器（如 IE、Firefox、
Safari）上能夠執行正常。
ASP.NET AJAX 核心服務（Core Serivces）
ASP.NET AJAX 核心服務是指針對 JavaScript 所做的擴充，例如類別、
命名空間、事件處理、繼承、資料型別與物件序列化。
ASP.NET AJAX 基底類別庫
基底類別庫包括了 Component Class、StringBuilder Class 及擴充的
事件處理。
網路層（Networking layer）
網路層負責處理 Web 為基礎的服務與應用程式之間的溝通，以及管理
非同步遠端呼叫方法。
JavaScript Library 對 Release 與 Debug 模式的支援
對於 JavaScript Library 的支援包括兩種型式：一是嵌入在 assembly
組件之中，另一種是獨立的 JavaScript 檔（.js）；但 JavaScript Library
嵌入在 assembly 組件之中優點是部署容易，並且可以避免版本問題。
Client 端對驗證及使用者設定檔的存取
支援 Client Script 對伺服端的驗證（Authentication）及使用者設定檔
（Profile）的存取，甚至對於不是用 ASP.NET 建置的 Web 應用程式一
5-13
樣支援，只要它們是透過 Microsoft AJAX Library 來存取伺服端的驗證
及使用者設定。
Server 端方面
ASP.NET AJAX 在 Server 端方面亦包括了豐富的伺服元件功能特點，
以補充 ASP.NET AJAX 在 Client Script Libraries 函式庫之不足，包括了：
ASP.NET AJAX 伺服器控制項
這些 ASP.NET AJAX 伺服器控制項能夠發出 Client 端的 Script，以便您
使用 ASP.NET AJAX 功能特點，如果您已經非常熟悉伺服端程式開發，
這些伺服器控制項對您將會非常有用，或者您不必手動建立 ASP.NET
AJAX 的 Client 端 Scripts。
Web 服務
有一些 Web 服務能夠為 ASP.NET AJAX 應用程式加入非常有用的伺服
端功能特點，如 ASP.NET 2.0 的 profiles。
ASP.NET AJAX Control Toolkit
然而在 Client 端的 Microsoft AJAX Library 與 Server 端的 ASP.NET AJAX Extensions 之外，事實上還有另外一個套件叫「ASP.NET AJAX Control Toolkit」，它是由一堆針對各種不同用途事先建立好的 AJAX 控
制項， 並且可免費使用，目的是要讓程式設計師簡化 AJAX 程式開發，直
接使用這些預先建立好的 AJAX 控制項，省却了從零開始手工打造 AJAX相關功能，算是一些貼心的 AJAX 控制項小工具的集合。
ASP.NET AJAX Control Toolkit 目前提供了 34 個相關的控制項，並且
Control Toolkit 仍在持續擴充中，預計未來希望擴充到 50～100 個控制項，
以下舉幾個控制項來做功能說明。
5-14
表 5-1 ASP.NET AJAX Control Toolkit 功能說明
控制項 說明
Accordion 可展開與收合折疊的數個長方形區塊，裡面可以放不同的
Item 項目，類似 Outlook 天能窗格介面的功能。
AlwaysVisibleControl可將控制項釘在 Page 頁面中，不會被任何的 HTML 背景
或內容所覆蓋，永遠保持在最上層。
Animation 可以針對特定控制項製造出動畫效果，例如：Move、
Resize、Fade 與 Color 等變化效果。
AutoComplete: TextBox 自動完成功能（需搭配 Web Services）。
Calendar 附加一個突顯示的 Client 端日曆控制項功能到 TextBox之上，點選 TextBox 就會出現日曆控制項，供日期的選擇。
CascadingDropDown 連動式的 AJAX DropDownList。
CollapsiblePanel 可將 Panel 擴展成示具備收合與摺疊顯示功能。
還有其他未在上表列出的的控制項如：
ConfirmButton
DragPanel
DropDown
DropShadow
DynamicPopulate
FilteredTextBox
HoverMenu
MaskedEdit
ModalPopup
MutuallyExlcusive
CheckBox
NoBot
NumericUpDown
PagingBulletedList
PasswordStrength
PopupControl
Rating
ReorderList
ResizableControl
RoundedCorners
Slider
Tabs
TextBoxWatermark
ToggleButton
UpdatePanelAnim
ation
ValidatorCallout
ListSearch
SlideShow
若您對這些 ASP.NET AJAX Control Toolkit 有興趣的話，可以參考微
軟 http://ajax.asp.net 官方網站說明。
5-15
結論 經由本章的介紹，您應能瞭解 AJAX 為傳統 Web 應用程式所帶來的創
新，以及微軟 ASP.NET AJAX 的功能架構，下一章將為您介紹該如何運用
ASP.NET AJAX 伺服端技術。
相關參考網址
1. 微軟 ASP.NET AJAX 入口網站
http://ajax.asp.net
2. DotNet 開發聖殿
http://blog.sina.com.tw/dotnet/
3. AJAX 魔法工廠
http://blog.sina.com.tw/ajax/
5-16
ASP.NET AJAX 伺服器控制項
6-1 以 Server 端與 Client 端為中心的兩種開發模式
6-2 ASP.NET AJAX 系統環境安裝設定
6-3 伺服端的 ASP.NET AJAX 非同步計時器應用
6-3-1 建立 ASP.NET AJAX 專案
6-3-2 ASP.NET AJAX 伺服端技術名詞解說
6-4 再論 ASP.NET AJAX 非同步更新與傳統的頁面更新
6-5 ASP.NET AJAX 伺服器控制項屬性與事件功能解說
6-6 ASP.NET AJAX 大未來
6
6-2
前言 ASP.NET AJAX 是微軟於 2006 年所推出 AJAX Framework，AJAX 也
是目前 Web 網頁設計最熱門的技術話題之一，因為 AJAX 非同步技術的力
量能夠〝打破〞Client 端 JavaScript 與 Server 端 ASP.NET 兩者藩籬，讓
Client 端能夠與 Server 端能彼此交互融合相互作用，進而製造出許多不可
能的神奇效果，相信各位應能夠深刻體會那種奇妙的效果，本章將教您如
何安裝建立 ASP.NET AJAX 開發環境，並介紹如何進行 ASP.NET AJAX以伺服端為中心的技術開發模式。
6-1 以Server端與Client端為中心的兩種開發模式 在第五章的 ASP.NET AJAX 架構圖中（圖 5-4），明白指出了 ASP.NET
AJAX 主要分為 Server 端與 Client 端兩種開發模式：
1. 以 Server 端為中心的開發模式（Server-Centric，圖 6-1）。
2. 以 Client 端為中心的開發模式（Client-Centric，圖 6-2）。
以上兩種開發模式的訴求及定位不同，說明如下：
以 Server 端為中心的開發模式主要訴求與定位
圖 6-1 以 Server 端為中心的開發模式
6-3
在主要關鍵 Web 場景以 AJAX 來豐富並提升其附加價值。
能夠使得應用程式更為豐富卻不需要大量 JavaScript 程式碼。
能夠保留核心使用者介面與應用程式邏輯在伺服端（C#及 VB）。
以 Client 端為中心的開發模式主要訴求與定位
圖 6-2 以 Client 端為中心的開發模式
運用 Script 及 DHTML 全部的力量。
提供更豐富、更具互動性的使用者經驗。
建立 Mash-up、Gadget 及其他新的 immersive 經驗。
從上面的文字及技術藍圖可以清楚明瞭兩者的優點所在，但請別落入
二分法的思維，誤以為只能在伺服端及客戶端之間二選一，選了其中一個
就要放棄另一個，事實上並非如此，微軟 ASP.NET AJAX 可以讓您在一個
專案中任意混合搭配使用，也就是有三種選擇 (1) 純客戶端 (2) 純伺服端 (3) Client 端 + Server 端混合。
本章要介紹的重點在於“純伺服端”，因為祭司發現只有純伺服端開
發的模式才能最快達到少少修練、速速上手之目的，只需熟悉幾個
6-4
ASP.NET AJAX 伺服器控制項，剩下的就是用 C# 或 VB 程式碼的問題，
甚至根本不需要懂 JavaScript 照樣能夠做出許多互動性極佳的 AJAX 應用
程式，而 C# 或 VB 是對於.NET 程式設計師只是基本功，用基本功就能做
出 AJAX 特效，同時免除了為 AJAX 再多學其他語言的必要性，如果您屬
於冀望速成者，本期所介紹的 ASP.NET AJAX 伺服端技術非常適合你。
6-2 ASP.NET AJAX 系統環境安裝設定 請依照下面三個步驟安裝設定 ASP.NET AJAX 系統環境：
連線到微軟 ASP.NET AJAX 官方網站
請連線到微軟微軟 ASP.NET AJAX 官方網站http://ajax.asp.net，點選
「Download ASP.NET AJAX 1.0」超連結進行 ASP.NET AJAX 安裝套件
下載。
圖 6-3 微軟 ASP.NET AJAX 官方網站
點選
6-5
下載 ASP.NET 2.0 AJAX Extensions 1.0
接著請點選「Download ASP.NET 2.0 AJAX Extensions 1.0」，之後會被
引導到實際下載程式之畫面。
圖 6-4 ASP.NET 2.0 AJAX Extensions 1.0
請下載「ASPAJAXExtSetup.msi」程式，它就是實際 ASP.NET AJAX 安裝
檔，而之所以不直接給各位最終下載的網址，是因為微軟時常會推出不同
的新版本，同時軟體政策也時常會修改，故透過一步步引導各位如何取得
正確的程式，日後即使有變動，各位也知該如何進行下載。
點選
6-6
圖 6-5 ASPAJAXExtSetup.msi 安裝程式
執行 ASPAJAXExtSetup.msi 程式安裝
請執行 ASPAJAXExtSetup.msi 程式安裝，而執行 ASPAJAXExtSetup.msi安裝檔本身就同時包含 Server 與 Client 端所需的程式，故 Server 與 Client端不必分兩次裝，或者需要個別引用。
當安裝完成後，各位可以到電腦路徑「 C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025」下，就可以看到
ASP.NET AJAX 安裝的一堆.dll 及 JavaScript（.js）相關程式，表示您確實
安裝成功了。
下載
6-7
圖 6-6 ASP.NET AJAX 實際程式
6-3 伺服端的 ASP.NET AJAX 非同步計時器應用 在此將教您如何建立一個新的 ASP.NET AJAX 專案，並藉由 ASP.NET
AJAX 伺服端技術結合伺服器時間的應用，讓您體驗 ASP.NET AJAX 以伺
服端為中心的開發模式，以及解說伺服端相關 ASP.NET AJAX 控制項功能
及意義。
6-3-1 建立 ASP.NET AJAX 專案 在安裝完 ASP.NET AJAX 軟體之後，若要建立一個新的 ASP.NET
AJAX 專案，請依下列兩個步驟進行：
建立 ASP.NET AJAX 專案範本
請在 VS 2005 開發工具中建立【新網站】 點選【ASP.NET AJAX-Enabled Web Site】，並將專案名稱命名為「06ASPAJAX」。
6-8
圖 6-7 建立建立 ASP.NET AJAX 專案
檢視 AJAX Extensions 控制項
請開啟 VS 2005 的工具箱，其中有一個新的索引標籤【AJAX Extensions】，裡面所包含的控制項就是 Server 端的 AJAX 伺服器控制項，控制項包括了：
ScriptManager 控制項。
ScriptManagerProxy 控制項。
UpdatePanel 控制項。
Timer 控制項。
UpdateProgress 控制項。
選擇 ASP.NET AJAX-Enabled Web Site 範本
6-9
圖 6-8 ASP.NET AJAX 伺服器控制項
6-3-2 ASP.NET AJAX 伺服端技術名詞解說 本小節將示範常見的 AJAX 伺服端時間顯示，這是透過 ASP.NET
AJAX 技術來達成，表面上假借伺服端時間的顯示，實則是為了講解
ASP.NET AJAX 伺服器控制項及幾個重要屬性，包括了：
ScriptManager 控制項
UpdatePanel 控制項
Partial-Page Rendering 屬性
UpdatePanel 的 Trigger 事件
Timer 控制項
上面幾個 ASP.NET AJAX 伺服端元件是非常基本而重要的元素，其意
義說明如下：
1. ScriptManager 控制項
ScriptManager 控制項是負責管理 Page 頁面中的 ASP.NET AJAX 元
件、 Partial-Page Rendering 、客戶端的 Request 、及伺服端的
Response。由此可見 ScriptManager 是 ASP.NET AJAX 的心要，有了
ASP.NET AJAX 伺服器控制項
6-10
它才能夠使得 Partial-Page Rendering（Page 局部更新）作用，一切
運作所需的 JavaScript 也會自動管理，因此在開發純伺服端的
ASP.NET AJAX 應用程式，每個頁面必須加入 ScriptManager 以為管
理，感覺蠻像 WebPart 在每個頁面之中也要加入 WebPartManager 的
道理是一樣的。
2. UpdatePanel 控制項
什麼是 UpdatePanel？其實它就是一個 AJAX Panel，早期 ASP.NET
AJAX beta 版的思維是做出一大堆 AJAX 伺服端控制項，如 AJAX 版的
TextBox、Button 等等…，最後發現不但需要實作過多的 AJAX 版本控
制項，且隨著新世代 .NET 還會有更多新的控制項，那如果要一一實作
會非常耗費功夫，且不切實際，可謂典型的事倍功半，微軟及程式設計
師兩邊都吃力不討好，最後微軟選擇了一個聰明的方式，製造出一個像
魔鏡般的 AJAX Panel，只要對著它喊：「Panel 呀 Panel，請給我 AJAX！」
即刻之間所有控制項皆是 AJAX 控制項，怎麼說呢？只要在 WebForm
放入一個 UpdatePanel 控制項，隨後任憑拖曳傳統的 ASP.NET 伺服器
控制項到此 UpdatePanel 中，原本不具備 AJAX 能力的 TextBox、Button
等等控制項，彷彿皆具有 AJAX 非同步的魔力，又可用傳統 .NET
CodeBehind 方式撰寫程式，可謂以簡御繁、萬法歸一，同時整合了
AJAX 與 ASP.NET 兩種能力，有了 UpdatePanel 一切就搞定了。
3. Partial-Page Rendering 屬性
傳統的 Postback 是整個頁面更新，缺點是伴隨著大量資料與慢速的回
應，而 AJAX 目的除了非同步的能力外，有個很重要的訴求是〝快〞，
要達成快的要訣別無他法，只有客戶端傳送的資料要少，客戶端接收伺
服端回傳資料也要少，如此便能達到快的目的，而 Partial-Page
Rendering（局部更新）正是如此運作，回應時它只針對 UpdatePanel
區域來做更新而非整個 Page 頁面，因此只要做少量 UpdatePanel 區
域做更新及行為的調整，所以在速度上便加快許多，行事簡潔毫不拖泥
帶水。
而前面說過 Partial-Page Rendering 是受 ScriptManager 控制項來管
理，且只有 UpdatePanel 及其中包含的子控制項才能享有 Partial-Page
Rendering 的好處，而 Partial-Page Rendering 的啟用與關閉是透過
6-11
ScriptManager 控制項的 EnablePartialRendering 屬性來設定，預設值
為 True。
4. UpdatePanel 的 Trigger 事件
雖說 UpdatePanel 是一個 AJAX Panel 魔鏡，感覺上十分神奇，但千里
馬也須有人駕馭才能行動，而 Trigger 正是觸發 UpdatePanel 動作的機
制，如 Trigger 會監控 Timer 計時器時間變化、使用者按下特定按鈕或
某個控制項的值被改變了，進而通知 UpdatePanel 進行頁面的
Postback 動作，所以 Trigger 所扮演的角色是 UpdatePanel 專屬探子，
負責偵察 UpdatePanel 所指派的任務，一旦有符合條件的任何風吹草
動，UpdatePanel 便執行 PostBack 動作，並以 Partial-Page Rendering
處理更新。
5. Timer 控制項
Timer 計時器用 JavaScript 建構是很容易，但用 ASP.NET 來客製化
Timer 控制項不但困難，且運作起來十分笨重而費力，實用價值略低，
但 ASP.NET AJAX 滿足了眾多程式設計師的心願，直接內建一個 AJAX
Timer 計時器控制項，讓各位可以設定時間間隔而觸發特定事件動作，
而這正是重複使用（reuse）的最佳體現，免除了程式設計師老在重複
寫一堆 Timer 的程式。
範例 6-1 ASP.NET AJAX 伺服端時鐘範例
OK 瞭解以上基礎而重要的概念後，接下來將解說如何建構 ASP.NET AJAX 純伺服端的應用程式，您會發現真是異常簡單，步驟說明如下：
加入 Timer.aspx 頁面
請在「06ASPAJAX」專案中加入一個 Timer.aspx 頁面。
加入 ScriptManager 控制項
在純 ASP.NET AJAX 伺服端程式開發中，第一個步驟是加入一個
ScriptManager 控制項，它是自動管理非同步所需相關 JavaScript 必要項
目，更是 Partial-Page Rendering 及 UpdatePanel 正常運作所不可或缺的要
6-12
素。此外務必將 ScriptManager 的 EnablePartialRendering 屬性設定保持為
True，這樣 UpdatePanel 才會以局部更新（Partial-Page Rendering）來運作，
求得最佳效能。
加入 UpdatePanel 控制項
而 UpdatePanel 控制項正是 ASP.NET AJAX 伺服端程式開發的主角，前 面說過它是一個 AJAX Panel 魔鏡，只要將一般 ASP.NET 控制項加入這面
Panel 魔鏡中，控制項剎那間彷彿具有 AJAX 非同步的力量，甚至您腦袋中
根不需要知道 AJAX 非同步運作的流程，因為 UpdatePanel 這面魔鏡就代
表一切，它會自動替您打理好 AJAX 運作事宜，如此簡單俐落正是工作繁
重程式設計師的一帖最佳良方，可以省掉不少 AJAX 應用程式設計的麻 煩事。
加入時間顯示 Label 控制項
接著請拖曳一個 Label 控制項到 UpdatePanel 之中，並將其 ID 命名為
「txtTime」，伺服器的時間將透過 Label 控制項來顯示。
加入 Timer 計時器
在此打算以每秒方式更新顯示 UpdatePanel 中伺服器時間，故請加入一個
Timer 計時器控制項，並設定其 Interval 時間間隔屬性為 1000（毫秒），
但必須搭配 Trigger 才能起作用。
設定 UpdatePanel 的 Triggers 集合
Triggers 是 UpdatePanel 本身專屬的探子，負責偵查 Timer 或控制項的動
作，一有符合預先設定條件的異動，UpdatePanel 便會進行非同步 Postback動作，最後以 Partial -Page Rendering 方式回傳局部更新的資料。請點選
UpdatePanel 的 Triggers 集 合 點選【加入】 此時會產生一個
AsyncPostback 成員 接著將其 ControlID 指定為「 Timer1 」 將
EventName 指定為「Tick」事件，如此便完成 Triggers 的設定。
6-13
圖 6-9 設定 UpdatePanel 控制項之 Triggers 集合
截至目前為止 HTML 程式如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Timer.aspx.cs" Inherits="Timer" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>未命名頁面</title>
</head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="txtTime" runat="server"></asp:Label> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
2
13
6-14
</Triggers>
</asp:UpdatePanel> <asp:Timer ID="Timer1" runat="server" Interval="1000"> </asp:Timer> </form> </body> </html>
加入 Timer 的 CodeBehind 程式
請在 Timer 控制項連續點兩下，加入下面伺服器時間顯示的程式碼：
using System;
using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using System.Drawing; public partial class Timer : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } //Timer 計時器每秒 Tick 事件程式
protected void Timer1_Tick(object sender, EventArgs e) { Label txtTime = (Label)UpdatePanel1.FindControl("txtTime"); txtTime.Text = "伺服器現在時間是：" + DateTime.Now.ToLongTimeString();
int red = new Random().Next(255); System.Threading.Thread.Sleep(100); //暫停 100 毫秒
int green = new Random().Next(255); System.Threading.Thread.Sleep(100); int blue = new Random().Next(255); txtTime.BackColor = Color.FromArgb(red, green, blue); txtTime.ForeColor = Color.FromArgb(green, blue, red); } }
6-15
程式說明：
上面程式除了時間顯示，並利用亂數技巧來製造前景與背景顏色隨機
改變的效果，如此比較能和用 JavaScript 方式顯示時間有個小小區別。
圖 6-10 ASP.NET AJAX 伺服器時鐘
範例 6-2 ASP.NET AJAX 伺服端時鐘範例 GDI+ 加強版
上一個範例雖然簡單，但有功力的程式設計師一眼便能望出簡單背後
其精髓所在，透過簡潔的技巧便能夠將客戶端與伺服端兩個融合在一起，
足以顯見其威力強大；然而相信有許多未曾接觸 AJAX 非同步技術的朋
友，可能一時間摸不著頭緒，心裡可能會認為不過就是時間顯示嘛，我用
JavaScript 還不一樣能做出同樣的效果，故因此祭司再將這一個範例再強
化，各位大概就能完全明瞭 ASP.NET AJAX 所帶來非同步的威力，請參考
Timer_GdiPlus.aspx，步驟說明如下：
設定控制項 Layout
本範例的控制項及 Layout 與上一個範例差不多，只不過是要用 <IMG> 標籤來顯示伺服器時間的 GDI+ 圖片，請加入下列控制項及設定屬性：
1. 加入 ScriptManager 控制項。
2. 加入 UpdatePanel 控制項，並於其中加入一個 HTML 的 <IMG> 標籤。
3. 加入 Timer 控制項，並將其 Interval 屬性設定為 1000（毫秒）。
4. 將 UpdatePanel 控制項的 Triggers，加入一個 AsyncPostBack 成員，
並指定其 ControlID 為「Timer1」，EventName 為「Tick」。
6-16
圖 6-11 控制項配置畫面
完成後的 HTML 程式如下：
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Timer_GdiPlus.aspx.cs" Inherits="Timer_GdiPlus" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>未命名頁面</title>
</head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate>
<img src="" id="imgTime" visible="false" runat="server" /> </ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName= "Tick" /> </Triggers>
</asp:UpdatePanel> <asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick"> </asp:Timer> </form> </body> </html>
<Img />
設定<Img />圖片
設定 Trigger 事件
6-17
使用 GDI+ 繪製伺服器時間圖形
在此步驟將加入一個產生 GDI+ 繪圖的泛型處理常式，請在網站中加入一
個 ImageHandler.ashx 的泛型處理常式，透過泛型處理常式將 GDI+ 繪製的
圖片影像以二進位的資料流輸出，供 <IMG> 來顯示圖片，這個作法的好
處是省略了產生中介實體圖片檔的好處，不但可以省掉存檔與刪圖的麻
煩，還可以有更高的影像顯示效能，ImageHandler.ashx 程式碼如下：
01 <%@ WebHandler Language="C#" Class="ImageHandler" %>
02 03 using System; 04 using System.Web; 05 using System.IO; 06 using System.Drawing; 07 using System.Drawing.Imaging; 08 using System.Drawing.Drawing2D; 09 10 public class ImageHandler : IHttpHandler { 11 12 public void ProcessRequest (HttpContext context) 13 { 14 //建立 Bitmap
15 Bitmap imageTime = new Bitmap(500, 100); 16 17 //從 Bitmap 取得 Image
18 Graphics g = Graphics.FromImage(imageTime); 19 20 //將 Bitmap 背景色填滿 LightPink 顏色
21 SolidBrush colorPen = new SolidBrush(Color.White); 22 g.FillRectangle(colorPen, 0, 0, 500, 800); 23 24 //定義筆刷及樣式 25 //取得 HatchStyle 列舉型別的所有成員
26 Array obj = Enum.GetValues(typeof(HatchStyle)); 27 int valueStyle = new Random().Next(obj.Length); 28 HatchStyle brushStyle = (HatchStyle)obj.GetValue(valueStyle); 29 HatchBrush theBrush = new HatchBrush(brushStyle, Color.White, 30 Color.Black); 31 32 //在 Bitmap 上繪製 GDI+時間字形
33 g.DrawString(DateTime.Now.ToLongTimeString(), new Font("Arial 34 Black", 48), theBrush, 0, 0); 35 36 //建立 MemoryStream
37 MemoryStream ms = new MemoryStream(); 38 //將 BitMap 存入 MemoryStream
39 imageTime.Save(ms, System.Drawing.Imaging.ImageFormat.Bmp); 40 //建立二進位的 Byte 陣列
6-18
41 byte[] buffer = new byte[ms.Length];
42 ms.Seek(0, SeekOrigin.Begin); 43 //將資料寫入到 buffer 之中
44 ms.Read(buffer, 0, (int)ms.Length); 45 ms.Close(); 46 //將 buffer 輸出成資料流
47 context.Response.OutputStream.Write(buffer, 0, buffer.Length); 48 //關閉資料流
49 context.Response.OutputStream.Close(); 50 51 buffer = null; 52 imageTime.Dispose(); 53 g.Dispose(); 54 } 55 56 public bool IsReusable 57 { 58 get 59 { 60 return false; 61 } 62 } 63 }
程式說明：
這個影像處理常式在本書許多章節皆會運用到，它是用來讀取資料庫
二進位格式的圖片資料以顯示在前端，程式碼雖略異，但原理是一模一樣
的。如果您一時看不懂這段 GDI+ 程式沒有關係，直接 Copy 引用就可以
了，因為 ASP.NET AJAX 目的在講解 AJAX 非同步的能力，而非 GDI+ 或泛型處理常式。
設定 Timer 控制項每秒 Tick 事件程式
請在 Timer 控制項上連續點兩下，加入下列程式碼：
01 protected void Timer1_Tick(object sender, EventArgs e)
02 { 03 imgTime.Visible = true; 04 imgTime.Src = "ImageHandler.ashx?" + DateTime.Now.Second; 05 }
以上除了 ImageHandler.ashx 的 .NET GDI+ 影像繪圖技術外，和上一
個範例幾乎完全相同，但效果卻大大不同，即使做複雜的網頁特效，也不
需動用一堆高深的 JavaScript 及 DHTML 技巧，讓您用開發 ASP.NET 程式
6-19
的方式來開發 ASP.NET AJAX 應用程式，真是輕而易舉地一瞬間就整合客
戶端與伺服端，不禁令人發出讚賞之聲。
圖 6-12 ASP.NET AJAX 伺服器時鐘（GDI+加強版）
使用同樣的原理技術，您可以繪製即時的伺服器效能圖、CPU 效能圖、
記憶體監控圖、生產機台連線狀況、即時品管系統、股價走勢圖等等應用，
只需專注在 .NET 端的程式邏輯，一切非同步的相關技術 ASP.NET AJAX已經替各位打理好了，完全不需要程式設計師擔心，如此便能夠有效提升
程式開發的生產力，而一個好的 Framework 的使命不就是功能強大又能提
高生產力嗎！呵～很高興 ASP.NET AJAX 做到了。
6-4 再論 ASP.NET AJAX 非同步更新與傳統的頁
面更新 即便已展示兩個精采範例，但相信仍有少數保守的程式設計師可能無
法完全信服，他們認為用 HTML 的 Refresh，或者是自訂的伺服器版 Timer一樣可以達到，因此就這點祭司將行討論一下，比較二者是否真的有差別。
HTML 的畫面 Refresh 標籤如下：
<meta http-equiv="refresh" content="1";url= "TimerGridView.aspx"/>
6-20
範例 6-3 Partial-Page Rendering 局部更新與傳統 Postback 更
新之對比
請 參 考 TimerGridView.aspx 範 例 程 式 ， 這 個 範 例 和
Timer_GDIPlus.aspx 幾乎一樣，只不過多加入了一個 GridView 顯示北風
資料庫中的員工資料，為什麼要多加入一個 GridView 顯示資料，如此各位
便能夠看到 Partial-Page Rendering 局部更新的威力，只有伺服器時間會變
換，而GridView控制項是不會有任何的Refresh閃動，足可以說明ASP.NET AJAX 的威力了，傳統的方式並無法做到局部更新，而 AJAX 技術最強的
地方也是在於速度快，少量資料的傳輸正是速度快的主因，這是傳統技術
所做不到的地方。
或者您也可以做個實驗，將 ScriptManager 的 EnablePartialRendering屬性設為 False，執行時就會整個頁面刷新閃動，感覺十分笨重，若電腦不
夠快的話還會掉格，每秒畫面會不連續，閃動的畫面也不美觀，因此各位
可以體認到當頁面中有一堆 ASP.NET 控制項，如果只有一個 TextBox 或
Label 控制項要更新，Partial –Page Rendering 局部更新的效能真是無可 比擬。
圖 6-13 Partial-Page Rendering 局部更新效果
6-21
請開啟 SQL Server 服務，並設定好資料庫連線，若您仍不清楚如何使
用 GridView 與 SqlDataSource 控制項，可以等學完第九章後再回頭
看此範例。
ASP.NET AJAX 生活化的應用
一個技術要得到使用者認同，除了本身要簡單好用外，最好還能貼近
生活化般平易近人，哦～什麼時候 ASP.NET AJAX 跟生活化又沾上邊？祭
司您倒是說說看，上面幾個範例一路介紹過來，大家雖然雖知道 ASP.NET AJAX 局部更新的好處與優點，但也許有的程式設計師只是在設計一般的
ASP.NET 網頁，心想：「好像一般專案根本不需要用到 AJAX 非同步技術
或 ASP.NET AJAX！？」這樣想法固然沒錯，但祭司要提的是即使您並沒
有 AJAX 非同步的需求，但是 ASP.NET AJAX 仍可以融入您日常 ASP.NET程式開發的生活化之中，怎麼說呢？祭司就舉最簡單又生活化的 ASP.NET日曆控制項及 GridView 資料表單兩個例子，說明如下。
範例 6-4 日曆控制項結合 ASP.NET AJAX 非同步
請參照 Calendar.aspx 與 AjaxCalendar.aspx 這兩支程式，前者是網頁
Page 中只有一個日曆控制項，而後者則是加入了一點小巧思，使用了
UpdatePanel 這個魔鏡，透過 ASP.NET AJAX 非同步的能力來改善日曆控
制項的變換，也改善使用者的美好經驗，以下是 AjaxCalendar.aspx 程式步
驟說明：
加入 ScriptManager 控制項
請加入一個 ScriptManager 控制項用來管理 ASP.NET AJAX 相關功能。
加入 UpdatePanel 控制項
接著加入一個 UpdatePanel 控制項到頁面中。
6-22
加入日曆控制項到 UpdatePanel 中
請從工具箱中拖曳一個 Calendar 控制項到 UpdatePanel 之中，另外再拖曳
一個 Calendar 控制項到網頁，但不要加入 UpdatePanel 中，來體驗感覺一
下兩者差異。
圖 6-14 AJAX 日曆控制項配置
最後請點選 AjaxCalendar.aspx中左邊的 AJAX日曆控制項做年或月份
切換，其過程是非常的平順，而 Calendar.aspx 切換時就很明顯地畫面會閃
動一下，速度也稍嫌笨重，那是因為 Calendar.aspx 是使用傳統 Postback，並且 Response 時會將整個網頁 Page 刷新過，AjaxCalendar.aspx 只有局部
更新當然效能會快上許多了。
範例 6-5 GridView 控制項結合 ASP.NET AJAX 非同步
本範例是以 ASP.NET 2.0 新一代的表格控制項 GridView 作為體驗的
對象，雖然 GridView 相較 DataGrid 有非常大的進步，功能又齊全，但由
於還是受限於 Postback 往返的緣故，在排序、選擇、編輯等等動作仍然較
慢，而且每次變動時畫面就會閃一下，同樣的使用者會察覺這種小缺陷，
但透過 ASP.NET AJAX 輔助後，使用者經驗會完全改觀，變得平順且自 然，讓我們看看有什麼不一樣，請參照 AjaxGridView.aspx 程式，步驟說
明如下：
在 UpdatePanel 之內 在 UpdatePanel 之外
6-23
加入 ScriptManager 控制項
請加入一個 ScriptManager 控制項用來管理 ASP.NET AJAX 相關功能。
加入 UpdatePanel 控制項
接著加入一個 UpdatePanel 控制項到頁面中。
加入 GridView 控制項到 UpdatePanel 中
請從工具箱中拖曳一個 GridView 控制項到 UpdatePanel 之中，另外再拖曳
一個 GridView 控制項到網頁，但不要加入 UpdatePanel 中，來體驗感覺一
下兩者差異。
設定 GridView 資料來源為 SqlDataSource 控制項
GridView 會使用 SqlDataSource 控制項當作資料來源，透過它顯示北風資
料庫中的 Employees 資料表，但因為 GridView 及 SqlDataSource 控制項要
在第九章及第十章才會談到，故在此祭司不列出設定步驟，待各位學完第
九章後再回來看看 AjaxGridView.aspx 程式自然就會明瞭了。
若 GridView 控制項是放在 UpdatePanel 控制項之中，則其資料
來源控制項（如 SqlDataSource）也必須一併放在 UpdatePanel 控制項
之中，否則 GridView 是無法參照到 SqlDataSource 資料來源控制項。
請各位直接執行 AjaxGridView.aspx 程式體驗看看，上面的 GridView控制項是具有 AJAX 非同步能力，因為它是在 UpdatePanel 之中，而下面
的 GridView 控制項則只是一般同步的控制項，請大家任意執行編輯、排序
與選取等功能（為保護資料，刪除功能被祭司取消了），上面具有 AJAX非同步能力的 GridView 控制項使用感覺明顯要好過下面一般的 GridView控制項。
6-24
圖 6-15 GridView 控制項執行畫面
祭司所舉日曆控制項與 GridView 控制項的生活化例子，原本用它們不
需要 AJAX 就能運作的，但稍微添加了 UpdatePanel 控制項的魔法，就能
將平凡無奇的東西轉變成美好的使用者經驗，故祭司建議您可以將
ASP.NET AJAX 小小的巧思融入您目前的專案，相信使用者對於網頁的評
價又能夠提升幾個百分點，這就是祭司所謂的〝生活化〞，你體會了嗎。
6-5 ASP.NET AJAX 伺服器控制項屬性與事件功
能解說 經由上面幾個範例可以體驗到 ASP.NET AJAX 初步的威力展現，然而
又不必辛苦修練 AJAX 種種絕技，以幾個伺服器控制項的搭配就能夠套用
到現有的 ASP.NET 2.0 專案之中，對於程式設計師而言不啻是一大福音，
AJAX 非同步
一般同步
6-25
而有了前面詳細解說與示範，再來講解下面幾個 ASP.NET AJAX 伺服器控
制項的重要屬性與事件功能，相信大家更能夠輕易吸收瞭解。
ScriptManager 控制項
下表為 ScriptManager 控制項屬性說明。
表 6-1 ScriptManager 控制項屬性
屬性 說明
AllowCustomErrorsRedirect 在非同步 Postback 情況下，若有錯誤發生時，
指示系統是否引發自訂錯誤的網頁導向。
AsyncPostBackErrorMessage當伺服器有例外錯誤發生，此錯誤訊息會被傳送
到 Client 端。
AsyncPostBackTimeout
非同步 Postback 的 Timeout 逾時的時間長度
（秒），預設是 90 秒，若設定值為 0，則表示沒
有 Timeout 的限制。
AuthenticationService 取得目前 ScriptManager instance 的
AuthenticationServiceManager 物件。
EnablePageMethods 設定 ASP.NET 的靜態方法是否能夠被 Client 端
Script 呼叫。
EnablePartialRendering 是否啟用局部更新。
EnableScriptGlobalization 是否啟用全球化 Script 設定。
EnableScriptLocalization 是否啟用區域化 Script 設定。
LoadScriptsBeforeUI 設定 Script 參照是否在 UI 控制項之前載入到
Browser 瀏覽器之中。
ProfileService 取得目前 ScriptManager instance 的
ProfileServiceManager 物件。
ScriptMode 決定在生成 client script 時，要產生 debug 或
release 版本的 client script libraries。
ScriptPath 指定客製化 Script 的所在路徑。
Scripts 指定 ScriptManager 要註冊的 Script 參照集合。
Services 指定 ScriptManager 要註冊的 Service參照集合。
6-26
UpdatePanel 控制項
下表為 UpdatePanel 控制項屬性說明。
表 6-2 UpdatePanel 控制項屬性
屬性 說明
ChildrenAsTriggers 若 Postbacks 來 自 UpdatePanel 的 子 控 制 項 時 ，
UpdatePanel 本身是否要進行 refresh 更新。
RenderMode 若 RenderMode 為 Block 則是 <DIV> 標籤來 Render 區
段，若以 Inline 則以 <Span> 標籤來 Render。
Triggers Triggers 是設定 UpdatePanel 的觸發事件。
UpdateMode
UpdateMode 共有兩種模式：Always 與 Conditional，
Always 是每次 Postback 後，UpdatePanel 會連帶被更
新，相反的 Conditional 只針對特定情況才會被更新。
屬性說明
而 UpdateMode 模式通常是一個 Page 頁面同時包含多個
UpdatePanel，這時若大家都設定為 Always 模式，則即便只有其中
一個 UpdatePanel 做非同步更新，但其他 UpdatePanel 也會連帶
受 到 更 新 影 響 ， 故 這 時 就 有 必 要 將 UpdateMode 設 定 為
Conditional，以避免連帶受到其他 UpdatePanel 影響。
一個 UpdatePanel 可以同時設定許多 Triggers，來進行多個情況
觸發。
Timer 控制項
下表為 Timer 控制項屬性及事件說明。
表 6-3 Timer 屬性與事件
屬性/事件 說明
Interval 屬性 設定 Timer 時間控制項的 Tick 間隔時間，單位為毫秒（1000毫秒＝1 秒）。
Tick 事件 直接在 Timer 控制項上連續點兩下，可加入 Tick 事件程式。
6-27
有個比較弔詭的地方是 Timer 控制項究竟是屬於伺服端還是客戶端？
嗯～祭司用一段話表示：「它生於伺服端，而活在客戶端。」也就是 Timer控制項是伺服端的控制項沒錯，但是在伺服端 Render 時 Timer 會被轉換成
Client 端型態，因此它的 Tick 是在 Client 端發生，並且由 Client 端引發
Postback 事件。
6-6 ASP.NET AJAX 大未來 ASP.NET AJAX 對程式設計師及微軟而言究竟是新奇的〝小玩意〞，
亦或是重要的〝策略性技術〞？若是前者可能大家學不學都無所謂，但如
果是後者大家可能要注意一下自己技術落後指標的徵兆，答案是 ASP.NET AJAX 是微軟下一代 Web 技術（Web 2.0）非常重視的要角，舉證如下：
1. 微軟下一代網頁技術 Web 2.0 的網站「Mix 06」，裡面清楚列出對
ASP.NET AJAX 的 一 段 形 容 文 字 ： 「 Microsoft's powerful new
framework for building cross-browser, cross-platform AJAX
applications.」意思是 ASP.NET AJAX 是微軟新的建構跨瀏覽器、跨平
台 AJAX 應用程式的威力強大 framework，故 ASP.NET AJAX 已確立其
重要地位，它將扮演下一代 AJAX 非同步 Web 技術要角。
2. 美國微軟本身的 Mix 06 研討會有非常多的 AJAX 及 ASP.NET AJAX 技
術的主題場次，而且就是由.NET 技術團隊的專家成員在主講，並發表
許多 AJAX 及 ASP.NET AJAX 技術如何結合第三代.NET 技術的應用展
示，所以 AJAX 及 ASP.NET AJAX 技術已是微軟如火如荼的現在進行
式，而非未來進行式，所以若您還在睡夢中的話，請趕快醒一醒。
3. 微軟領袖比爾蓋茲在 Channel 9 也針對 ASP.NET AJAX 發表一番談話，
各位殊不見比爾蓋茲何曾為 GridView、SqlDataSource 等控制項發表
談話否？顯然 ASP.NET AJAX 十分重要，它被定位在策略性層級的工
具，並非被定位為控制項層級，否則是不需要微軟帝國的領袖特別為它
發表意見觀點談話。
4. 微軟確定將會在下一代 Visual Studio（VS 2007 或 2008）之中整合
ASP.NET AJAX 技術，故其重要性不言而喻，同時可以想見 ASP.NET
AJAX 目前及未來會持續擴充其功能，令其異常強大。
6-28
5. 不啻微軟十分重視 AJAX 技術的開發，連 SUN、IBM、BEA 等相關大廠
亦對 AJAX 投注許多心力，紛紛投入許多資源進行 AJAX 技術、工具、
網站、文章發表等等，可見這是一股潮流而非一時興起的即興表演，也
因此 ASP.NET AJAX 將會是微軟與其他技術競爭者重要的利劍。
6. 國外許多專家與網站已大肆紛紛採用 ASP.NET AJAX 技術進行 AJAX 應
用程式開發，可大幅提升網站運作效能、增加網站豐富性、減少開發時
間與提高生產力，如此表現得可圈可點。
7. 微軟為了 ASP.NET AJAX 不但指名了知名架構師 Nikhilk 來負責打造，
亦成立了 ASP.NET AJAX 專屬網站，裡面有大量 ASP.NET AJAX 技術
文件與討論區，故 ASP.NET AJAX 年紀雖小，卻是屬於掌上明珠型的
人物，受微軟及全世界專家寵愛自不在話下。
所謂見微知著，一葉知秋，以往是美國熱門新技術到台灣總要一段不
短時間，甚或國外已經流行好幾年後才被引進國內，但台灣微軟關於
ASP.NET AJAX 技術文章與研討會的發表除了美國微軟之外，可說領先全
世界其他國家微軟分部所發表的速度，最後面對如此當紅的技術炸子雞，
您還能不心動嗎？趕快去下載，大膽用在您的 Web 應用程式專案，包準能
夠爆發您腦袋長久以來被壓抑的創意，輕鬆就能做出令人耳目一新的 Web 2.0 網頁系統，您還等什麼呢！
結論 最後因為書籍篇幅有限緣故，對於所有 ASP.NET AJAX 伺服端層面的
技術無法一一納入介紹，祭司僅能就快速上手又最有用的部分，將其濃縮
成精華直接交到各位手上，光憑這幾個 ASP.NET AJAX 控制項技巧就足以
解決以前您在 Web 網頁開發中懸而未決的難題，希望各位能善加利用。若
您對 ASP.NET AJAX 技術有濃厚的興趣，想要學到更多 ASP.NET AJAX技巧，則您可以自行參考其他 ASP.NET AJAX 專書，相信可以得到更加詳
盡的知識與技術。
