範例目錄

Chapter 1 VS 2005 IDE整合開發環境新功能介紹 ..................... 1-1 範例 1-1 加入第二個網站專案.......................................................1-16

範例 1-2 設定顯示方案.................................................................1-17

Chapter 2 VS 2005進階功能密技 ............................................ 2-1 範例 2-1 Partial Class的應用 ........................................................ 2-8

範例 2-2 固定 ASP.NET程式開發伺服器的 Port .............................2-14

範例 2-3 以 aspnet_regiis.exe手動註冊 ASP.NET版本 ..................2-18

範例 2-4 讀取 Web.config中的資料庫連線設定 .............................2-23

範例 2-5 使用程式碼片段 .............................................................2-28

範例 2-6 使用重整的擷取方法.......................................................2-33

範例 2-7 使用重整的重新命名.......................................................2-35

範例 2-8 動態編譯的證明 .............................................................2-39

範例 2-9 使用 aspnet_compiler.exe先行編譯 ................................2-42

範例 2-10 透過程式 API執行編譯工作 ...........................................2-44

範例 2-11 專案同時使用 C# 與 VB類別程式..................................2-47

Chapter 3 SQL Server 2005資料庫安裝、管理與使用策略 ........ 3-1 範例 3-1 VS 2005連接資料庫 .......................................................3-34

範例 3-2 定義檢視表 ....................................................................3-39

Chapter 4 ASP.NET 2.0的 Page、Cross Page Posting與Client-Side Script新功能 ....................................... 4-1

範例 4-1 跨網頁公布初體驗 ........................................................... 4-4

範例 4-2 使用 @PreviousPageType指示詞 .................................... 4-7

範例 4-3 使用 @Reference指示詞 ...............................................4-10

範例 4-4 使用 HtmlHead類別加入 CSS設定 .................................4-17

xviii

範例 4-5 使用 HtmlMeta類別加入 <Meta> 設定 .......................... 4-19

範例 4-6 設定控制項成為焦點（Focus） ...................................... 4-21

範例 4-7 設定 WebForm表單預設按鈕與焦點 ............................... 4-23

範例 4-8 Client端的 Confirm確認對話方塊................................... 4-27

範例 4-9 在 Server端的 Button引發 Client端 Click事件

（開啟網頁） ................................................................. 4-29

範例 4-10 使用 RegisterClientScriptInclude動態註冊 .js檔 ........... 4-32

範例 4-11 使用 RegisterClientScriptBlock動態註冊 JavaScript

指令區塊 ..................................................................... 4-35

範例 4-12 使用 RegisterStartUpScript動態註冊 JavaScript指令 .... 4-36

範例 4-13 使用 Callback進行非同步資料庫查詢............................ 4-37

範例 4-14 使用 Callback進行非同步資料庫查詢（簡化版） ........... 4-42

Chapter 5 微軟 ASP.NET 2.0的 AJAX利劍～ASP.NET AJAX .... 5-1 範例 5-1 AJAX簡單範例 ................................................................ 5-4

Chapter 6 ASP.NET AJAX伺服器控制項 ................................. 6-1 範例 6-1 ASP.NET AJAX伺服端時鐘範例...................................... 6-11

範例 6-2 ASP.NET AJAX伺服端時鐘範例 GDI+ 加強版 ................. 6-15

範例 6-3 Partial-Page Rendering局部更新與傳統 Postback更新

之對比 .......................................................................... 6-21

範例 6-4 日曆控制項結合 ASP.NET AJAX非同步 ........................... 6-22

範例 6-5 GridView控制項結合 ASP.NET AJAX非同步 ................... 6-23

Chapter 7 ASP.NET 2.0其他新增控制項介紹 ........................... 7-1 範例 7-1 FileUpload控制項上載檔案 .............................................. 7-2

範例 7-2 FileUpload多檔上載 ........................................................ 7-5

範例 7-3 限制 FileUpload檔案上載類型 ......................................... 7-9

範例 7-4 設定 TextBox控制項 AutoCompleteType自動完成屬性.... 7-13

範例 7-5 使用 DropDownList控制項的 AppendDataBoundItems

屬性 ............................................................................. 7-16

範例 7-6 使用 Panel控制項的捲軸 ............................................... 7-18

xix

範例 7-7 使用 MultiView與 View控制項顯示圖片 ...........................7-19

範例 7-8 MultiView結合 Menu控制項 ...........................................7-24

範例 7-9 以 Wizard控制項建立會員帳號申請 .................................7-27

範例 7-10 編輯 Wizard控制項樣板................................................7-40

範例 7-11 Wizard控制項事件的應用 .............................................7-44

Chapter 8 全方位的神奇新物件 My........................................... 8-1 範例 8-1 用 My.Application.Info物件讀取應用程式資訊 .................8-10

範例 8-2 使用 My.Application.Log物件寫入 Log檔 .......................8-13

範例 8-3 使用 My.Application.Log物件寫入事件檢視器

（EventLog） ................................................................8-14

範例 8-4 使用 My.Computer.Info物件讀取電腦資訊 .......................8-18

範例 8-5 使用 My.Computer.Audio物件播放音效 ..........................8-19

範例 8-6 使用 My.Computer.Clipboard物件讀取剪貼簿圖片 ..........8-21

範例 8-7 使用 My.Computer.FileSystem物件讀取文字檔 ...............8-25

範例 8-8 使用 My.Computer.Network物件 Ping電腦 IP .................8-27

範例 8-9 使用 My.Computer.Ports物件存取電腦 COM Port............8-28

範例 8-10 使用 My.Computer.Registry物件讀取 Registry檔 ..........8-29

範例 8-11 使用 My.Forms物件動態啟始 Windows表單 ..................8-31

範例 8-12 使用 My.Log物件讀取 Log資訊 ....................................8-33

範例 8-13 使用 My.Resources物件讀取資源檔圖片 .......................8-36

範例 8-14 在 Web使用 My.Resources物件讀取資源檔圖片............8-39

範例 8-15 使用 My.Settings物件存取設定檔 .................................8-48

範例 8-16 使用 My.User物件（Web專案） ...................................8-50

範例 8-17 使用 My.WebServices物件讀取 Web Service.................8-54

Chapter 9 GridView與 SqlDataSource控制項-應用篇 .............. 9-1 範例 9-1 ASP.NET網站資料庫連線設定 ........................................9-10

範例 9-2 VS 2005對 SQL Server資料庫拖曳的支援 .......................9-13

範例 9-3 使用 BoundField資料繫結欄位 .......................................9-23

範例 9-4 標準數值格式化字串的應用（Standard Numeric Format

Strings） .......................................................................9-27

xx

範例 9-5 BoundField欄位 DataFormatString字串格式化的應用..... 9-28

範例 9-6 使用 ButtonField按鈕欄位 ............................................. 9-35

範例 9-7 ButtonField按鈕欄位的格式化 ....................................... 9-40

範例 9-8 使用 CommandField命令按鈕欄位 ................................. 9-42

範例 9-9 自訂 CommandField命令按鈕欄位 ................................. 9-45

範例 9-10 使用 CheckBoxField核取方塊欄位 ............................... 9-47

範例 9-11 使用 HyperLinkField超連結欄位 ................................... 9-49

範例 9-12 使用 HyperLinkField超連結欄位（動態程式碼）............ 9-52

範例 9-13 使用 ImageField影像欄位 ............................................ 9-55

範例 9-14 GridView動態顯示資料庫圖片 ...................................... 9-59

範例 9-15 建立 TemplateField樣板欄位 ....................................... 9-63

範例 9-16 將 Field欄位轉換成樣板............................................... 9-67

範例 9-17 設定 GridView控制項的分頁......................................... 9-72

範例 9-18 GridView顯示 Client端的 Confirm對話方塊 .................. 9-76

Chapter 10 GridView與 SqlDataSource控制項-動態程式篇 .... 10-1 範例 10-1 判斷 GridViewRow的 RowState狀態 ............................ 10-9

範例 10-2 GridView資料列的光棒效果 ....................................... 10-13

範例 10-3 GridView資料列的光棒效果（JavaScript版） ............. 10-15

範例 10-4 GridView顯示多個 Table Join查詢結果 ...................... 10-17

範例 10-5 GridView分頁使用圖片按鈕並加入分頁碼顯示 ............. 10-20

範例 10-6 GridView圖片與數字分頁按鈕並存 ............................. 10-21

範例 10-7 GridView分頁與排序程式技巧 .................................... 10-23

範例 10-8 GridView選擇資料列及動態欄位排序 .......................... 10-26

範例 10-9 Master-Details資料明細查詢 ...................................... 10-31

範例 10-10 GridView資料列的刪除功能...................................... 10-32

範例 10-11 刪除多重欄位組成唯一識別鍵值的資料列 .................. 10-34

範例 10-12 GridView資料列的編輯與更新功能 ............................ 10-36

範例 10-13 以程式動態建立 TemplateField樣板欄位 ................... 10-41

範例 10-14 HTML的表格跨欄跨列.............................................. 10-48

範例 10-15 GridView多重表頭與表尾的跨欄跨列 ........................ 10-49

xxi

範例 10-16 GridView資料列的折行 .............................................10-54

範例 10-17 建立 GridView表頭表尾與資料列的背景圖片 ..............10-57

範例 10-18 GridView資料列的外部更新 ......................................10-59

Chapter 11 新一代資料存取方式 Data Source控制項 .............. 11-1 範例 11-1 以 DataReader作為資料來源的繫結 ..............................11-9

範例 11-2 使用 ControlParameter參數型態.................................11-14

範例 11-3 使用 CookieParameter參數型態 .................................11-15

範例 11-4 使用 FormParameter參數型態 ....................................11-16

範例 11-5 使用 QueryStringParameter參數型態 ..........................11-18

範例 11-6 使用 SessionParameter參數型態 ................................11-19

範例 11-7 使用一般數值或字串當參數 DefaultValue .....................11-20

範例 11-8 參數方向的設定 .........................................................11-21

範例 11-9 使用 SelectCommand篩選過濾資料............................11-23

範例 11-10 使用 FilterExpression篩選資料 .................................11-27

範例 11-11 新增員工基本資料的 ADO.NET 1.0資料庫交易程式 ....11-34

範例 11-12 多筆式的 ADO.NET 1.0資料庫交易 ...........................11-35

範例 11-13 SqlDataSource控制項的資料庫交易..........................11-36

範例 11-14 連續大量資料新增至資料庫的交易 .............................11-39

範例 11-15 建立預存程序 ...........................................................11-42

範例 11-16 以 ADO.NET呼叫預存程序 ........................................11-44

範例 11-17 以 SqlDataSource程式碼存取預存程序 .....................11-45

範例 11-18 以 SqlDataSource精靈存取預存程序 .........................11-46

範例 11-19 以 ObjectDataSource呼叫商務物件程式....................11-50

範例 11-20 ObjectDataSource與 DataSet Designer的結合 .........11-55

範例 11-21 衝突偵測的 OverwriteChanges..................................11-64

範例 11-22 衝突偵測的 CompareAllValues ..................................11-66

xxii

Chapter 12 DetailsView、FormView與 DataList控制項介紹 ... 12-1 範例 12-1 建立基本的 DetailsView ............................................... 12-6

範例 12-2 讀取 DetailsView資料項目的欄位標題及內容資訊 .......... 12-9

範例 12-3 DetailsView模式的應用 ............................................. 12-15

範例 12-4 DetailsView的 Style樣式設定..................................... 12-17

範例 12-5 DetailsView外觀調整 ................................................. 12-18

範例 12-6 建立 DetailsView表頭表尾與資料列的背景圖片 ........... 12-21

範例 12-7 自訂 DetailsView樣板功能 ......................................... 12-23

範例 12-8 動態顯示資料庫中 Image欄位圖片 ............................. 12-31

範例 12-9 存取 FormView的資料與模式 ..................................... 12-36

範例 12-10 自訂命令按鈕 .......................................................... 12-41

範例 12-11 DataList控制項的 ExtractTemplateRows屬性運用 .... 12-44

範例 12-12 顯示資料庫 Image圖片 ............................................ 12-46

範例 12-13 DataList欄位項目的資料存取 ................................... 12-46

Chapter 13 ASP.NET 2.0網站巡覽功能（Web Site Navigation） .. 13-1 範例 13-1 建立 SiteMap格式的網站巡覽結構檔 ............................ 13-6

範例 13-2 建立 XML格式的網站巡覽結構檔 .................................. 13-9

範例 13-3 TreeView使用 SiteMapDataSource繫結至 SiteMap檔.. 13-11

範例 13-4 TreeView繫結至 XML檔 ............................................ 13-12

範例 13-5 使用 TreeView節點編輯器建立 TreeView控制項 .......... 13-15

範例 13-6 以 TreeNode節點方式建立 TreeView控制項 ............... 13-17

範例 13-7 透過程式與 XML檔進行連結以建立 TreeView控制項 .... 13-19

範例 13-8 檢查 TreeView被勾選之節點 ...................................... 13-25

範例 13-9 TreeView控制項的 TreeNode節點摺疊與展開事件 ...... 13-26

範例 13-10 置換 TreeView節點之文字 ........................................ 13-27

範例 13-11 建立基本的 SiteMapPath控制項 ............................... 13-29

範例 13-12 SiteMapPath控制項的 ItemCreated事件應用 ............ 13-34

範例 13-13 建立 Menu控制項功能表選單 ................................... 13-36

範例 13-14 靜態與動態功能表選單的應用 ................................... 13-37

範例 13-15 Menu使用 SiteMapDataSource繫結至 SiteMap檔 .... 13-40

xxiii

範例 13-16 Menu繫結至 XML檔 ................................................13-40

範例 13-17 使用功能表項目編輯器（MenuItem Editor）建立 .......13-41

範例 13-18 以 MenuItem項目建立 Menu控制項 ..........................13-41

範例 13-19 透過程式與 XML檔進行繫結以建立 Menu控制項 ........13-43

範例 13-20 Menu控制項的 MenuItemDataBound事件應用 ..........13-48

範例 13-21 TreeView控制項使用多個 SiteMap檔定義 .................13-49

範例 13-22 TreeView控制項使用多個 XML檔定義 .......................13-53

範例 13-23 讀取網站巡覽 RootNode根節點資訊 .........................13-55

Chapter 14 Master Pages主版面頁....................................... 14-1 範例 14-1 建立 Master Pages主版頁面 ........................................14-5

範例 14-2 建立巢狀 Master Pages主版頁面 ................................14-15

範例 14-3 在內容頁以程式讀取 Master Page相關物件 .................14-18

Chapter 15 ASP.NET 2.0網站管理工具與 Configuration 組態 API ............................................................ 15-1

範例 15-1 使用 ASP.NET網站管理工具 .........................................15-8

範例 15-2 建立 ASP.NET使用者帳號 ..........................................15-12

範例 15-3 建立 Role角色 ...........................................................15-16

範例 15-4 應用程式設定操作 ......................................................15-23

範例 15-5 另類的網站應用程式離線密技 .....................................15-26

範例 15-6 獨立執行 ASP.NET網站管理工具 ................................15-31

範例 15-7 使用 ASP.NET組態設定工具設定 SQL Server

資料庫連線 ................................................................15-32

範例 15-8 讀取 <connectionStrings> 區段連線字串設定值 .........15-38

範例 15-9 連續讀取 <connectionStrings> 區段連線字串.............15-39

範例 15-10 讀取 <appSettings> 區段應用程式設定值 ................15-40

範例 15-11 連續讀取 <appSettings> 區段應用程式設定值 ..........15-41

範例 15-12 讀取 <mailSettings> 區段 SMTP Mail設定 ...............15-41

範例 15-13 應用程式 <appSettings> 區段的加密 .......................15-43

範例 15-14 資料庫連線字串 ConnectionString區段的加密 ...........15-47

xxiv

範例 15-15 使用 ASPNET_REGIIS命令進行 Web.config的

加密解密 ................................................................. 15-49

Chapter 16 ASP.NET網頁安全性管理之驗證與授權 ................ 16-1 範例 16-1 Windows驗證模式的使用 ............................................. 16-9

範例 16-2 Forms驗證模式的使用 ............................................... 16-12

Chapter 17 ASP.NET 2.0網頁安全性管理之 Login控制項 ....... 17-1 範例 17-1 使用 Login控制項........................................................ 17-7

範例 17-2 自訂 Login控制項的驗證程序 ....................................... 17-9

範例 17-3 自訂 Login控制項樣板 ............................................... 17-13

範例 17-4 使用 LoginName控制項 ............................................. 17-17

範例 17-5 使用 LoginStatus控制項 ............................................ 17-18

範例 17-6 自訂 LoginView樣板 .................................................. 17-20

範例 17-7 自訂 RoleGroup樣板 ................................................. 17-21

範例 17-8 使用 CreateUserWiazrd控制項建立使用者帳號 ........... 17-22

範例 17-9 使用 ChangePassword控制項 ................................... 17-23

範例 17-10 使用 PasswordRecovery控制項 ............................... 17-25

Chapter 18 ASP.NET 2.0網頁安全性管理之 Membership與Role API ........................................................... 18-1

範例 18-1 用 Membership.CreateUser() 方法建立使用者帳號 ...... 18-11

範例 18-2 利用 MembershipCreateStatus取得帳號建立成功或失

敗訊息 ....................................................................... 18-14

範例 18-3 利用 Membership.Validate() 方法驗證使用者身份 ........ 18-15

範例 18-4 利用 Membership.FindUserByName() 及

FindUserByEmail() 尋找使用者 .................................. 18-17

範例 18-5 利用 Membership.GetAllUsers() 讀取所有使用者資料 .. 18-20

範例 18-6 利用 Membership.Update() 更新使用者資料 ............... 18-22

範例 18-7 統計目前線上使用者 .................................................. 18-24

範例 18-8 利用 Membership.DeleteUser() 刪除使用者帳號 .......... 18-26

範例 18-9 讀取使用者密碼 ......................................................... 18-28

xxv

範例 18-10 利用 MembershipUser類別改變或重設使用者密碼 .....18-31

範例 18-11 利用 MembershipUser來改變或重設安全性問題

及解答 .....................................................................18-33

範例 18-12 利用 MembershipUser.UnlockUser() 解除被鎖定的使

用者帳號 ..................................................................18-34

範例 18-13 是否允許使用者帳號能夠被驗證 ................................18-37

範例 18-14 利用 Roles.GetAllRoles() 方法取得 Roles資料庫所有

角色群組 ..................................................................18-46

範例 18-15 新增與刪除角色........................................................18-49

範例 18-16 將一個使用者加入一個角色（一對一） ......................18-52

範例 18-17 將一個使用者加入多個角色（一對多） ......................18-54

範例 18-18 將多個使用者加入一個角色（多對一） ......................18-56

範例 18-19 將多個使用者加入多個角色（多對多） ......................18-57

範例 18-20 將一個使用者自一個角色中移除（一對一） ................18-59

範例 18-21 將一個使用者自多個角色中移除（一對多） ................18-60

範例 18-22 將多個使用者自一個角色中移除（多對一） ................18-60

範例 18-23 將多個使用者自多個角色中移除（多對多） ................18-60

範例 18-24 使用 Roles.GetRolesForUser() 方法讀取使用者角色 ...18-61

範例 18-25 使用 Roles.GetUsersInRole(rolename As String) 方

法讀取使用者角色 ....................................................18-62

範例 18-26 判斷使用者是否屬於某個角色....................................18-63

範例 18-27 建立使用者與角色對網頁存取的授權 ..........................18-66

Chapter 19 Profile使用者設定檔 ........................................... 19-1 範例 19-1 Profile使用者設定檔的初體驗 .......................................19-4

範例 19-2 更新 Profile使用者設定檔 .............................................19-8

範例 19-3 讀取所有使用者 Profile設定檔（DropDownList） ........19-12

範例 19-4 讀取所有使用者 Profile設定檔（CheckBoxList） .........19-15

範例 19-5 儲存與使用匿名使用者 Profile設定檔 ..........................19-23

範例 19-6 匿名者 Profile設定檔的移轉........................................19-26

範例 19-7 Profile設定檔結合 Role角色與 Profile_Personalize

事件 ..........................................................................19-31

xxvi

範例 19-8 利用 Profile_ProfileAutoSaving事件動態改變 Profile

自動儲存機制 ............................................................ 19-38

範例 19-9 以 ProfileManager讀取 Profile之相關屬性 .................. 19-42

範例 19-10 以 ProfileManager.DeleteProfile方法刪除單一使用者

Profile設定檔 ........................................................... 19-43

範例 19-11 以 ProfileManager.DeleteProfiles方法刪除多個使用

者 Profile設定檔 ...................................................... 19-44

範例 19-12 刪除與查詢超過指定日期時間內沒登入使用者的

Profile ..................................................................... 19-48

範例 19-13 以程式讀取 Web.config檔中的 Profile Property屬性

設定 ........................................................................ 19-50

範例 19-14 以程式動態建立 Profile設定檔 .................................. 19-52

範例 19-15 讀取匿名身份識別區段屬性 ...................................... 19-55

Chapter 20 Web Parts Framework........................................ 20-1 範例 20-1 設計第一個 Web組件頁面 ............................................ 20-4

範例 20-2 設計模式的使用 ......................................................... 20-23

範例 20-3 編輯模式的使用 ......................................................... 20-31

範例 20-4 Web組件屬性設定匯出（Export） .............................. 20-38

範例 20-5 目錄模式下的 DeclarativeCatalogPart......................... 20-43

範例 20-6 目錄模式下的 PageCatalogPart .................................. 20-49

範例 20-7 目錄模式下的匯入 Web組件控制項 ............................. 20-53

範例 20-8 連接區域 ................................................................... 20-57

範例 20-9 使用 WebPartManager.Personalization進行個人化資

料重設 ...................................................................... 20-59

範例 20-10 使用 PersonalizationAdministration類別讀取及重設

個人化設定 .............................................................. 20-62

微軟 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-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 端的究極霸主，在大多數時候兩者之間幾乎是不相干，因為各做各

的，AJAX 它 Power 的地方似乎不在於「Asynchronous JavaScript and XML」表面上技術，而重點在於 AJAX 能夠巧妙將 Client 端與 Server 端技術串起

5-3

來融合在一起，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 網頁（含 .vb），程式碼如下：

01 Imports System.Diagnostics 02 03 Partial Class Server 04 Inherits System.Web.UI.Page 05 06 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 07 Dim myMemory As New PerformanceCounter() 08 myMemory.CategoryName = "Memory" 09 myMemory.CounterName = "Available KBytes" 10 11 Dim txtResult As String = "-->伺服器可用記憶體大小" & _

12 myMemory.NextValue().ToString() & "KB" 13 Response.Write(DateTime.Now.ToLongTimeString() & txtResult) 14 End Sub 15 End Class

程式說明：

首先記得引用 System.Diagnostics 命名空間，因為 PerformanceCounter必須使用讓命名空間，而 PerformanceCounter 類別可讓您監控 Windows作業系統的各種效能計數器，在此透過它取得伺服器每秒可用記憶體大小

變化情形。

圖 5-2 Server.aspx頁面

5-7

完成後請執行 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-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-8

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，網頁應用程式開發者必須針對特定瀏

覽器建立應用程式，這將會非常複雜，故很多開發人員避免在他們網頁之

中建立以特定 Client 端特徵的功能，因此使用者發現網頁應用程式的吸引

力相較於其他類型的應用程式要小得多。AJAX 開發方法是針對以上兩個

開發議題提供解決方案。

5-4-2 AJAX技術概念

AJAX 是建立在一個核心概念：「使用非同步呼叫，並結合 XML 方式

傳輸資料與大量使用 Client Script。」

在 AJAX 技術中，程式開發人員能夠以 Client 端 Scripts 方式透過

XMLHTTP 來進行非同步的 Web 服務呼叫，而 XMLHTTP 通訊協定常用於

將資訊封裝成 XML 資料型式在網路間傳送，大多數的瀏覽都有實作

XMLHTTP 類別，而此類別用於建立一個進行遠端呼叫與資料收發的 proxy物件，透過非同步方式進行呼叫，網頁中的資料與使用者介面不需要進行

Client 端與 Server 端之間的往返，結果是具有較少的資料傳送與較佳的應

5-9

用程式效能，非同步呼叫能夠使得網頁應用程式能夠有更佳良好的反應

性，因為使用者能夠在呼叫工作仍在 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 行為），並且能夠與網頁元素產生連結。

元件（Component）：是一種能夠提供擴充 Client 端使用者介面功能特

點的客製化 JavaScript 物件。

JavaScript 結合這些 Client 端技術後，使得程式開發人員足以建立能夠

媲美桌上型應用程式的使用者介面功能特點，在這有兩個例子可提供給大

家參考：

1. 微軟 Virtual Earth 網站：一個提供電子地圖的網站。

2. 微軟 Outlook Web Access：一種透過 WEB 瀏覽器收發 e-mail 的 Client端使介面。

以上兩個例子皆展示出以 AJAX 技術所建立豐富的使用者介面與高效

能之應用程式典範。

然而使用這些技術來建構 AJAX 應用程式是複雜的，直到現在程式開

發人員仍必須手動建立事件處理、訊息傳遞、和建立豐富性使用者介面所

需要的細節。而且再者因為 JavaScript 不是物件導向語言（OOP），故它

5-10

沒有強型別、命名空間、例外事件處理與其 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-4 ASP.NET AJAX架構圖

ASP.NET AJAX 架構說明如下：

元件

非視覺化元件、

Behaviors、Controls

瀏覽器相容性

支援 IE、Firefox、Safari瀏覽器

網路層

Asynchronous Requests、XML & JSON序列化、Web

& Application Service

核心服務

JavaScript基底類別擴充、型別系統、事件、序列化

Client 端

Microsoft AJAX Library

Script 支援

Localization、Globalization、Debugging、Tracing

網路服務

Proxy Generation、Page Methods、XML & JSON序列化

網路服務

Authentication & Profile

伺服器控制項

ScriptManager、UpdatePanel、UpdateProgress、Timer

Server 端

ASP.NET AJAX Extensions

5-11

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

然而上面六支程式骨子裡只能算是三支而已，因為以.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 及擴充的事

件處理。

5-12

網路層（Networking layer）

網路層負責處理 Web 為基礎的服務與應用程式之間的溝通，以及管理

非同步遠端呼叫方法。

JavaScript Library 對 Release 與 Debug 模式的支援

對於 JavaScript Library 的支援包括兩種型式：一是嵌入在 assembly 組

件之中，另一種是獨立的 JavaScript 檔（.js）；但 JavaScript Library嵌入在 assembly 組件之中優點是部署容易，並且可以避免版本問題。

Client 端對驗證及使用者設定檔的存取

支援 Client Script 對伺服端的驗證（Authentication）及使用者設定檔

（Profile）的存取，甚至對於不是用 ASP.NET 建置的 Web 應用程式一

樣支援，只要它們是透過 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 控

5-13

制項， 並且可免費使用，目的是要讓程式設計師簡化 AJAX 程式開發，直

接使用這些預先建立好的 AJAX 控制項，省却了從零開始手工打造 AJAX相關功能，算是一些貼心的 AJAX 控制項小工具的集合。

ASP.NET AJAX Control Toolkit 目前提供了 34 個相關的控制項，並且

Control Toolkit 仍在持續擴充中，預計未來希望擴充到 50～100 個控制項，

以下舉幾個控制項來做功能說明。

表 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

5-14

Tabs

TextBoxWatermark

ToggleButton

UpdatePanelAnimation

ValidatorCallout

ListSearch

SlideShow

若您對這些 ASP.NET AJAX Control Toolkit 有興趣的話，可以參考微

軟 http://ajax.asp.net 官方網站說明。

結論 經由本章的介紹，您應能瞭解 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/

6 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-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

選擇 ASP.NET AJAX-Enabled Web Site 範本

圖 6-7 建立建立ASP.NET AJAX專案

檢視 AJAX Extensions 控制項

請開啟 VS 2005 的工具箱，其中有一個新的索引標籤【AJAX Extensions】，裡面所包含的控制項就是 Server 端的 AJAX 伺服器控制項，控制項包括了：

ScriptManager 控制項。

ScriptManagerProxy 控制項。

UpdatePanel 控制項。

Timer 控制項。

UpdateProgress 控制項。

6-9

ASP.NET AJAX 伺服器控制項

圖 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 的心要，有了它才能夠使

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 的啟用與關閉是透過

ScriptManager 控制項的 EnablePartialRendering 屬性來設定，預設值為

True。

6-11

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 正常運作所不可或缺的要

素。此外務必將 ScriptManager 的 EnablePartialRendering 屬性設定保持為

True，這樣 UpdatePanel 才會以局部更新（Partial-Page Rendering）來運作，

求得最佳效能。

6-12

加入 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

3

2

1

圖 6-9 設定UpdatePanel控制項之Triggers集合

截至目前為止 HTML 程式如下：

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Timer.aspx.vb"

Inherits="Timer" %> <%@ Register Assembly="System.Web.Extensions, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %> <!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> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="txtTime" runat="server" Text="Label"></asp:Label> </ContentTemplate> <Triggers>

6-14

<asp:AsyncPostBackTrigger ControlID="Timer1"

EventName="Tick" /> </Triggers> </asp:UpdatePanel> </div> <asp:Timer ID="Timer1" runat="server" Interval="1000"> </asp:Timer> </form> </body> </html>

加入 Timer 的 CodeBehind 程式

請在 Timer 控制項連續點兩下，加入下面伺服器時間顯示的程式碼：

01 Imports System.Drawing 02 Partial Class Timer 03 Inherits System.Web.UI.Page 04 05 'Timer 計時器的每秒 Tick 事件

06 Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Timer1.Tick

07 Dim txtTime As Label = CType(UpdatePanel1.FindControl("txtTime"), Label)

08 txtTime.Text = "伺服器現在時間是：" &

DateTime.Now.ToLongTimeString() 09 Dim Red As Integer = New Random().Next(255) 10 System.Threading.Thread.Sleep(100) '暫停 100 毫秒

11 Dim green As Integer = New Random().Next(255) 12 System.Threading.Thread.Sleep(100) '暫停 100 毫秒

13 Dim blue As Integer = New Random().Next(255) 14 System.Threading.Thread.Sleep(100) '暫停 100 毫秒

15 txtTime.BackColor = Color.FromArgb(Red, green, blue) 16 txtTime.ForeColor = Color.FromArgb(green, blue, Red) 17 End Sub 18 End Class

程式說明：

上面程式除了時間顯示，並利用亂數技巧來製造前景與背景顏色隨機

改變的效果，如此比較能和用 JavaScript 方式顯示時間有個小小區別。

6-15

圖 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

<Img />

圖 6-11 控制項配置畫面

完成後的 HTML 程式如下：

<%@ Page Language="VB" AutoEventWireup="false"

CodeFile="Timer_Gdiplus.aspx.vb" Inherits="Timer_Gdiplus" %> <%@ Register Assembly="System.Web.Extensions, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %> <!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 />圖片

設定 Trigger 事件

6-17

使用 GDI+

在此步驟將加入一個產生 GDI+ 繪圖的泛型處理常式，請在網站中加入一

個 ImageHandler.ashx 的泛型處理常式，透過泛型處理常式將 GDI+ 繪製的

圖片影像以二進位的資料流輸出，供 <IMG> 來顯示圖片，這個作法的好

處是省略了產生中介實體圖片檔的好處，不但可以省掉存檔與刪圖的麻

煩，還可以有更高的影像顯示效能，ImageHandler.ashx 程式碼如下：

01 <%@ WebHandler Language="VB" Class="imageHandler" %>

02 03 Imports System 04 Imports System.IO 05 Imports System.Web 06 Imports System.Drawing 07 Imports System.Drawing.Image 08 Imports System.Drawing.Drawing2D 09 Imports System.Enum 10 11 Public Class imageHandler : Implements IHttpHandler 12 13 Public Sub ProcessRequest(ByVal context As HttpContext) Implements

IHttpHandler.ProcessRequest 14 'context.Response.ContentType = "text/plain" 15 'context.Response.Write("Hello World") 16 17 '建立 Bitmap

18 Dim imageTime As Bitmap = New Bitmap(500, 100) 19 '從 Bitmap 取得 Image

20 Dim g As Graphics = Graphics.FromImage(imageTime) 21 '將 Bitmap 背景色填滿 LightPink 顏色

22 Dim colorPen As SolidBrush = New SolidBrush(Color.White) 23 g.FillRectangle(colorPen, 0, 0, 500, 800) 24 '定義筆刷及樣式 25 '取得 HatchStyle 列舉型別的所有成員

26 Dim obj As Array = [Enum].GetValues(GetType(HatchStyle)) 27 Dim valueStyle As Integer = New Random().Next(obj.Length) 28 Dim brushStyle As HatchStyle = CType(obj.GetValue(valueStyle),

HatchStyle) 29 Dim theBrush As HatchBrush = New HatchBrush(brushStyle,

Color.White, Color.Black) 30 31 '在 Bitmap 上繪製 GDI+時間字形

32 g.DrawString(DateTime.Now.ToLongTimeString(), New Font("Arial Black", 48), theBrush, 0, 0)

33 34 '建立 MemoryStream

35 Dim ms As New MemoryStream() 36 '將 BitMap 存入 MemoryStream

6-18

37 imageTime.Save(ms, System.Drawing.Imaging.ImageFormat.Bmp) 38 '建立二進位的 Byte 陣列

39 Dim buffer As Byte() = New Byte(ms.Length) {} 40 ms.Seek(0, SeekOrigin.Begin) 41 '將資料寫入到 buffer 之中

42 ms.Read(buffer, 0, CType(ms.Length, Integer)) 43 ms.Close() 44 '將 buffer 輸出成資料流

45 context.Response.OutputStream.Write(buffer, 0, buffer.Length) 46 '關閉資料流

47 context.Response.OutputStream.Close() 48 49 buffer = Nothing 50 imageTime.Dispose() 51 g.Dispose() 52 53 End Sub 54 55 Public ReadOnly Property IsReusable() As Boolean Implements

IHttpHandler.IsReusable 56 Get 57 Return False 58 End Get 59 End Property 60 61 End Class

程式說明：

這個影像處理常式在本書許多章節皆會運用到，它是用來讀取資料庫

二進位格式的圖片資料以顯示在前端，程式碼雖略異，但原理是一模一樣

的。如果您一時看不懂這段 GDI+ 程式沒有關係，直接 Copy 引用就可以

了，因為 ASP.NET AJAX 目的在講解 AJAX 非同步的能力，而非 GDI+ 或泛型處理常式。

設定 Timer 控制項每秒 Tick 事件程式

請在 Timer 控制項上連續點兩下，加入下列程式碼：

01 Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As

System.EventArgs) Handles Timer1.Tick 02 imgTime.Visible = True 03 imgTime.Src = "ImageHandler.ashx?" & DateTime.Now.Second 04 End Sub

6-19

以上除了 ImageHandler.ashx 的 .NET GDI+ 影像繪圖技術外，和上一

個範例幾乎完全相同，但效果卻大大不同，即使做複雜的網頁特效，也不

需動用一堆高深的 JavaScript 及 DHTML 技巧，讓您用開發 ASP.NET 程式

的方式來開發 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 中，來體驗感覺一

下兩者差異。

在 UpdatePanel 之內 在 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 程式，步驟說

明如下：

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

AJAX 非同步

一般同步

圖 6-15 GridView控制項執行畫面

祭司所舉日曆控制項與 GridView 控制項的生活化例子，原本用它們不

需要 AJAX 就能運作的，但稍微添加了 UpdatePanel 控制項的魔法，就能

將平凡無奇的東西轉變成美好的使用者經驗，故祭司建議您可以將

ASP.NET AJAX 小小的巧思融入您目前的專案，相信使用者對於網頁的評

價又能夠提升幾個百分點，這就是祭司所謂的〝生活化〞，你體會了嗎。

6-5 ASP.NET AJAX 伺服器控制項屬性與事件功

能解說 經由上面幾個範例可以體驗到 ASP.NET AJAX 初步的威力展現，然而

又不必辛苦修練 AJAX 種種絕技，以幾個伺服器控制項的搭配就能夠套用

到現有的 ASP.NET 2.0 專案之中，對於程式設計師而言不啻是一大福音，

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 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 專書，相信可以得到更加詳

盡的知識與技術。