Professional Documents
Culture Documents
0 的 AJAX 利劍~
5
ASP.NET AJAX
前言
自從 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。
建立 Web 專案
建立 Client 端頁面
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 端處理程式
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;
程式說明:
圖 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
另 一 個 議 題 是 網 頁 瀏 覽 器 之 中 的 HTML 控 制 項 與 桌 面 應 用 程 式 的
Rich UI 相較之下顯得能力有限,很多瀏覽器都包含增強的 HTML 控制項,
但是這些增強的 HTML 控制項都是針對特定瀏覽器而實作,因此想要獲得
這些增強 HTML 控制項的 Rich UI,網頁應用程式開發者必須針對特定瀏
5-9
覽器建立應用程式,這將會非常複雜,故很多開發人員避免在他們網頁之
中建立以特定 Client 端特徵的功能,因此使用者發現網頁應用程式的吸引
力相較於其他類型的應用程式要小得多。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
版本。
Client 端對驗證及使用者設定檔的存取
支援 Client Script 對伺服端的驗證( Authentication )及使用者設定檔
( Profile )的存取,甚至對於不是用 ASP.NET 建置的 Web 應用程式一
5-13
Server 端方面
ASP.NET AJAX 在 Server 端方面亦包括了豐富的伺服元件功能特點,
以補充 ASP.NET AJAX 在 Client Script Libraries 函式庫之不足,包括了:
Web 服務
有一些 Web 服務能夠為 ASP.NET AJAX 應用程式加入非常有用的伺服
端功能特點,如 ASP.NET 2.0 的 profiles 。
控制項 說明
可展開與收合折疊的數個長方形區塊,裡面可以放不同的
Accordion
Item 項目,類似 Outlook 天能窗格介面的功能。
可 以 針 對 特 定 控 制 項 製 造 出 動 畫 效 果 , 例 如 : Move 、
Animation
Resize 、 Fade 與 Color 等變化效果。
還有其他未在上表列出的的控制項如:
MutuallyExlcusive RoundedCorners
結論
經由本章的介紹,您應能瞭解 AJAX 為傳統 Web 應用程式所帶來的創
新,以及微軟 ASP.NET AJAX 的功能架構,下一章將為您介紹該如何運用
ASP.NET AJAX 伺服端技術。
相關參考網址
2. DotNet 開發聖殿
http://blog.sina.com.tw/dotnet/
3. AJAX 魔法工廠
http://blog.sina.com.tw/ajax/
5-16
6
ASP.NET AJAX 伺服器控制項
前言
ASP.NET AJAX 是微軟於 2006 年所推出 AJAX Framework,AJAX 也
是目前 Web 網頁設計最熱門的技術話題之一,因為 AJAX 非同步技術的力
量能夠〝打破〞Client 端 JavaScript 與 Server 端 ASP.NET 兩者藩籬,讓
Client 端能夠與 Server 端能彼此交互融合相互作用,進而製造出許多不可
能的神奇效果,相信各位應能夠深刻體會那種奇妙的效果,本章將教您如
何安裝建立 ASP.NET AJAX 開發環境,並介紹如何進行 ASP.NET AJAX
以伺服端為中心的技術開發模式。
以上兩種開發模式的訴求及定位不同,說明如下:
以 Server 端為中心的開發模式主要訴求與定位
以 Client 端為中心的開發模式主要訴求與定位
從上面的文字及技術藍圖可以清楚明瞭兩者的優點所在,但請別落入
二分法的思維,誤以為只能在伺服端及客戶端之間二選一,選了其中一個
就要放棄另一個,事實上並非如此,微軟 ASP.NET AJAX 可以讓您在一個
專案中任意混合搭配使用,也就是有三種選擇 (1) 純客戶端 (2) 純伺服端
(3) Client 端 + Server 端混合。
本章要介紹的重點在於“純伺服端”,因為祭司發現只有純伺服端開
發的模式才能最快達到少少修練、速速上手之目的,只需熟悉幾個
6-4
點選
點選
下載
執行 ASPAJAXExtSetup.msi 程式安裝
當 安 裝 完 成 後 , 各 位 可 以 到 電 腦 路 徑 「 C:\Program Files\Microsoft
ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025 」 下 , 就 可 以 看 到
ASP.NET AJAX 安裝的一堆.dll 及 JavaScript(.js)相關程式,表示您確實
安裝成功了。
6-7
ScriptManager 控制項。
ScriptManagerProxy 控制項。
UpdatePanel 控制項。
Timer 控制項。
UpdateProgress 控制項。
6-9
ScriptManager 控制項
UpdatePanel 控制項
Partial-Page Rendering 屬性
UpdatePanel 的 Trigger 事件
Timer 控制項
1. ScriptManager 控制項
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
4. UpdatePanel 的 Trigger 事件
雖說 UpdatePanel 是一個 AJAX Panel 魔鏡,感覺上十分神奇,但千里
馬也須有人駕馭才能行動,而 Trigger 正是觸發 UpdatePanel 動作的機
制,如 Trigger 會監控 Timer 計時器時間變化、使用者按下特定按鈕或
某 個 控 制 項 的 值 被 改 變 了 , 進 而 通 知 UpdatePanel 進 行 頁 面 的
Postback 動作,所以 Trigger 所扮演的角色是 UpdatePanel 專屬探子,
負責偵察 UpdatePanel 所指派的任務,一旦有符合條件的任何風吹草
動,UpdatePanel 便執行 PostBack 動作,並以 Partial-Page Rendering
處理更新。
5. Timer 控制項
OK 瞭解以上基礎而重要的概念後,接下來將解說如何建構 ASP.NET
AJAX 純伺服端的應用程式,您會發現真是異常簡單,步驟說明如下:
加入 Timer.aspx 頁面
加入 ScriptManager 控制項
在 純 ASP.NET AJAX 伺 服 端 程 式 開 發 中 , 第 一 個 步 驟 是 加 入 一 個
ScriptManager 控制項,它是自動管理非同步所需相關 JavaScript 必要項
目,更是 Partial-Page Rendering 及 UpdatePanel 正常運作所不可或缺的要
6-12
加入 UpdatePanel 控制項
加入 Timer 計時器
設定 UpdatePanel 的 Triggers 集合
3 1
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="txtTime" runat="server"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1"
EventName="Tick" />
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;
程式說明:
上面程式除了時間顯示,並利用亂數技巧來製造前景與背景顏色隨機
改變的效果,如此比較能和用 JavaScript 方式顯示時間有個小小區別。
上一個範例雖然簡單,但有功力的程式設計師一眼便能望出簡單背後
其精髓所在,透過簡潔的技巧便能夠將客戶端與伺服端兩個融合在一起,
足以顯見其威力強大;然而相信有許多未曾接觸 AJAX 非同步技術的朋
友,可能一時間摸不著頭緒,心裡可能會認為不過就是時間顯示嘛,我用
JavaScript 還不一樣能做出同樣的效果,故因此祭司再將這一個範例再強
化,各位大概就能完全明瞭 ASP.NET AJAX 所帶來非同步的威力,請參考
Timer_GdiPlus.aspx,步驟說明如下:
設定控制項 Layout
1. 加入 ScriptManager 控制項。
2. 加入 UpdatePanel 控制項,並於其中加入一個 HTML 的 <IMG> 標籤。
3. 加入 Timer 控制項,並將其 Interval 屬性設定為 1000 (毫秒)。
4. 將 UpdatePanel 控制項的 Triggers ,加入一個 AsyncPostBack 成員,
並指定其 ControlID 為「 Timer1 」, EventName 為「 Tick 」。
6-16
<Img />
圖 6-11 控制項配置畫面
使用 GDI+ 繪製伺服器時間圖形
程式說明:
這個影像處理常式在本書許多章節皆會運用到,它是用來讀取資料庫
二進位格式的圖片資料以顯示在前端,程式碼雖略異,但原理是一模一樣
的。如果您一時看不懂這段 GDI+ 程式沒有關係,直接 Copy 引用就可以
了,因為 ASP.NET AJAX 目的在講解 AJAX 非同步的能力,而非 GDI+ 或
泛型處理常式。
請在 Timer 控制項上連續點兩下,加入下列程式碼:
使用同樣的原理技術,您可以繪製即時的伺服器效能圖、CPU 效能圖、
記憶體監控圖、生產機台連線狀況、即時品管系統、股價走勢圖等等應用,
只需專注在 .NET 端的程式邏輯,一切非同步的相關技術 ASP.NET AJAX
已經替各位打理好了,完全不需要程式設計師擔心,如此便能夠有效提升
程式開發的生產力,而一個好的 Framework 的使命不就是功能強大又能提
高生產力嗎!呵~很高興 ASP.NET AJAX 做到了。
請 參 考 TimerGridView.aspx 範 例 程 式 , 這 個 範 例 和
Timer_GDIPlus.aspx 幾乎一樣,只不過多加入了一個 GridView 顯示北風
資料庫中的員工資料,為什麼要多加入一個 GridView 顯示資料,如此各位
便能夠看到 Partial-Page Rendering 局部更新的威力,只有伺服器時間會變
換,而 GridView 控制項是不會有任何的 Refresh 閃動,足可以說明 ASP.NET
AJAX 的威力了,傳統的方式並無法做到局部更新,而 AJAX 技術最強的
地方也是在於速度快,少量資料的傳輸正是速度快的主因,這是傳統技術
所做不到的地方。
加入 ScriptManager 控制項
加入 UpdatePanel 控制項
加入日曆控制項到 UpdatePanel 中
在 UpdatePanel 之內 在 UpdatePanel 之外
加入 ScriptManager 控制項
加入 UpdatePanel 控制項
AJAX 非同步
一般同步
ScriptManager 控制項
下表為 ScriptManager 控制項屬性說明。
屬性 說明
當伺服器有例外錯誤發生,此錯誤訊息會被傳送
AsyncPostBackErrorMessage
到 Client 端。
EnablePartialRendering 是否啟用局部更新。
設 定 Script 參 照 是 否 在 UI 控 制 項 之 前 載入 到
LoadScriptsBeforeUI
Browser 瀏覽器之中。
UpdatePanel 控制項
下表為 UpdatePanel 控制項屬性說明。
屬性 說明
若 Postbacks 來 自 UpdatePanel 的 子 控 制 項 時 ,
ChildrenAsTriggers
UpdatePanel 本身是否要進行 refresh 更新。
屬性說明
而 UpdateMode 模 式 通 常 是 一 個 Page 頁 面 同 時 包 含 多 個
UpdatePanel,這時若大家都設定為 Always 模式,則即便只有其中
一個 UpdatePanel 做非同步更新,但其他 UpdatePanel 也會連帶
受 到 更 新 影 響 , 故 這 時 就 有 必 要 將 UpdateMode 設 定 為
Conditional ,以避免連帶受到其他 UpdatePanel 影響。
一個 UpdatePanel 可以同時設定許多 Triggers ,來進行多個情況
觸發。
Timer 控制項
下表為 Timer 控制項屬性及事件說明。
屬性/事件 說明
所謂見微知著,一葉知秋,以往是美國熱門新技術到台灣總要一段不
短時間,甚或國外已經流行好幾年後才被引進國內,但台灣微軟關於
ASP.NET AJAX 技術文章與研討會的發表除了美國微軟之外,可說領先全
世界其他國家微軟分部所發表的速度,最後面對如此當紅的技術炸子雞,
您還能不心動嗎?趕快去下載,大膽用在您的 Web 應用程式專案,包準能
夠爆發您腦袋長久以來被壓抑的創意,輕鬆就能做出令人耳目一新的 Web
2.0 網頁系統,您還等什麼呢!
結論
最後因為書籍篇幅有限緣故,對於所有 ASP.NET AJAX 伺服端層面的
技術無法一一納入介紹,祭司僅能就快速上手又最有用的部分,將其濃縮
成精華直接交到各位手上,光憑這幾個 ASP.NET AJAX 控制項技巧就足以
解決以前您在 Web 網頁開發中懸而未決的難題,希望各位能善加利用。若
您對 ASP.NET AJAX 技術有濃厚的興趣,想要學到更多 ASP.NET AJAX
技巧,則您可以自行參考其他 ASP.NET AJAX 專書,相信可以得到更加詳
盡的知識與技術。