第一篇 Ajax基礎(chǔ)
第1章 揭開Ajax的面紗
1.1 簡要介紹Ajax的發(fā)展歷程
1.1.1 Ajax概念的由來
1.1.2 Ajax的發(fā)展過程
1.1.3 Ajax技術(shù)的應(yīng)用范疇
1.1.4 Ajax的缺陷
1.2 Ajax技術(shù)的組成要素
1.2.1 JavaScript腳本語言
1.2.2 CSS樣式表
1.2.3 XMLHttpRequest數(shù)據(jù)交換對象
1.2.4 DOM文檔對象
1.2.5 Ajax組成要素間的交互原理
1.3 完美Ajax技術(shù)的實(shí)現(xiàn)步驟
1.3.1 創(chuàng)建異步調(diào)用的對象
1.3.2 加載數(shù)據(jù)所在的服務(wù)器
1.3.3 異步調(diào)用服務(wù)器狀態(tài)的變化
1.3.4 發(fā)出一個HTTP請求
1.3.5 處理異步獲取的數(shù)據(jù)
1.3.6 Ajax異步調(diào)用的完整示例
1.4 小結(jié)
第2章 Ajax技術(shù)與傳統(tǒng)技術(shù)的比較
2.1 Iframe框架方法實(shí)現(xiàn)不刷新
2.1.1 Iframe框架簡介
2.1.2 使用Iframe框架實(shí)現(xiàn)頁面不刷新技術(shù)
2.2 JavaScript方法實(shí)現(xiàn)不刷新
2.2.1 注冊客戶端腳本方法簡介
2.2.2 使用JavaScript腳本實(shí)現(xiàn)頁面局部刷新
2.3 .NET 2.0提供的CallBack回調(diào)方法
2.3.1 CallBack回調(diào)技術(shù)簡介
2.3.2 使用CallBack實(shí)現(xiàn)頁面不刷新技術(shù)
2.4 Ajax方法實(shí)現(xiàn)局部刷新
2.5 比較4種不刷新技術(shù)的優(yōu)劣
2.6 小結(jié)
第3章 Ajax目前的應(yīng)用趨勢
3.1 Ajax的優(yōu)點(diǎn)
3.1.1 相對于開發(fā)環(huán)境的優(yōu)點(diǎn)
3.1.2 相對于開發(fā)人員的優(yōu)點(diǎn)
3.2 使用Ajax技術(shù)的基本原則
3.2.1 客戶端的瀏覽應(yīng)用
3.2.2 服務(wù)器端的交付數(shù)據(jù)
3.3 通過回答問題深入了解Ajax技術(shù)
3.3.1 WinForm需要Ajax嗎？
3.3.2 Ajax安全嗎？
3.3.3 Ajax有內(nèi)存處理機(jī)制嗎？
3.3.4 Ajax異步調(diào)用返回什么類型的數(shù)據(jù)？
3.3.5 Ajax需要在IE中注冊組件嗎？
3.3.6 Ajax和Web Service的區(qū)別
3.4 目前Ajax的網(wǎng)絡(luò)應(yīng)用實(shí)例
3.4.1 Ajax實(shí)現(xiàn)即時刷新效果
3.4.2 Ajax制作仿關(guān)機(jī)效果的應(yīng)用
3.4.3 異步數(shù)據(jù)調(diào)用網(wǎng)站
3.5 小結(jié)
第二篇 CSS樣式表
第4章 創(chuàng)建CSS樣式表
4.1 CSS在Ajax中的作用
4.2 CSS樣式表的結(jié)構(gòu)
4.2.1 為頁面引入CSS樣式的方法
4.2.2 CSS的結(jié)構(gòu)規(guī)則
4.3 深入了解CSS樣式
4.3.1 CSS對字體的設(shè)置
4.3.2 CSS對背景的設(shè)置
4.3.3 CSS對文本的設(shè)置
4.3.4 CSS對布局的設(shè)置
4.4 CSS的設(shè)計工具
4.4.1 CSS設(shè)計工具TopStyle
4.4.2 在VS2005中設(shè)計CSS
4.5 小結(jié)
第5章 CSS樣式表高級應(yīng)用
5.1 利用CSS工具提高CSS制作水平
5.1.1 CSS優(yōu)化工具- CSS Compressor
5.1.2 CSS的效果查看工具-CSSVista
5.1.3 W3C對網(wǎng)站CSS的校驗(yàn)
5.2 CSS濾鏡讓樣式布局更精彩
5.2.1 了解CSS中的濾鏡
5.2.2 用CSS濾鏡制作會發(fā)光的字體
5.2.3 用CSS濾鏡演示字體的投影效果
5.3 Ajax調(diào)用CSS高級應(yīng)用范例
5.3.1 使用Ajax動態(tài)改變局部元素樣式
5.3.2 使用Ajax+CSS實(shí)現(xiàn)動態(tài)菜單效果
5.4 小結(jié)
第三篇 JavaScript編程語言基礎(chǔ)
第6章 JavaScript技術(shù)簡介
6.1 JavaScript概述
6.1.1 簡介及特點(diǎn)
6.1.2 與Java的區(qū)別
6.1.3 JavaScript在Ajax中的作用
6.2 學(xué)習(xí)Ajax必須知道的JavaScript語法
6.2.1 JavaScript數(shù)據(jù)類型
6.2.2 JavaScript的函數(shù)
6.2.3 JavaScript的語句
6.3 Ajax中主要應(yīng)用的JavaScript對象
6.3.1 window窗口對象
6.3.2 document文檔對象
6.4 JavaScript在網(wǎng)頁中的基礎(chǔ)應(yīng)用
6.4.1 JavaScript的事件機(jī)制
6.4.2 一個完整的JavaScript進(jìn)度條程序
6.5 小結(jié)
第7章 JavaScript 編輯與調(diào)試
7.1 Ajax腳本編輯工具
7.1.1 編輯工具JavaScript Editor簡介
7.1.2 下載JavaScript Editor
7.1.3 使用JavaScript Editor
7.1.4 使用JavaScript Editor創(chuàng)建Ajax代碼
7.2 JavaScript腳本的測試
7.2.1 測試工具JSUnit簡介
7.2.2 JSUnit文件內(nèi)容說明
7.2.3 使用JSUnit
7.3 JavaScript腳本的調(diào)試
7.4 小結(jié)
第四篇 XMLHttp請求和DOM對象
第8章 透析XMLHttpRequest的實(shí)質(zhì)
8.1 XMLHttpRequest介紹
8.1.1 XMLHttpRequest概述
8.1.2 XMLHttpRequest實(shí)現(xiàn)機(jī)制
8.2 Ajax異步請求XMLHTTP的結(jié)構(gòu)分析
8.2.1 Ajax中異步請求的主要方法
8.2.1.1 加載服務(wù)器的方法Open
8.2.1.2 發(fā)送請求的方法Send
8.2.1.3 異步對象的其他方法
8.2.1.4 方法使用實(shí)例
8.2.2 Ajax中異步請求的主要屬性
8.2.3 異步請求的主要事件
8.3 Ajax異步請求應(yīng)用范例
8.3.1 Ajax返回字符串?dāng)?shù)據(jù)
8.3.2 Ajax讀取XML類型數(shù)據(jù)
8.3.3 Ajax提交數(shù)據(jù)更新服務(wù)器內(nèi)容
8.4 小結(jié)
第9章 DOM的簡要介紹
9.1 認(rèn)識DOM
9.1.1 什么是DOM
9.1.2 DOM的由來
9.2 DOM標(biāo)準(zhǔn)的發(fā)展歷程
9.3 DOM在Ajax中的作用
9.4 小結(jié)
第10章 Ajax中DOM的結(jié)構(gòu)分析
10.1 DOM中的元素屬性
10.1.1 DOM中數(shù)據(jù)的標(biāo)準(zhǔn)名稱
10.1.2 用圖例認(rèn)識DOM中元素的屬性
10.2 Ajax中動態(tài)操作DOM的主要方法
10.2.1 獲取頁面中指定控件的值
10.2.2 獲取頁面中同屬性的一組控件
10.2.3 判斷頁面中控件是否嵌套
10.2.4 獲取頁面中某控件的屬性
10.2.5 動態(tài)創(chuàng)建頁面的一個元素
10.2.6 控件的替換
10.2.7 控件的復(fù)制
10.2.8 動態(tài)刪除頁面中的元素
10.3 完整的Ajax調(diào)用DOM的實(shí)例
10.4 小結(jié)
第五篇 Ajax流行組件
第11章 Ajax組件使用范例
11.1 dojo組件的應(yīng)用
11.1.1 dojo組件簡介
11.1.2 在項(xiàng)目中添加dojo組件
11.1.3 使用dojo組件實(shí)現(xiàn)卷簾效果的div隱藏
11.1.4 使用dojo組件實(shí)現(xiàn)進(jìn)度條
11.2 OpenRico框架的應(yīng)用
11.2.1 OpenRico框架簡介
11.2.2 將OpenRico框架加入到項(xiàng)目中
11.2.3 使用Open Rico實(shí)現(xiàn)可拖拽的層
11.2.4 使用Open Rico實(shí)現(xiàn)動態(tài)調(diào)色板
11.3 AjaxCaller框架的應(yīng)用
11.3.1 AjaxCaller框架簡介
11.3.2 使用AjaxCaller實(shí)現(xiàn)簡單的定時任務(wù)
11.4 Microsoft提供的Ajax框架
11.5 小結(jié)
第12章 使用Ajax+ASP.NET 2.0開發(fā)RSS閱讀器
12.1 認(rèn)識RSS
12.1.1 RSS簡介
12.1.2 RSS的作用
12.1.3 RSS的標(biāo)準(zhǔn)格式
12.1.4 RSS的工作原理
12.2 了解本例開發(fā)的RSS閱讀器
12.2.1 RSS訂閱器要使用的關(guān)鍵技術(shù)
12.2.2 RSS訂閱器要實(shí)現(xiàn)的功能
12.3 開發(fā)RSS閱讀器的前期準(zhǔn)備
12.3.1 設(shè)計存儲RSS數(shù)據(jù)需要的數(shù)據(jù)庫
12.3.2 設(shè)計RSS界面的布局
12.4 添加RSS頻道功能
12.4.1 添加頻道到數(shù)據(jù)庫的方法
12.4.2 異步發(fā)送添加請求的客戶端實(shí)現(xiàn)
12.4.3 添加請求的服務(wù)器端實(shí)現(xiàn)
12.5 Ajax實(shí)現(xiàn)RSS頻道的顯示功能
12.5.1 設(shè)計讀取數(shù)據(jù)庫內(nèi)容的方法
12.5.2 客戶端讀取頻道數(shù)據(jù)
12.5.3 服務(wù)器端返回數(shù)據(jù)
12.6 顯示頻道內(nèi)容功能
12.6.1 從網(wǎng)絡(luò)獲取頻道的內(nèi)容
12.6.2 顯示頻道內(nèi)容
12.7 小結(jié)
第13章 使用Ajax+ASP.NET 2.0開發(fā)論壇
13.1 論壇數(shù)據(jù)庫的介紹
13.1.1 設(shè)計數(shù)據(jù)庫結(jié)構(gòu)
13.1.2 設(shè)置數(shù)據(jù)表關(guān)系
13.1.3 配置數(shù)據(jù)庫Provider
13.1.4 配置Web.Config中的數(shù)據(jù)庫連接
13.1.5 添加數(shù)據(jù)庫訪問類
13.2 新用戶入口
13.2.1 用戶的注冊
13.2.2 用戶的登錄
13.3 添加論壇的類別
13.3.1．添加功能的客戶端處理
13.3.2．?dāng)?shù)據(jù)庫處理的方法設(shè)計
13.3.3．添加功能的服務(wù)器端處理
13.4 編輯論壇的類別
13.5 顯示論壇的類別
13.5.1 顯示論壇類別的客戶端處理
13.5.2 獲取論壇類別的數(shù)據(jù)庫處理方法
13.5.3 顯示論壇類別的服務(wù)器端處理
13.6 論壇的帖子詳細(xì)信息
13.6.1 帖子列表的顯示
13.6.2 帖子的發(fā)布
13.6.3 利用Ajax+XML顯示帖子的詳細(xì)信息
13.7 帖子的回復(fù)
13.7.1 添加回復(fù)功能
13.7.2 帖子回復(fù)的客戶端實(shí)現(xiàn)
13.7.3 帖子回復(fù)的數(shù)據(jù)操作方法
13.7.4 帖子回復(fù)的服務(wù)端實(shí)現(xiàn)
13.8 小結(jié)
第六篇 Microsoft ASP.NET 2.0 Ajax技術(shù)
第14章 Microsoft ASP.NET AJAX的介紹
14.1 ASP.NET AJAX 的簡介
14.2 ASP.NET AJAX 的組成
14.3 ASP.NET AJAX 的核心組件
14.3.1 核心組件ASP.NET 2.0 AJAX Extensions 1.0簡介
14.3.2 下載并安裝AJAX Extensions 1.0
14.3.3 舊版本的Microsoft AJAX如何修改
14.4 流行應(yīng)用工具包AjaxControlToolkit
14.4.1 工具包簡介
14.4.2 下載工具包
14.4.3 應(yīng)用程序中舊版本的工具包如何修改
14.5 AJAX 增值組件
14.5.1 認(rèn)識CTP
14.5.2 下載并安裝CTP
14.6 AJAX 代碼示例
14.6.1 AJAX代碼示例說明
14.6.2 安裝AJAX代碼示例
14.6.3 打開AJAX代碼示例
14.7 AJAX Library類庫
14.7.1 AJAX全局對象
14.7.2 Sys命名空間
14.7.3 Sys.Net命名空間
14.7.4 Sys.Serialization命名空間
14.7.5 Sys.Services命名空間
14.7.6 Sys.WebForms命名空間
14.7.7 Sys.UI命名空間
14.8 小結(jié)
第15章 Microsoft AJAX的核心組件
15.1 認(rèn)識AJAX Extensions 1.0核心組件
15.1.1 核心組件的內(nèi)容
15.1.2 用核心組件實(shí)現(xiàn)網(wǎng)格數(shù)據(jù)翻頁提示
15.1.3 使用核心組件需要完成的Web.Config配置
15.2 腳本控制器SciptManager
15.2.1 腳本控制器SciptManager的結(jié)構(gòu)
15.2.2 使用ScriptManager調(diào)用腳本文件
15.2.3 使用ScriptManager調(diào)用Web Service
15.2.4 動態(tài)加載ScriptManager的注冊項(xiàng)
15.2.5 使用OnAsyncPostBackError實(shí)現(xiàn)錯誤預(yù)處理
15.3 代理控制器ScriptManagerProxy
15.3.1 ScriptManagerProxy簡介
15.3.2 用實(shí)例演示ScriptManagerProxy的應(yīng)用
15.4 局部更新控件UpdatePanel
15.4.1 UpdatePanel控件的結(jié)構(gòu)
15.4.2 局部更新的簡單示例
15.4.3 用兩個控件的更新對比演示UpdatePanel的優(yōu)點(diǎn)
15.4.4 深入了解UpdatePanel的屬性UpdateMode和ChildrenAsTriggers
15.4.5 深入了解UpdatePanel的觸發(fā)器Triggers
15.4.6 動態(tài)更新UpdatePanel的內(nèi)容
15.4.7 母板頁更新內(nèi)容頁的UpdatePanel實(shí)例
15.4.8 在用戶控件中使用UpdatePanel實(shí)例
15.4.9 終止異步調(diào)用的實(shí)例
15.5 更新進(jìn)度提示控件UpdateProgress
15.5.1 UpdateProgress簡介
15.5.2 UpdateProgress簡單實(shí)例-實(shí)現(xiàn)代碼更新提示
15.5.3 UpdateProgress高級應(yīng)用-一個頁面多個更新提示
15.6 定時控件Timer
15.6.1 Timer控件簡介
15.6.2 使用Timer控件定時更新實(shí)例
15.6.3 使用一個Timer定時更新多個UpdatePanel實(shí)例
15.7 AJAX中的Web服務(wù)
15.7.1 身份驗(yàn)證服務(wù)
15.7.2 個性化配置服務(wù)
15.8 AJAX的調(diào)試與跟蹤
15.8.1 調(diào)試跟蹤需要的類庫
15.8.2 AJAX調(diào)試跟蹤實(shí)例
15.9 完整的AJAX實(shí)例-GridView局部更新
15.10 小結(jié)
第16章 ASP.NET AJAX CTP增值組件
16.1 CTP增值組件概覽
16.2 ProfileService和DragOverlayExtender控件
16.2.1 ProfileService控件介紹
16.2.2 DragOverlayExtender控件介紹
16.2.3 DragOverlayExtender和ProfileService實(shí)現(xiàn)智能拼圖案例
16.3 WebPartManager和WebPartZone控件
16.3.1 Web部件集簡介
16.3.2 WebPartManager控件簡介
16.3.3 WebPartZone控件簡介
16.3.4 AJAX WebPart控件和普通VS2005中WebPart的區(qū)別
16.3.5 WebPartZone個性化區(qū)域應(yīng)用實(shí)例
16.4 Script控件介紹
16.5 小結(jié)
第七篇 AjaxControlToolkit工具包詳解
第17章 概述
17.1 AjaxControlToolkit工具包簡介
17.2 AjaxControlToolkit工具包內(nèi)容
17.3 創(chuàng)建AJAX Control Toolkit 網(wǎng)站
17.4 AJAX-Enabled網(wǎng)站和AJAX Control Toolkit網(wǎng)站配置的區(qū)別
17.5 小結(jié)
第18章 文本輸入特效
18.1 AutoComplete自動完成控件
18.1.1 簡介
18.1.2 讀取文件實(shí)現(xiàn)自動完成功能
18.1.3 讀取數(shù)據(jù)庫實(shí)現(xiàn)自動完成功能
18.2 FilteredTextBox過濾控件
18.2.1 簡介
18.2.2 簡單實(shí)例
18.2.3 在GridView中使用FilteredTextBox實(shí)例
18.3 MaskedEdit編輯驗(yàn)證控件
18.3.1 MaskedEditExtender控件簡介
18.3.2 MaskedEditValidator驗(yàn)證控件簡介
18.3.3 MaskedEdit的使用實(shí)例
18.4 PasswordStrength密碼強(qiáng)度提示控件
18.4.1 簡介
18.4.2 綜合應(yīng)用實(shí)例
18.5 TextBoxWatermark文本框水印控件
18.5.1 簡介
18.5.2 水印文本框應(yīng)用實(shí)例
18.6 ValidatorCallout驗(yàn)證提醒控件
18.6.1 簡介
18.6.2 登錄頁面實(shí)例
18.7 小結(jié)
第19章 菜單特效
19.1 HoverMenu菜單控件
19.1.1 簡介
19.1.2 簡單實(shí)例
19.1.3 使用HoverMenu實(shí)現(xiàn)GridView的編輯刪除
19.2 PopupControl彈出式控件
19.2.1 簡介
19.2.1 簡單應(yīng)用實(shí)例
19.3 折疊菜單目錄Accordion
19.3.1 簡介
19.3.2 折疊菜單目錄項(xiàng)AccordionPane簡介
19.3.3 實(shí)現(xiàn)靜態(tài)導(dǎo)航菜單的實(shí)例
19.3.4 Accordion與UpdatePanel實(shí)現(xiàn)靜態(tài)導(dǎo)航菜單的不刷新
19.3.5 數(shù)據(jù)源控件與Accordion綁定的實(shí)例
19.3.6 動態(tài)綁定Accordion內(nèi)容的實(shí)例
19.3.7 動態(tài)添加菜單項(xiàng)AccordionPane實(shí)例
19.4 DropDown下拉菜單控件
19.4.1 簡介
19.4.2 實(shí)現(xiàn)不同的報表定義項(xiàng)
19.5 小結(jié)
第20章 面板類特效
20.1 CollapsiblePanel折疊面板控件
20.1.1 簡介
20.1.2 使用按鈕控制折疊面板
20.1.3 使用圖片控制折疊面板
20.2 DragPanel可拖拽面板控件
20.2.1 簡介
20.2.1 創(chuàng)建可拖拽面板實(shí)例
20.3 Tabs選項(xiàng)卡控件
20.3.1 簡介
20.3.2 設(shè)計簡單的選項(xiàng)卡
20.4 小結(jié)
第21章 動畫和圖像特效
21.1 Animation動畫控件
21.1.1 簡介
21.2.2 多種動畫控件的實(shí)例
21.3.3 Action行為實(shí)例
21.2 DropShadow陰影控件
21.2.1 簡介
21.2.2 簡單應(yīng)用實(shí)例
21.2.3 動態(tài)設(shè)置DropShadow控件
21.2.4 高級應(yīng)用：與Profile結(jié)合保存用戶的個性
21.3 RoundedCorners銳化邊角控件
21.3.1 簡介
21.3.2 自定義銳化效果
21.4 ToggleButton個性化按鈕控件
21.4.1 簡介
21.4.2 用ToggleButton裝飾CheckBox控件實(shí)例
21.5 UpdatePanelAnimation局部刷新動畫控件
21.5.1 簡介
21.5.2 實(shí)現(xiàn)局部更新時漸變效果
21.6 小結(jié)
第22章 其他特效
22.1 AlwaysVisibleControl始終顯示控件
22.1.1 簡介
22.1.2 制作始終顯示的消息窗口
22.1.3 制作浮動菜單
22.1.4 用AlwaysVisibleControl+Profile制作個性化浮動窗口
22.2 Calendar日歷控件
22.2.1 簡介
22.2.1 與TextBox綁定的日歷控件實(shí)例
22.2.2 日歷控件提供的多種選擇樣式和顯示格式
22.2.3 使用按鈕彈出日歷控件的實(shí)例
22.2.4 自定義日歷控件的樣式實(shí)例
22.3 CascadingDropDown級聯(lián)下拉列表控件
22.3.1 簡介
22.3.2 從XML讀取數(shù)據(jù)實(shí)例
22.3.3 從數(shù)據(jù)庫讀取數(shù)據(jù)
22.4 ConfirmButton確認(rèn)按鈕控件
22.4.1 簡介
22.4.2 簡單的刪除確認(rèn)實(shí)例
22.4.3 刪除確認(rèn)的實(shí)現(xiàn)原理
22.4.4 在GridView中實(shí)現(xiàn)刪除確認(rèn)的實(shí)例
22.5 DynamicPopulate動態(tài)填充控件
22.5.1 簡介
22.5.2 動態(tài)填充實(shí)例
22.6 ModalPopup具有關(guān)機(jī)效果的彈出式控件
22.6.1 簡介
22.6.2 簡單應(yīng)用實(shí)例
22.7 MutuallyExclusiveCheckBox互斥復(fù)選框控件
22.7.1 簡介
22.7.2 簡單應(yīng)用實(shí)例
22.8 NoBot反BOT控件
22.8.1 CAPTCHA簡介
22.8.2 NoBot反BOT控件簡介
22.8.3 簡單應(yīng)用實(shí)例
22.9 NumericUpDown加減數(shù)值控件
22.9.1 簡介
22.9.2 簡單實(shí)例
22.9.3 使用Web服務(wù)控制NumericUpDown的加減
22.10 PagingBulletedList帶項(xiàng)目符號的列表控件
22.10.1 簡介
22.10.2 顯示靜態(tài)列表內(nèi)容的實(shí)例
22.10.3 顯示動態(tài)列表內(nèi)容的實(shí)例
22.11 Rating顯示等級控件
22.11.1 簡介
22.11.2 使用Rating控件的回發(fā)事件實(shí)例
22.12 ReorderList可拖拽數(shù)據(jù)控件
22.12.1 簡介
22.12.2 實(shí)現(xiàn)數(shù)據(jù)的綁定和添加
22.13 ResizableControl可伸縮控件
22.13.1 簡介
22.13.2 更改Panel的大小
22.13.3 使用ResizableControl+AlwaysVisibleControl伸縮始終可見窗口
22.14 Slider滑桿控件
22.14.1簡介
22.14.2 用TextBox控制Slider滑桿實(shí)例
22.15 小結(jié)
第八篇 綜合案例
第23章 用ASP.NET AJAX制作留言板
23.1 留言板的功能簡介
23.2 留言板中的AJAX技術(shù)應(yīng)用概況
23.3 留言板的數(shù)據(jù)庫設(shè)計
23.3.1 配置存取ASP.NET服務(wù)的數(shù)據(jù)庫
23.3.2 創(chuàng)建留言板中的數(shù)據(jù)表
23.3.3 留言板中數(shù)據(jù)表之間的關(guān)系
23.4 留言板的登錄
23.4.1 用戶的注冊
23.4.2 實(shí)現(xiàn)關(guān)機(jī)效果的用戶登錄功能
23.5 發(fā)表留言主題的功能
23.5.1 設(shè)計發(fā)表留言功能的布局
23.5.2 實(shí)現(xiàn)發(fā)表留言功能的主要方法
23.6 瀏覽留言主題的功能
23.7 留言回復(fù)的功能
23.7.1 顯示所有的回復(fù)內(nèi)容
23.7.2 添加回復(fù)信息的功能
23.7.3 修改回復(fù)模板支持AJAX的 HoverMenu
23.7.4 為刪除按鈕添加刪除確認(rèn)功能
23.8 留言板短消息功能
23.8.1 發(fā)送短消息
23.8.2 接收短消息
23.8.3 使用AJAX AlwaysVisible始終顯示短消息
23.9 用戶自定義界面風(fēng)格功能
23.9.1 啟用ASP.NET 2.0的Profile配置
23.9.2 使用AJAX ProfileService實(shí)現(xiàn)個性化界面定制
23.10 小結(jié)
第12章 使用Ajax+ASP.NET 2.0開發(fā)RSS閱讀器
前面學(xué)習(xí)了Ajax中關(guān)鍵的基本技術(shù)，本章將根據(jù)前面所學(xué)的知識，開發(fā)一個目前比較流行的閱讀器-RSS閱讀器。同時詳細(xì)介紹了網(wǎng)絡(luò)上RSS文檔的基本結(jié)構(gòu)。在開發(fā)RSS閱讀器時，使用Ajax和ASP.NET結(jié)合的方式，即提高了開發(fā)速度，也提高了安全度。本章的講解流程如圖12-1所示。
圖12-1 開發(fā)RSS閱讀器的流程
12.1 認(rèn)識RSS
RSS是目前比較流行的一種訂閱格式，越來越多的網(wǎng)站提供RSS服務(wù)，以提高用戶和網(wǎng)站數(shù)據(jù)之間的交互。本節(jié)將詳細(xì)介紹RSS的定義及RSS的元素及格式。
12.1.1 RSS簡介
RSS（Really Simple Syndication）是一種描述和同步網(wǎng)站內(nèi)容的XML格式。RSS的中文可以有多個解釋：如簡單同步技術(shù)、RDF站點(diǎn)摘要等。通常被用于新聞和其它按時間先后順序排列的網(wǎng)站，例如Blog。
RSS頻道訂閱技術(shù)，源于幾年前的網(wǎng)站新聞頻道功能，現(xiàn)在一個RSS包含很多新聞條目，一個新聞條目的介紹可能包含新聞的全部介紹，也可能只是額外的內(nèi)容和簡短的介紹。這些條目通常都能鏈接到全部的內(nèi)容。網(wǎng)絡(luò)用戶可以在自己的客戶端，借助于支持RSS的新聞聚合工具軟件（大部分網(wǎng)站都免費(fèi)提供），在不打開網(wǎng)站內(nèi)容頁面的情況下，閱讀支持RSS輸出的網(wǎng)站內(nèi)容。
從網(wǎng)絡(luò)上，也可以下載很多功能比較全的RSS訂閱軟件，這些軟件提供很多關(guān)注度很高的網(wǎng)站地址，不需要用戶自己添加，不同領(lǐng)域的網(wǎng)址都有，方便了用戶的快速訂閱和查看。
12.1.2 RSS的作用
對于網(wǎng)絡(luò)用戶來說，使用RSS訂閱器，可以不用一個個去打開網(wǎng)站，也知道網(wǎng)站內(nèi)容更新了什么。而且使用這種閱讀器閱讀新聞的感覺，就像是在閱讀電子郵件，因?yàn)樗怀鲂侣勴?xiàng)并將新聞項(xiàng)進(jìn)行緩沖處理以便離線閱讀。目前RSS主要應(yīng)用于：
l 訂閱Blog。網(wǎng)絡(luò)用戶可以訂閱自己感興趣的文章，還可以追蹤自己閱讀過的weblogs。
l 訂閱新聞。此功能已經(jīng)從IE4開始就提供，不過使用基于XML格式的RSS技術(shù)將使訂閱功能變得更簡單。
12.1.3 RSS的標(biāo)準(zhǔn)格式
既然要求RSS閱讀器能讀取網(wǎng)絡(luò)上存在的RSS，那么RSS一定具有統(tǒng)一的標(biāo)準(zhǔn)，否則就無法統(tǒng)一訂閱，由于RSS屬于XML的一種，所以網(wǎng)絡(luò)上所有的RSS文檔都遵循XML 1.0規(guī)范。為了更方便的應(yīng)用RSS樣式，RSS提供了標(biāo)準(zhǔn)的元素以及這些元素的表現(xiàn)形式，這就是最新的RSS 2.0樣本。目前所有網(wǎng)站提供的訂閱功能，都支持RSS 2.0版本。樣本地址可參考“http://cyber.law.harvard.edu/blogs/gems/tech/rss2sample.xml”。
RSS 2.0究竟包括哪些元素呢，本節(jié)以從外到內(nèi)的順序剖析RSS的內(nèi)容。代碼清單12-1是一個簡單的RSS文件，通過了解這段代碼來認(rèn)識RSS的結(jié)構(gòu)。
代碼清單12-1 簡單的RSS文件格式
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/">
<channel>
<title>championchen的專欄 - asp.net基礎(chǔ)特性</title>
<link>http://blog.csdn.net/championchen79/category/197094.aspx</link>
<description>主要是asp.net一些基礎(chǔ)的概念東西和優(yōu)點(diǎn)</description>
<item>
<dc:creator>血海無崖</dc:creator>
<title>membership在vs2005中的應(yīng)用-Role（二）</title>
<link>http://blog.csdn.net/championchen79/archive/2006/05/12/725624.aspx</link>
<pubDate>Fri, 12 May 2006 10:26:00 GMT</pubDate>
<description>看看memberrole中role的使用。角色管理以后不發(fā)愁了。
</item>
</channel>
通過以上代碼可以看出，RSS文件主要有組節(jié)點(diǎn)：rss、channel和item。其中rss節(jié)點(diǎn)表示執(zhí)行的RSS標(biāo)準(zhǔn)的命名空間；channel節(jié)點(diǎn)表示在Blog或新聞組中的一個類別，通常被譯為頻道；item節(jié)點(diǎn)是用戶要查看的主要信息，其中包括信息的標(biāo)題、信息內(nèi)容的鏈接地址、信息的發(fā)布時間等等。
了解了RSS 2.0的基本組成后，現(xiàn)在來認(rèn)識channel節(jié)點(diǎn)內(nèi)的主要元素。表12-1列出的是RSS 2.0定義的channel中的標(biāo)準(zhǔn)元素及說明，其中前三個元素屬于必選項(xiàng)。
表12-1 channel中的元素及說明
元素名稱 說明
title 頻道的名稱
link 頻道對于網(wǎng)站的鏈接地址
description 對頻道的描述信息
language 頻道使用的語言
copyright 頻道的一些版權(quán)聲明，或免責(zé)信息
managingEditor 管理頻道的人的相關(guān)信息
webMaste 頁面主管的人的相關(guān)信息。（對于網(wǎng)站而言）
pubDate 頻道的創(chuàng)建日期
lastBuildDate 頻道的最后修改日期
image 頻道中的圖像信息
注意：由于篇幅問題，本表中并沒有給出全部的channel元素，讀者可參考網(wǎng)址“http://cyber.law.harvard.edu/blogs/gems/tech/rss2sample.xml”。
表12-2羅列的是RSS2.0定義的item內(nèi)的標(biāo)準(zhǔn)元素及說明。
表12-2 item內(nèi)的元素及說明
元素名稱 說明
title 內(nèi)容信息的標(biāo)題
link 內(nèi)容信息的鏈接地址
description 內(nèi)容信息的簡單描述
author 編輯內(nèi)容的作者
category 內(nèi)容信息的類別
comments 評論內(nèi)容的相關(guān)信息
guid 內(nèi)容唯一的標(biāo)識
pubDate 內(nèi)容的發(fā)布日期
source 內(nèi)容的來源
12.1.4 RSS的工作原理
RSS閱讀工具的工作原理如圖12-2所示。
圖12-2 工作原理圖
12.2 了解要開發(fā)的RSS閱讀器
在正式進(jìn)入開發(fā)前，先了解本例需要的技術(shù)和本例要實(shí)現(xiàn)的功能，這樣有助于提高開發(fā)的進(jìn)度和質(zhì)量。
12.2.1 RSS訂閱器要使用的關(guān)鍵技術(shù)
本例要開發(fā)的RSS訂閱器主要包括三大功能：
（1）添加RSS頻道功能。添加功能比較簡單，需要將RSS頻道的名稱和URL保存到數(shù)據(jù)庫中，并能及時更新頻道列表。
（2）顯示所有RSS頻道功能。在兩種情況下要獲取RSS頻道列表：當(dāng)用戶添加新的RSS頻道后，當(dāng)用戶刷新或加載訂閱器時。
（3）顯示頻道內(nèi)容列表。當(dāng)用戶選擇頻道列表后，系統(tǒng)需要顯示頻道的內(nèi)容，并可以鏈接到頻道所在的網(wǎng)站。當(dāng)頻道內(nèi)容沒有更新時，系統(tǒng)顯示的內(nèi)容可從本地的緩存獲取，當(dāng)有更新時，系統(tǒng)才使用Ajax技術(shù)到遠(yuǎn)程服務(wù)器獲取更新內(nèi)容。
RSS訂閱器實(shí)現(xiàn)后的效果如圖12-3所示。
圖12-3 RSS訂閱器效果圖
12.2.2 RSS訂閱器要實(shí)現(xiàn)的功能
為了快速的開發(fā)RSS閱讀器，本節(jié)先介紹開發(fā)需要了解的技術(shù)：
l 在獲取網(wǎng)絡(luò)上的RSS信息時，需要使用Ajax中的XMLHttpRequest實(shí)現(xiàn)異步數(shù)據(jù)的處理，所以要掌握XMLHttpRequest的流程及實(shí)現(xiàn)原理。
l 為了提高客戶端的響應(yīng)速度，一些與內(nèi)容無關(guān)的操作都將在JavaScript代碼中完成，所以對于JavaScript語言要有一定的了解。
l 將獲取后的數(shù)據(jù)顯示在頁面上時，為了保持頁面的局部刷新，需要使用DOM技術(shù)提取指定元素，并將其內(nèi)容更新。所以要掌握DOM的結(jié)構(gòu)，以及DOM中的一些方法和屬性。
l 為了頁面的可觀賞性，本例中很多控件使用了樣式，所以要對樣式表有一定的了解。
l 由于服務(wù)器端功能都是在ASP.NET 2.0中處理，所以還要掌握ASP.NET 2.0的數(shù)據(jù)庫處理技術(shù)。
12.3 開發(fā)RSS閱讀器的前期準(zhǔn)備
進(jìn)行正式的開發(fā)前，需要先設(shè)計數(shù)據(jù)保存的地方，然后設(shè)計界面。本節(jié)的目的就是要完成這兩部分。
12.3.1 設(shè)計存儲RSS數(shù)據(jù)需要的數(shù)據(jù)庫
要存儲的RSS數(shù)據(jù)并不是Blog或新聞組的內(nèi)容信息，而是用戶自己添加的頻道信息。本例主要保存頻道的兩個基本信息：頻道名稱和頻道URL地址。在數(shù)據(jù)庫中設(shè)計RSS數(shù)據(jù)庫的步驟如下：
（1）打開SQL Server2005。
注意：在沒有特殊聲明的情況，本例所使用的數(shù)據(jù)庫全部為SQL Server 2005。
（2）新建一個數(shù)據(jù)庫，名為“RssReader”。
（3）在數(shù)據(jù)庫中新建一個表，表的結(jié)構(gòu)如圖12-4所示。其中字段“Rss_ID”是一個int型的自增長字段。
圖12-4 RSS閱讀器的表結(jié)構(gòu)
（4）單擊工具欄的“保存”按鈕，在打開的名字窗口中，將此表命名為“RssStore”。
此時數(shù)據(jù)庫的設(shè)計已經(jīng)完成，接下來將設(shè)計實(shí)現(xiàn)RSS訂閱功能的界面。
12.3.2 設(shè)計RSS界面的布局
根據(jù)RSS訂閱器的功能要求，可以將界面的布局分為三部分：添加部分、顯示頻道列表部分和顯示頻道內(nèi)容部分。由于頻道列表和頻道內(nèi)容部分的數(shù)據(jù)都是動態(tài)獲取的，所以在其中添加控件。而添加部分需要用戶手動輸入內(nèi)容，所以需要添加三個控件，用來與用戶交互。根據(jù)對功能的理解，設(shè)計RSS訂閱器的布局，創(chuàng)建步驟如下：
（1）打開VS2005，創(chuàng)建一個網(wǎng)站，命名為“AjaxRss”。
（2）為了使界面代碼不至于太凌亂，本例將所有樣式存放在一個文件中。在網(wǎng)站根目錄下添加一個樣式表。默認(rèn)名為“StyleSheet.css”。
（3）樣式表中主要設(shè)計了body的背景色和三個div共同的樣式，詳細(xì)代碼如清單12-2所示。
代碼清單12-2 本例的樣式表代碼
body
{
background-color: #999999;
}
/*對三個div層的樣式設(shè)計*/
div.nameview
{
background-color: #cccccc;
color: #333366;
border-left-color: #cccccc;
border-bottom-color: #cccccc;
vertical-align: top;
border-top-style: groove;
border-top-color: #cccccc;
border-right-style: groove;
border-left-style: groove;
text-align: center;
border-right-color: #cccccc;
border-bottom-style: groove;
overflow:scroll;
}
（4）打開默認(rèn)生成的Default.aspx頁，此頁面在本例中是RSS閱讀器的主界面。在其中設(shè)計頁面的布局。
（5）本例中主要使用了三個div來實(shí)現(xiàn)三個不同的功能，設(shè)計效果如圖12-5所示。其中在添加功能的div中，包含兩個驗(yàn)證控件“RequiredFieldValidator”，主要是判斷用戶是否填寫了必要的信息。此控件由ASP.NET 2.0的“驗(yàn)證”控件組提供。
圖12-5 RSS閱讀器的設(shè)計界面
（6）按“Ctrl+S”保存界面的設(shè)計。
到此，RSS訂閱器的前期準(zhǔn)備已經(jīng)完成，下節(jié)將進(jìn)入正式開發(fā)階段。
12.4 添加RSS頻道功能
添加RSS頻道的功能雖然簡單，但由于牽扯到數(shù)據(jù)庫和局部更新的問題，所以為了理清開發(fā)的思路，本例給出了實(shí)現(xiàn)添加功能的流程，如圖12-6所示。
圖12-6 實(shí)現(xiàn)添加功能的流程
12.4.1 添加頻道到數(shù)據(jù)庫的方法
為了方便的將數(shù)據(jù)添加到數(shù)據(jù)庫中，需要設(shè)計一個RSS操作類，其中包含一個實(shí)現(xiàn)添加功能的方法，實(shí)現(xiàn)此功能的步驟如下：
（1）打開Web.Config文件。
（2）添加數(shù)據(jù)庫連接字符串，否則無法建立與數(shù)據(jù)庫的連接，字符串如下，其中包括了連接字符串的名稱、要連接的服務(wù)器和數(shù)據(jù)庫等信息。
<connectionStrings >
<add name="connRSS" connectionString="Data Source=CGJ-57F90CCA64C\SQLEXPRESS;Initial Catalog=RssReader;Integrated Security=True"/>
</connectionStrings>
（3）在網(wǎng)站根目錄下添加一個類，命名為“RssManager.cs”，當(dāng)單擊“添加”按鈕時，系統(tǒng)會詢問是否將類存放在“App_Code”目錄下，選擇“是”，因?yàn)榇四夸浵碌念愒诒４婧笞詣泳幾g。
（4）在類中首先設(shè)置一個變量，用來獲取連接字符串。本例使用的是ConfigurationManager類中的 “ConnectionStrings”方法。代碼如下：
private string connectionString = ConfigurationManager.ConnectionStrings["connRSS"].ConnectionString;
（5）由于本例需要使用操作SQL Server的類，所以必須引用命名空間“SqlClient”，引用代碼如下：
using System.Data.SqlClient;
（6）設(shè)計添加頻道的方法“AddRss”，代碼如清單12-3所示。
代碼清單12-3 添加頻道的方法
/// <summary>
/// 定義添加rss到數(shù)據(jù)庫中的方法
/// </summary>
/// <param name="name">rss的名字</param>
/// <param name="url">rss的鏈接地址</param>
public void AddRss(string name,string url)
{
//初始化sql命令
SqlCommand cmd = new SqlCommand();
//在一個范圍內(nèi)執(zhí)行sql命令，范圍結(jié)束后，釋放所有對象
using (SqlConnection conn = new SqlConnection(connectionString))
{
//定義命令屬性
//判斷數(shù)據(jù)庫連接狀態(tài)
if (conn.State != ConnectionState.Open)
conn.Open();
cmd.Connection = conn;
cmd.CommandType = CommandType.Text;
cmd.CommandText = "INSERT INTO RssStore VALUES('" +name +"','" +url +"')";
//執(zhí)行命令
cmd.ExecuteNonQuery();
}
}
（7）按“Ctrl+S”保存設(shè)計的代碼。
12.4.2 異步發(fā)送添加請求的客戶端實(shí)現(xiàn)
在用戶單擊“添加RSS”按鈕后，為了提高運(yùn)行速度，本例將使用XMLHttpRequest實(shí)現(xiàn)數(shù)據(jù)的提交工作，異步功能實(shí)現(xiàn)的原理如圖12-7所示。
圖12-7 異步提交的原理圖
實(shí)現(xiàn)的步驟如下：
（1）打開Default.aspx頁。
（2）為“添加RSS”按鈕添加click事件，事件調(diào)用方法“addrss”。
（3）在head元素內(nèi)添加腳本代碼，方法“addrss”的代碼如清單12-4所示。其中需要創(chuàng)建一個XMLHttpRequest對象。
代碼清單12-4 添加按鈕調(diào)用的方法
<script type="text/javascript">
var xmlhttp;
function createXMLHttp()
{
//未考慮除IE外其他瀏覽器-創(chuàng)建異步對象
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
function addrss()
{
createXMLHttp();
//判斷異步對象狀態(tài)的方法
xmlhttp.onreadystatechange=statechange;
//獲取添加的RSS屬性
var name=document.getElementById("txtRssName").value;
var url=document.getElementById("txtRssUrl").value;
//加載服務(wù)器頁并發(fā)送數(shù)據(jù)請求
xmlhttp.open("GET","addRssNamePage.aspx?name="+escape(name) +"&url="+escape(url),true);
xmlhttp.send(null);
}
</script>
注意：傳遞參數(shù)時，如果參數(shù)為中文，必須使用escape方法包裝。
（4）在創(chuàng)建XMLHttpRequest對象的過程中，使用方法“statechange”判斷事件的狀態(tài)，此方法的設(shè)計代碼如清單12-5所示。主要目的：是當(dāng)請求成功完成后，調(diào)用方法“handleStr”實(shí)現(xiàn)頁面的局部刷新。
代碼清單12-5 判斷請求狀態(tài)的方法
function statechange()
{
//如果請求已經(jīng)完成
if(xmlhttp.readystate==4)
{
//判斷請求是否成功返回
if(xmlhttp.status==200)
{
//返回的是字符串，進(jìn)行處理后顯示在客戶端
handleStr(xmlhttp.responseText);
}
}
（5）設(shè)計實(shí)現(xiàn)局部刷新的方法，代碼如清單12-6所示。
代碼清單12-6 更新頻道列表的方法
function handleStr(list)
{
//獲取頻道列表所在的div
var oldcontent=document.getElementById("namelist").innerHTML;
//更新div中的內(nèi)容
var newcontent=oldcontent+list;
//顯示新的div
document.getElementById("namelist").innerHTML=newcontent;
}
以上是客戶端需要實(shí)現(xiàn)的技術(shù)，那么當(dāng)XMLHttpRequest對象請求服務(wù)器處理時，應(yīng)該怎么在服務(wù)器端實(shí)現(xiàn)處理功能呢？
12.4.3 添加請求的服務(wù)器端實(shí)現(xiàn)
當(dāng)處理完客戶端的技術(shù)后，可以發(fā)現(xiàn)，客戶端要求服務(wù)器端返回的是字符串，本例就介紹如何返回客戶端需要的數(shù)據(jù)內(nèi)容，同時又將數(shù)據(jù)添加到服務(wù)器中。
（1）在網(wǎng)站根目錄下，添加一個Web窗體，命名為“addRssNamePage.aspx”。
（2）將頁面的HTML源代碼界面內(nèi)容全部刪除，只保留最上面一行代碼，此操作主要是刪除掉返回操作中的多余字符。保留代碼如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="addRssNamePage.aspx.cs" Inherits="addRssNamePage" %>
（3）按F7進(jìn)入頁面的代碼視圖。
（4）在Page_Load事件中處理兩個功能：返回客戶端數(shù)據(jù)和將數(shù)據(jù)添加到數(shù)據(jù)庫。代碼如清單12-7所示。注意返回客戶端的是一段用字符串連接的HTML代碼。
代碼清單12-7 服務(wù)器端處理添加數(shù)據(jù)的代碼
protected void Page_Load(object sender, EventArgs e)
{
//獲取頁面?zhèn)鬟f參數(shù)并參加記錄到數(shù)據(jù)庫中
//獲取參數(shù);
string name = Request.QueryString["name"];
string url = Request.QueryString["url"];
//先生成返回的字符串
StringBuilder mystr = new StringBuilder();
mystr.Append("<a href=javascript:loadContent(' "+url + "');>"+name+"</a>" );
mystr.Append("<br/>");
Response.Write(mystr);
//后臺再處理添加到數(shù)據(jù)庫的操作
RssManager myrss = new RssManager();
myrss.AddRss(name, url);
}
（5）按“Ctrl+S”保存代碼。
（6）將“Default.aspx”設(shè)置為起始頁，按F5運(yùn)行程序，測試頻道的添加功能。當(dāng)輸入頻道名稱和頻道URL后，單擊“添加RSS”功能，此時運(yùn)行的速度很快，頻道列表中立刻顯示出了剛剛添加的頻道名稱。運(yùn)行效果如圖12-8所示。
圖12-8 添加頻道成功后效果圖
12.5 Ajax實(shí)現(xiàn)RSS頻道的顯示功能
當(dāng)頁面加載時，要求在頻道列表中，顯示數(shù)據(jù)庫中所有的頻道名稱，這就是RSS頻道的顯示功能。本節(jié)主要實(shí)現(xiàn)此功能。
12.5.1 設(shè)計讀取數(shù)據(jù)庫內(nèi)容的方法
將數(shù)據(jù)庫內(nèi)容讀取出來，首先要設(shè)計讀取數(shù)據(jù)的方法。本例的方法最好添加到RssManager管理類中。實(shí)現(xiàn)方法的步驟如下：
（1）打開App_Code目錄下的“RssManager”管理類文件。
（2）在類中添加方法“GetRssName”，主要是從數(shù)據(jù)庫中讀取頻道名稱，并將返回結(jié)果保存在一個數(shù)組中。注意使用數(shù)組“ArrayList”時，必須引用命名空間“using System.Collections;”。具體實(shí)現(xiàn)代碼如清單12-8所示。
代碼清單12-8 從數(shù)據(jù)庫中獲取數(shù)據(jù)的方法
public string[] GetRssName()
{
//初始化sql命令
SqlCommand cmd = new SqlCommand();
//在一個范圍內(nèi)執(zhí)行sql命令，范圍結(jié)束后，釋放所有對象
using (SqlConnection conn = new SqlConnection(connectionString))
{
//判斷數(shù)據(jù)庫連接狀態(tài)
if (conn.State != ConnectionState.Open)
conn.Open();
cmd.Connection = conn;
//定義命令屬性
cmd.CommandType = CommandType.Text;
cmd.CommandText = "SELECT Rss_Name,Rss_URL FROM RssStore";
//執(zhí)行命令并返回數(shù)據(jù)
SqlDataReader rdr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
//定義一個數(shù)組用來返回
ArrayList myarray = new ArrayList();
//循環(huán)判斷是否有數(shù)據(jù)
while(rdr.Read())
{
//如果有數(shù)據(jù)，存放在數(shù)組中，其中數(shù)據(jù)之間用逗號間隔
myarray.Add(rdr.GetString(0) + "," + rdr.GetString(1));
}
return myarray;
} }
（3）按“Ctrl+S”保存代碼的設(shè)計。
12.5.2 客戶端讀取頻道數(shù)據(jù)
在客戶端獲取服務(wù)器返回的數(shù)據(jù)，最好的方法同樣是使用XMLHttpRequest對象。實(shí)現(xiàn)客戶端讀取的步驟如下：
（1）打開“Default.aspx”頁。
（2）由于列表是頁面一加載時就顯示的內(nèi)容，所以需要將方法添加到body的onclick事件中。主要代碼如下，調(diào)用的方法是“getRssName”。
<body onload="getRssName()">
（3）在腳本文件中添加方法“getRssName”，主要代碼如清單12-9所示。其中判斷XMLHttpRequest的狀態(tài)的事件是“statechangeLoad”。
代碼清單12-9 客戶端從服務(wù)器端獲取數(shù)據(jù)的方法
//當(dāng)頁面加載時，需要顯示所有的rss列表
function getRssName()
{
createXMLHttp();
xmlhttp.onreadystatechange=statechangeLoad;
//加載服務(wù)器頁并發(fā)送數(shù)據(jù)請求
xmlhttp.open("GET","viewRssNamePage.aspx",true);
xmlhttp.send(null);
}
（4）事件“statechangeLoad”用來判斷異步對象的狀態(tài)，當(dāng)對象處于成功完成的狀態(tài)時，使用DOM對象更改列表div的內(nèi)容。詳細(xì)代碼如清單12-10所示。
代碼清單12-10 判斷狀態(tài)的事件
function statechangeLoad()
{
//如果請求已經(jīng)完成
if(xmlhttp.readystate==4)
{
//判斷請求是否成功返回
if(xmlhttp.status==200)
{
//返回的是字符串，進(jìn)行處理后顯示在客戶端
document.getElementById("namelist").innerHTML=xmlhttp.responseText;
}
}
}
（5）按“Ctrl+S”保存代碼的修改。
12.5.3 服務(wù)器端返回數(shù)據(jù)
客戶端和數(shù)據(jù)庫讀取方法都已經(jīng)設(shè)計完畢，本節(jié)將實(shí)現(xiàn)從服務(wù)器端返回數(shù)據(jù)給客戶端。詳細(xì)的實(shí)現(xiàn)步驟如下：
（1）在網(wǎng)站根目錄下，添加一個Web窗體，命名為“viewRssNamePage.aspx”。
（2）清除“viewRssNamePage.aspx”頁的HTML源代碼，除第一行外的全部刪除。
（3）按F7進(jìn)入頁面的代碼視圖。
（4）在Page_Load事件中，書寫返回客戶端的代碼，具體如清單12-11所示。注意返回的字符串中包含調(diào)用腳本方法的代碼。
代碼清單12-11 返回客戶端頻道列表的代碼
protected void Page_Load(object sender, EventArgs e)
{
//從數(shù)據(jù)庫中獲取返回的數(shù)據(jù)。
RssManager myrss = new RssManager();
//使用操作類返回數(shù)組
ArrayList mydata = myrss.GetRssName();
string[] splitdata=new string[2];
//遍歷數(shù)組，組合成系統(tǒng)需要的字符串
StringBuilder mystr = new StringBuilder();
for (int i = 0; i < mydata.Count; i++)
{
//用逗號分隔數(shù)據(jù),注意此處逗號應(yīng)為字符，所以用單引號
splitdata=mydata[i].ToString().Split(',');
mystr.Append("<a href=javascript:loadContent('"+splitdata[1]+"');>" + splitdata[0]+"</a>");
mystr.Append("</br>");
}
//返回需要的數(shù)據(jù)
Response.Write(mystr);
}
（5）按“Ctrl+S”保存代碼的修改。
（6）測試頻道列表的讀取功能，按F5運(yùn)行程序，當(dāng)頁面加載后，就可以看到頻道列表已經(jīng)顯示出了所有的頻道名稱，通過加載速度就可以看出Ajax的優(yōu)勢。顯示效果如圖12-9所示。
圖12-9 頻道列表的顯示效果圖
12.6 顯示頻道內(nèi)容功能
獲取頻道的內(nèi)容主要是根據(jù)頻道的地址，然后使用XMLHttpRequest對象從網(wǎng)絡(luò)獲取數(shù)據(jù)，返回字符串或者XML數(shù)據(jù)。本節(jié)就介紹如何顯示頻道的內(nèi)容。
12.6.1 從網(wǎng)絡(luò)獲取頻道的內(nèi)容
從網(wǎng)絡(luò)讀取數(shù)據(jù)，需要先向網(wǎng)絡(luò)請求頻道的內(nèi)容。創(chuàng)建請求的步驟如下：
（1）在顯示頻道列表時，使用了讀取頻道內(nèi)容的方法“l(fā)oadContent”，當(dāng)時沒有設(shè)計代碼，現(xiàn)在實(shí)現(xiàn)這個方法的代碼，如清單12-12所示。其中設(shè)計了一段提示代碼，當(dāng)系統(tǒng)數(shù)據(jù)沒有加載完成時，出現(xiàn)提示如圖12-10所示。
代碼清單12-12 讀取內(nèi)容的方法
//加載rss內(nèi)容的方法
function loadContent(url)
{
//提示信息
document.getElementById("rsscontent").innerHTML="請稍候，正在加載.......";
//創(chuàng)建異步對象
createXMLHttp();
//判斷異步對象狀態(tài)的方法
xmlhttp.onreadystatechange=viewContent;
//加載服務(wù)器頁并發(fā)送數(shù)據(jù)請求-url為用戶選擇的rss頻道路徑
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
圖12-10 頻道未加載完時的等待效果圖
（2）上述代碼中使用了創(chuàng)建XMLHttpRequest對象的方法“createXMLHttp”，此方法的代碼如下：
var xmlhttp;
function createXMLHttp()
{
//未考慮除IE外其他瀏覽器-創(chuàng)建異步對象
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
（3）由于本示例屬于動態(tài)內(nèi)容，所以沒有任何數(shù)據(jù)庫和服務(wù)端處理的代碼。按“Ctrl+S”保存讀取的代碼。對于狀態(tài)的判斷以及客戶端的顯示，將在下一節(jié)介紹。
12.6.2 顯示頻道內(nèi)容
當(dāng)網(wǎng)絡(luò)請求完成并且成功后，需要設(shè)置顯示內(nèi)容的div，一是要將內(nèi)容顯示在div中，二是要設(shè)置顯示的格式，本例的格式在前期定義樣式表時已經(jīng)完成，此處沒有變化。實(shí)現(xiàn)顯示頻道內(nèi)容功能的步驟如下：
（1）打開Default.aspx頁。
（2）在HTML源代碼中XMLHttpRequest對象的狀態(tài)判斷方法“FillList”，代碼如清單12-13所示。
代碼清單12-13 顯示內(nèi)容的方法
//顯示div內(nèi)容的方法
function FillList( listdom)
{
var str="";
var list=new Array();
list=listdom.getElementsByTagName("item");
//本例使用字符串的形式將內(nèi)容連接，也可使用DOM創(chuàng)建元素的形式
for(var i=0;i<list.length;i++)
{
//顯示名稱
var sondom=list[i].childNodes;
var name,link,desc;
for(var j=0;j<sondom.length;j++)
{
if(sondom[j].nodeName=="title")
{
name=sondom[j].nodeTypedValue;
}
else if(sondom[j].nodeName=="link")
{
link=sondom[j].nodeTypedValue;
}
else if(sondom[j].nodeName=="description")
{
desc=sondom[j].nodeTypedValue;;
}
}
str= str +"<a href='" +link+ "'>" +name+"</a> <br />";
//顯示描述信息me
str=str+"<p>"+desc+"</p><br />";
}
//在div中顯示
document.getElementById("rsscontent").innerHTML=str;
}
（3）按“Ctrl+S”保存代碼的設(shè)計。
此時全部的功能已經(jīng)設(shè)計完畢，按F5運(yùn)行程序，單擊頻道列表中的某項(xiàng)，查看頻道的內(nèi)容，效果如圖12-11所示。
圖12-11 頻道列表的內(nèi)容顯示效果圖
12.7 小結(jié)
本章講解了RSS的基本知識，并詳細(xì)介紹了實(shí)現(xiàn)RSS訂閱器的步驟，其中主要設(shè)計了三個主要功能：添加RSS、顯示RSS列表和展示RSS頻道的內(nèi)容。在實(shí)現(xiàn)功能的過程中，使用了Ajax技術(shù)和ASP.NET服務(wù)器端相結(jié)合的方式。這種技術(shù)提高了客戶端的響應(yīng)速度，也實(shí)現(xiàn)了局部刷新的功能，是一個典型的Ajax應(yīng)用的例子。
本章復(fù)習(xí)了前面介紹的Ajax的主要技術(shù)：DOM、CSS、XMLHttpRequest和JavaScript。這些都是客戶端技術(shù)，服務(wù)器端開發(fā)使用的是VS2005中的ASP.NET 2.0。
第21章 動畫和圖像特效
本章主要介紹一些具備特殊效果的組件，如動畫、陰影、邊角銳化等，AjaxControlToolkit工具包的主要功能就是提供一些個性化的組件，讓網(wǎng)站界面美觀。
本章主要介紹的組件有：Animation、DropShadow、RoundedCorners、ToggleButton和UpdatePanelAnimation。
21.1 Animation動畫控件
Animation是非常有特色的動畫控件，適合網(wǎng)站的裝飾，本節(jié)主要介紹在AJAX中包含的多種動畫效果，并以實(shí)例的形式顯示如何應(yīng)用這些特效。
21.1.1 簡介
Animation控件的使用非常特殊，在VS2005中設(shè)計此控件時，并沒有提供智能提示功能，所以在學(xué)習(xí)Animation控件的時候，需要掌握各個控件的各個屬性，因?yàn)槊總€小的動畫控件，其屬性又各不相同。
雖然Animation提供了很多小的動畫控件，但這些控件在使用時，必須遵守代碼清單21-1所示的語法。
代碼清單21-1 Animation控件的使用語法
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="ctrl">
<Animations>
<OnLoad> ... </OnLoad>
<OnClick> ... </OnClick>
<OnMouseOver> ... </OnMouseOver>
<OnMouseOut> ... </OnMouseOut>
<OnHoverOver> ... </OnHoverOver>
<OnHoverOut> ... </OnHoverOut>
</Animations>
</ajaxToolkit:AnimationExtender>
其中各屬性的說明如下：
l OnLoad：表示要觸發(fā)的事件是加載頁面時。
l OnClick：表示要觸發(fā)的事件是單擊控件時。
l OnMouseOver：表示要觸發(fā)的事件是鼠標(biāo)滑過時。
l OnMouseOut：表示要觸發(fā)的事件是鼠標(biāo)移走時。
l OnHoverOver：與OnMouseOver類似，對特定控件而言。
l OnHoverOut：與OnMouseOut類似，對特定控件而言。
Animation的動畫效果如圖21-1所示。
圖21-1 Animation的動畫效果
21.2.2 多種動畫控件的實(shí)例
在Animation控件內(nèi)，又包含了多個小的控件，為了清晰的掌握這些控件的使用，本節(jié)將為常用的幾個小動畫控件，分別做一個實(shí)例。
1．變色顏色的動畫效果
本例要實(shí)現(xiàn)的是當(dāng)鼠標(biāo)滑過Panel時，Panel的顏色發(fā)生變化，當(dāng)鼠標(biāo)移走時，Panel的顏色又發(fā)生了變化，這需要“Color Animation”。Color Animation動畫的屬性主要有4個：
l Duration：動畫顯示效果的時間間隔。
l PropertyKey：要設(shè)置的屬性值。
l StartValue：屬性的開始值。
l EndValue：屬性的結(jié)束值。
本例的演示步驟如下：
（1）打開VS2005，新建一個AJAX Control Tookit網(wǎng)站，命名為“AjaxAnimationCtrl”。
（2）在網(wǎng)站根目錄下，添加一個Web窗體，命名為“AnimationSample_1.aspx”。
（3）切換到窗體的設(shè)計視圖，添加一個ScriptManager。實(shí)現(xiàn)AJAX框架類的注冊。
（4）再添加一個AnimationExtender和一個Panel。設(shè)置AnimationExtender的“TargetControlID”屬性為Panel的ID“Panel1”。
（5）設(shè)計Panel的樣式，源代碼如下所示。
<asp:Panel ID="Panel1" runat="server" BackColor="#FFFFC0" Height="104px" Width="249px">
Animation第一個實(shí)例</asp:Panel>
（6）在AnimationExtender內(nèi)設(shè)計動畫效果，本例實(shí)現(xiàn)的是顏色的變化，使用的是“Color Animation”。最終動畫效果設(shè)計如清單21-2所示。
代碼清單21-2Animation顏色變化的設(shè)計代碼
<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">
<Animations >
<OnMouseOver>
<Color Duration=".2" PropertyKey="color" StartValue="#FFFFFF" EndValue="#FF0000" />
</OnMouseOver>
<OnMouseOut>
<Color Duration=".2" PropertyKey="color" StartValue="#FF0000" EndValue="#FFFFFF" />
</OnMouseOut>
</Animations>
（7）切換到設(shè)計視圖，最終效果如圖21-2所示。
圖21-2 動畫效果設(shè)計視圖
（8）按“Ctrl+S”保存所有的設(shè)計。
（9）將此頁設(shè)置為起始頁，按F5運(yùn)行程序，當(dāng)鼠標(biāo)滑過Panel時，可以發(fā)現(xiàn)Panel的顏色發(fā)生了變化。
2．淡入淡出合并的動畫效果
淡入淡出效果是網(wǎng)站中經(jīng)?？吹降男Ч?，本例使用“Fade Animation”來實(shí)現(xiàn)這樣的效果，“Fade Animation”的屬性主要有4個：
l duration：動畫效果的時間間隔。
l Fps：幀/秒的顯示速度。
l maximumOpacity：最大透明度。
l minimumOpacity：最小透明度。
本實(shí)例的演示步驟如下：
（1）打開網(wǎng)站“AJAXAnimationCtrl”。
（2）在網(wǎng)站根目錄下，添加一個Web窗體，命名為“AnimationSample_2.aspx”。
（3）切換到窗體的設(shè)計視圖，添加一個ScriptManager。實(shí)現(xiàn)AJAX框架類的注冊。
（4）再添加一個AnimationExtender和一個Panel。設(shè)置AnimationExtender的“TargetControlID”屬性為Panel的ID“Panel1”。
（5）設(shè)計Panel的樣式，源代碼如下所示。
<asp:Panel ID="Panel1" runat="server" BackColor="#E0E0E0" Height="104px" Width="249px">
Animation第二個實(shí)例</asp:Panel>
（6）在AnimationExtender內(nèi)設(shè)計動畫效果，本例實(shí)現(xiàn)的是淡入淡出效果，使用的是“Fade Animation”。最終動畫效果設(shè)計如清單21-3所示。
代碼清單21-3 Animation淡入淡出的設(shè)計代碼
<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">
<Animations >
<OnMouseOver>
<Fade duration="1" Fps="20" maximumOpacity="0.8" minimumOpacity="0.2" />
</OnMouseOver>
<OnMouseOut >
<Fade duration="1" Fps="20" maximumOpacity="0.6" minimumOpacity="0.2" />
</OnMouseOut>
</Animations>
</ajaxToolkit:AnimationExtender>
（7）切換到設(shè)計視圖，最終效果如圖21-3所示。
圖21-3 動畫效果設(shè)計視圖
（8）按“Ctrl+S”保存所有的設(shè)計。
（9）將此頁設(shè)置為起始頁，按F5運(yùn)行程序，當(dāng)鼠標(biāo)滑過Panel時，可以發(fā)現(xiàn)Panel的淡入淡出效果。
3．淡入和淡出分開的動畫效果
上一個實(shí)例中，當(dāng)鼠標(biāo)滑過時，其實(shí)是完成兩步：淡入和淡出。通常在實(shí)際應(yīng)用中，淡入和淡出是分開的。本例要演示的是當(dāng)鼠標(biāo)滑過時，實(shí)現(xiàn)淡入效果，當(dāng)鼠標(biāo)移出時，實(shí)現(xiàn)淡出效果。
此功能需要使用“FadeIn Animation”和“FadeOut Animation”，其中兩個動畫控件有著相同的屬性，屬性內(nèi)容如下：
l duration：動畫效果的時間間隔。
l Fps：幀/秒的顯示速度。
l maximumOpacity：最大透明度。
l minimumOpacity：最小透明度。
實(shí)例的演示步驟如下：
（1）打開網(wǎng)站“AJAXAnimationCtrl”。
（2）在網(wǎng)站根目錄下，添加一個Web窗體，命名為“AnimationSample_3.aspx”。
（3）切換到窗體的設(shè)計視圖，添加一個ScriptManager。實(shí)現(xiàn)AJAX框架類的注冊。
（4）再添加一個AnimationExtender和一個Panel。設(shè)置AnimationExtender的“TargetControlID”屬性為Panel的ID“Panel1”。
（5）設(shè)計Panel的樣式，源代碼如下所示。
<asp:Panel ID="Panel1" runat="server" BackColor="#C0C0FF" Height="136px" Width="286px">
Animation第三個實(shí)例</asp:Panel>
（6）在AnimationExtender內(nèi)設(shè)計動畫效果，本例實(shí)現(xiàn)的是淡入淡出效果，使用的是“FadeIn Animation”和“FadeOut Animation”。最終動畫效果設(shè)計如清單21-4所示。
代碼清單21-4 Animation淡入淡出分開的設(shè)計代碼
<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">
<Animations >
<OnMouseOver>
<FadeIn duration="1" Fps="20" maximumOpacity="0.8" minimumOpacity="0.2" />
</OnMouseOver>
<OnMouseOut >
<FadeOut duration="1" Fps="20" maximumOpacity="0.6" minimumOpacity="0.2" />
</OnMouseOut>
</Animations>
</ajaxToolkit:AnimationExtender>
（7）切換到設(shè)計視圖，最終效果如圖21-4所示。
圖21-4 動畫效果設(shè)計視圖
（8）按“Ctrl+S”保存所有的設(shè)計。
（9）將此頁設(shè)置為起始頁，按F5運(yùn)行程序，當(dāng)鼠標(biāo)滑過Panel時，可以發(fā)現(xiàn)Panel的淡入效果，當(dāng)鼠標(biāo)滑出時，可以看到Panel的淡出效果。
4．可伸縮的動畫效果
本例要實(shí)現(xiàn)的效果是，當(dāng)單擊Panel時，變化Panel的高度和寬度。這需要使用“Resize Animation”動畫控件。其屬性主要有5個：
l duration：動畫效果的時間間隔。
l Fps：幀/秒的顯示速度。
l width：變化后的寬度。
l height：變化后的高度。
l unit：高度和寬度的單位，通常為“px”。
本例的演示步驟如下：
（1）打開網(wǎng)站“AJAXAnimationCtrl”。
（2）在網(wǎng)站根目錄下，添加一個Web窗體，命名為“AnimationSample_4.aspx”。
（3）切換到窗體的設(shè)計視圖，添加一個ScriptManager。實(shí)現(xiàn)AJAX框架類的注冊。
（4）再添加一個AnimationExtender和一個Panel。設(shè)置AnimationExtender的“TargetControlID”屬性為Panel的ID“Panel1”。
（5）設(shè)計Panel的樣式，源代碼如下所示。
<asp:Panel ID="Panel1" runat="server" BackColor="Lavender" Height="121px" Width="322px">
Animation第四個實(shí)例</asp:Panel>
（6）在AnimationExtender內(nèi)設(shè)計動畫效果，本例實(shí)現(xiàn)的是變化高寬效果，使用的是“Resize Animation”。最終動畫效果設(shè)計如清單21-5所示。注意使用的事件是“OnClick”。
代碼清單21-5 Animation變化高寬的設(shè)計代碼
<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">
<Animations >
<OnClick>
<Resize duration=".1" Fps="20" width="300" height="150" unit="px" />
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
（7）切換到設(shè)計視圖，最終效果如圖21-5所示。
圖21-5 動畫效果設(shè)計視圖
（8）按“Ctrl+S”保存所有的設(shè)計。
（9）將此頁設(shè)置為起始頁，按F5運(yùn)行程序，當(dāng)單擊Panel時，可以發(fā)現(xiàn)Panel的高度和寬度都發(fā)生了變化。
21.3.3 Action行為實(shí)例
Animation控件除了具備一些小的動畫控件外，還支持幾種特殊的Action行為，如控制按鈕不可用、隱藏按鈕和設(shè)置透明度等。本節(jié)重點(diǎn)介紹三種行為：EnableAction、StyleAction和OpacityAction。
1．設(shè)置動畫目標(biāo)控件不可用
EnableAction用來設(shè)置控件為不可用狀態(tài)，由于“Disabled”屬性為HTML控件所有，所以在使用此行為時，目標(biāo)控件應(yīng)該為HTML控件。實(shí)例的演示步驟如下：
（1）打開網(wǎng)站“AJAXAnimationCtrl”。
（2）在網(wǎng)站根目錄下，添加一個Web窗體，命名為“Animation_Action1.aspx”。
（3）切換到窗體的設(shè)計視圖，添加一個ScriptManager。實(shí)現(xiàn)AJAX框架類的注冊。
（4）再添加一個AnimationExtender和一個HTML Button。設(shè)置Button的屬性如下所示。
<input type="button" id="btn" value="單擊不可用" runat="server" />
（5）在AnimationExtender內(nèi)設(shè)計動畫效果，本例實(shí)現(xiàn)的是單擊按鈕后，此按鈕變?yōu)椴豢捎脿顟B(tài)，使用的是“EnableAction”。最終動畫效果設(shè)計如清單21-6所示。注意使用的事件是“OnClick”。
代碼清單21-6 Animation的EnableAction行為設(shè)計
<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server"
TargetControlID="btn">
<Animations >
<OnClick>
<EnableAction Enabled="false" />
</OnClick></Animations>
</ajaxToolkit:AnimationExtender>
（6）按“Ctrl+S”保存所有的代碼。
（7）將此頁設(shè)置為起始頁，按F5運(yùn)行程序，當(dāng)單擊按鈕時，可以發(fā)現(xiàn)按鈕的狀態(tài)，迅速變成了不可用。
2．設(shè)置動畫目標(biāo)控件的屬性
StyleAction行為用來設(shè)計控件的一些屬性，例如設(shè)置控件的背景色、高度等等，其包括3個屬性：
l AnimationTarget：要實(shí)現(xiàn)特效的控件。
l Attribute：控件的某一屬性，如display。
l Value：屬性的值，如“None”。
實(shí)例的演示步驟如下：
（1）打開網(wǎng)站“AJAXAnimationCtrl”。
（2）在網(wǎng)站根目錄下，添加一個Web窗體，命名為“Animation_Action2.aspx”。
（3）切換到窗體的設(shè)計視圖，添加一個ScriptManager。實(shí)現(xiàn)AJAX框架類的注冊。
（4）再添加一個AnimationExtender和一個HTML Button。設(shè)置Button的屬性如下所示。
<input type="button" id="btn" value="單擊隱藏" runat="server" />
（5）在AnimationExtender內(nèi)設(shè)計動畫效果，本例實(shí)現(xiàn)的是單擊按鈕后，此按鈕不再顯示，使用的是“StyleAction”。最終動畫效果設(shè)計如清單21-7所示。注意使用的事件是“OnClick”。
代碼清單21-7 Animation的StyleAction行為設(shè)計
<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server"
TargetControlID="btn">
<Animations >
<OnClick>
<StyleAction AnimationTarget="btn" Attribute="display" Value="none"/>
</OnClick></Animations>
</ajaxToolkit:AnimationExtender>
（6）按“Ctrl+S”保存所有的代碼。
（7）將此頁設(shè)置為起始頁，按F5運(yùn)行程序，當(dāng)單擊按鈕時，可以發(fā)現(xiàn)按鈕消失了。
3．設(shè)置動畫目標(biāo)控件的透明度
OpacityAction是控制透明度的行為。其主要包括3個屬性：
l duration：動畫效果的時間間隔。
l Fps：幀/秒的顯示速度。
l opacity：透明度的值。
實(shí)例的演示步驟如下：
（1）打開網(wǎng)站“AJAXAnimationCtrl”。
（2）在網(wǎng)站根目錄下，添加一個Web窗體，命名為“Animation_Action3.aspx”。
（3）切換到窗體的設(shè)計視圖，添加一個ScriptManager。實(shí)現(xiàn)AJAX框架類的注冊。
（4）再添加一個AnimationExtender和一個Panel。設(shè)置Panel的屬性如下所示。
<asp:Panel ID="Panel1" runat="server" BackColor="#FFFFC0" Height="104px" Width="249px">
Animation Action 實(shí)例</asp:Panel>
（5）在AnimationExtender內(nèi)設(shè)計動畫效果，本例實(shí)現(xiàn)的是單擊Panel后，Panel的透明度發(fā)生變化，使用的是“OpacityAction”。最終動畫效果設(shè)計如清單21-8所示。注意使用的事件是“OnClick”。
代碼清單21-8 Animation的OpacityAction行為設(shè)計
<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server"
TargetControlID="Panel1">
<Animations >
<OnClick>
<OpacityAction duration="0.1" fps="20" opacity="0.6"/>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
（6）按“Ctrl+S”保存所有的代碼。
（7）將此頁設(shè)置為起始頁，按F5運(yùn)行程序，當(dāng)單擊Panel時，可以發(fā)現(xiàn)Panel的透明度立刻發(fā)生了變化。
本節(jié)通過幾個小的動畫實(shí)例，演示了“Animation”控件的大部分動畫效果，如果要了解更多的知識，請參考“http://ajax.asp.net/ajaxtoolkit/Walkthrough/AnimationReference.aspx#Animation”的內(nèi)容。
21.2 DropShadow陰影控件
本章主要介紹DropShadow陰影的組成及應(yīng)用，其中最主要的是學(xué)習(xí)動態(tài)設(shè)置，DropShadow陰影控件的各個屬性。
21.2.1 簡介
DropShadow陰影控件主要的功能如下：
l 銳化邊角效果：可以讓Panel等控件的邊角圓滑。
l 陰影效果：讓指定的控件具備陰影效果。
l 陰影透明：此設(shè)置是專門針對控件的陰影，設(shè)置透明度，如果控件沒有陰影，則此功能也不存在。
通過以上的功能，現(xiàn)在來了解DropShadow的屬性，如下所示。
<ajaxToolkit:DropShadowExtender ID="dse" runat="server"
TargetControlID="Panel1"
Opacity=".8"
Rounded="true"
TrackPosition="true" />
其中各屬性的意義如下：
l TargetControlID：要應(yīng)用陰影的控件ID。
l Opacity：陰影的透明度。最大值為1，默認(rèn)為0.5。
l Rounded：是否銳化目標(biāo)控件的邊角。
l TrackPosition：追隨目標(biāo)控件的位置，此屬性一般應(yīng)用在控件被拖動，或有其他移動的時候。
注意以上并沒有定義是否顯示陰影的屬性，因?yàn)镈ropShadow默認(rèn)顯示陰影，在實(shí)際應(yīng)用中，可以通過控制其Width屬性，設(shè)置陰影的寬度，如果不想顯示陰影，可以將Width設(shè)置為0。DropShadow陰影控件的應(yīng)用效果如圖21-6所示。
圖21-6 DropShadow陰影控件的應(yīng)用效果
21.2.2 簡單應(yīng)用實(shí)例
DropShadow陰影控件只有4個主要屬性：TargetControlID、Opacity、Rounded和Width。本節(jié)利用這4個屬性，為Panel面板設(shè)置一個好看的樣式。實(shí)例的演示步驟如下：
（1）打開VS2005，新建一個AJAX Control Toolkit網(wǎng)站，命名為“AjaxDropShadowCtrl”。
（2）在網(wǎng)站根目錄下，添加一個Web窗體，命名為“DropShadow_Simple”。
（3）切換到窗體的設(shè)計視圖，添加一個ScriptManager。
（4）本例實(shí)現(xiàn)的是Panel的陰影效果，在視圖中添加一個Panel和一個陰影控件DropShadowExtender。
（5）設(shè)置陰影控件的屬性，如下所示。主要設(shè)置了銳化效果和陰影透明度。
<ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server"
TargetControlID="Panel1"
Width="5"
Rounded="true"
Radius="9"
Opacity="0.6">
</ajaxToolkit:DropShadowExtender>
（6）頁面的最終設(shè)計效果如圖21-7所示
圖21-7 DropShadow簡單實(shí)例的設(shè)計效果
（7）按“Ctrl+S”保存設(shè)計，將此頁設(shè)置為起始頁。
（8）按F5運(yùn)行程序，可以發(fā)現(xiàn)Panel出現(xiàn)了陰影效果，并且邊角圓滑。效果如圖21-8所示。
圖21-8 DropShadow簡單實(shí)例的運(yùn)行效果
21.2.3 動態(tài)設(shè)置DropShadow控件
在實(shí)際應(yīng)用中，用戶通常喜歡自定義設(shè)置DropShadow的屬性，這就需要了解如何動態(tài)設(shè)置DropShadow。本節(jié)學(xué)習(xí)兩種方法實(shí)現(xiàn)DropShadow的動態(tài)設(shè)置。
1．客戶端的動態(tài)設(shè)置
在程序運(yùn)行的過程中，無法在客戶端使用getDocumentById方法，獲取控件DropShadow，必須使用AJAX類庫的方法“$find”，否則無法獲取客戶端的陰影控件。要使用方法“$find”，必須設(shè)置控件的“”屬性，如下所示。
<ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" BehaviorID="DropShadowBehavior1" runat="server"></ajaxToolkit:DropShadowExtender>
然后在客戶端的訪問中，使用“$find('DropShadowBehavior1')”來獲取客戶端的AJAX控件。下面一個簡單的實(shí)例，演示如何在客戶端設(shè)置DropShadow控件的屬性。
（1）在網(wǎng)站根目錄下，添加一個Web窗體，命名為“DropShadow_Client.aspx”。
（2）切換到窗體的設(shè)計視圖。添加ScriptManager控件。
（3）在視圖中添加一個Panel和一個HTML Button按鈕。其中按鈕控件用來動態(tài)設(shè)置Panel的屬性。這兩個控件的屬性設(shè)置如下所示。
<asp:Panel ID="Panel1" runat="server" BackColor="#E0E0E0" Height="101px" Width="288px"></asp:Panel>
<input id="Button1" style="width: 116px" type="button" value="應(yīng)用配置" />
（4）添加關(guān)鍵的陰影控件“DropShadowExtender”，當(dāng)前只需要設(shè)置其兩個屬性“TargetControlID”和“BehaviorID”，代碼如下所示。
<ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server"
TargetControlID="Panel1"
BehaviorID="DropShadowBehavior1">
</ajaxToolkit:DropShadowExtender>
（5）雙擊“應(yīng)用配置”按鈕，為按鈕設(shè)置Click事件，事件代碼如清單21-9所示。
代碼清單21-9 客戶端動態(tài)更改陰影控件的屬性
<script language="javascript" type="text/javascript">
<!--
function Button1_onclick()
{
var drop=$find("DropShadowBehavior1");
//陰影寬度
drop.set_Width(8);
//顯示銳化效果
drop.set_Rounded(true);
//陰影透明度
drop.set_Radius(8);
//銳化幅度
drop.set_Opacity(0.7);
}
// -->
</script>
（6）頁面設(shè)計的最終效果如圖21-9所示。
圖21-9 客戶端動態(tài)設(shè)置陰影屬性的設(shè)計視圖
（7）按“Ctrl+S”保存所有的設(shè)計，將此頁設(shè)置為起始頁。
（8）按F5運(yùn)行程序，運(yùn)行效果如圖21-10所示。
圖21-10 客戶端動態(tài)設(shè)置陰影屬性的初始效果
（9）單擊“應(yīng)用陰影”按鈕，此時調(diào)用客戶端的Click事件，最終效果如圖21-11所示。
圖21-11 客戶端動態(tài)設(shè)置陰影效果
2．服務(wù)器端的動態(tài)設(shè)置
服務(wù)器端更改陰影控件的屬性，需要避免頁面的刷新，本例不再需要調(diào)用AJAX類庫中的方法，因?yàn)榉?wù)器端可以直接獲取陰影控件。服務(wù)器端更改陰影控件屬性的演示步驟如下：
（1）在網(wǎng)站根目錄下，添加一個Web窗體，命名為“DropShadow_Server.aspx”。
（2）切換到窗體的設(shè)計視圖。添加ScriptManager控件。
（3）在視圖中添加一個Panel和一個Button按鈕。其中按鈕控件用來動態(tài)設(shè)置Panel的屬性。這兩個控件的屬性設(shè)置如下所示。
<asp:Panel ID="Panel1" runat="server" BackColor="Gainsboro" Height="101px" Width="288px" BorderColor="#C00000"></asp:Panel>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="應(yīng)用配置" Width="142px" />
（4）添加關(guān)鍵的陰影控件“DropShadowExtender”，當(dāng)前只需要設(shè)置屬性“TargetControlID”,代碼如下所示。
<ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server"
TargetControlID="Panel1"
</ajaxToolkit:DropShadowExtender>
（5）雙擊“應(yīng)用配置”按鈕，為按鈕設(shè)置Click事件，事件代碼如清單21-10所示。
代碼清單21-10 服務(wù)器端動態(tài)更改陰影控件的屬性
protected void Button1_Click(object sender, EventArgs e)
{
//動態(tài)修改陰影控件的屬性
DropShadowExtender1.Opacity = 0.7F;//透明度
DropShadowExtender1.Radius =7;//銳化幅度
//是否啟用銳化效果
DropShadowExtender1.Rounded = true;
DropShadowExtender1.Width =7;//陰影的寬度
}
（6）在視圖中添加一個UpdatePanel，主要是避免刷新效果。頁面設(shè)計的最終效果如圖21-12所示。
圖21-12 服務(wù)器端動態(tài)設(shè)置陰影屬性的設(shè)計視圖
（7）按“Ctrl+S”保存所有的設(shè)計，將此頁設(shè)置為起始頁。
（8）按F5運(yùn)行程序，運(yùn)行效果如圖21-13所示。
圖21-13 服務(wù)器端動態(tài)設(shè)置陰影屬性的初始效果
（9）單擊“應(yīng)用陰影”按鈕，此時調(diào)用服務(wù)器端的Click事件，最終效果如圖21-14所示。
圖21-14 服務(wù)器端動態(tài)設(shè)置陰影效果
21.2.4 高級應(yīng)用：與Profile結(jié)合保存用戶的個性
本例要使用AJAX類庫提供的ProfileService，實(shí)現(xiàn)個性化屬性的保存，通過DropShadow和ProfileService結(jié)合的方式，演示如何允許用戶定制自己的個性顯示。本例需要用到的關(guān)鍵技術(shù)如下：
（1）Profile類：ASP.NET 2.0中用來在服務(wù)器端，獲取Profile定義的類。
（2）Sys.Services.ProfileService：AJAX類庫中用來獲取Profile定義的類。
（3）ASP.NET 2.0中用戶登錄和注冊的組件。
（4）設(shè)置登錄驗(yàn)證的Web.Config配置。
（5）啟用個性化服務(wù)的Web.Config配置。
因?yàn)楸纠牟襟E繁多，請先參考本例的實(shí)現(xiàn)流程，如圖21-15所示。
圖21-15 DropShadow高級應(yīng)用的演示流程
1．登錄驗(yàn)證
為了保存每個用戶的個性定義，本例的頁面要求用戶登錄才能訪問，只有這樣，用戶才能保存自己的個性。實(shí)現(xiàn)登錄驗(yàn)證的步驟如下：
（1）在網(wǎng)站根目錄下，添加一個Web窗體，命名為“Login.aspx”。
（2）在窗體的設(shè)計視圖中，添加一個登錄控件組中的“Login”控件，用來實(shí)現(xiàn)用戶的登錄驗(yàn)證。
（3）如果用戶不存在，還必須提供一個注冊界面。在視圖中添加一個HyperLink控件，導(dǎo)航到注冊頁面。
（4）登錄界面的效果如圖21-16所示。
圖21-16 登錄界面
（5）在網(wǎng)站根目錄下，添加注冊需要的窗體，名為“Register.aspx”頁。修改其屬性“ContinueDestinationPageUrl”為“~/Login.aspx”。表示注冊完成后，返回到登錄窗體。
（6）注冊頁面的最終設(shè)計效果如圖21-17所示。
圖21-17 注冊界面
（7）設(shè)計完注冊和登錄界面后，現(xiàn)在修改Web.Config配置，實(shí)現(xiàn)用戶的注冊管理。在“system.web”節(jié)點(diǎn)下，添加登錄驗(yàn)證需要的一些條件，如清單21-11所示。
代碼清單21-11 登錄驗(yàn)證的配置
<authentication mode="Forms">
<forms defaultUrl="Default.aspx"
loginUrl="Login.aspx"
protection="All"/>
</authentication>
<authorization>
<deny users="?"/>
<allow users="*"/>
</authorization>
（8）由于注冊界面不需要登錄，所以還需要單獨(dú)配置，在“configuration”節(jié)點(diǎn)下，添加如下代碼。
<location path="Register.aspx">
<system.web>
<authorization>
<allow users="*"/>
</authorization>
</system.web>
</location>
（9）按“Ctrl+S”保存所有的配置。
2．啟用個性化配置
在應(yīng)用Profile之前，必須在配置文件中啟用其定義，如果要調(diào)用AJAX中的ProfileService服務(wù)，也必須啟用此服務(wù)。啟用個性化配置的步驟如下：
（1）打開Web.Config文件，在“system.web”節(jié)點(diǎn)下，添加啟用ASP.NET 2.0 Profile的配置。代碼如清單21-12所示。設(shè)置了Profile的4個屬性，這些屬性對應(yīng)于DropShadow控件的屬性。
代碼清單21-12 登錄驗(yàn)證的配置
<profile enabled="true">
<properties>
<add name="shadow" defaultValue="0" />
<add name="round" defaultValue="true"/>
<add name="radius" defaultValue="2"/>
<add name="opacity" defaultValue=".8"/>
</properties>
</profile>
（2）啟用AJAX的ProfileService服務(wù)，修改“system.web.extensions”節(jié)點(diǎn)的內(nèi)容如清單21-13所示。注意要設(shè)置Profile屬性的讀寫權(quán)限。
代碼清單21-13 啟用個性化的配置
<system.web.extensions>
<scripting>
<webServices>
<profileService enabled="true"
readAccessProperties="shadow,round,radius,opacity"
writeAccessProperties="shadow,round,radius,opacity"/>
</webServices>
</scripting>
</system.web.extensions>
（3）修改完畢后，按“Ctrl+S”保存配置。
修改配置文件時一定要注意，不能有任何錯誤，否則會導(dǎo)致程序無法正常運(yùn)行。
3．用戶定制屬性的窗體
實(shí)現(xiàn)了登錄驗(yàn)證和個性配置后，現(xiàn)在開始創(chuàng)建用戶定制屬性的窗體。創(chuàng)建步驟如下：
（1）打開默認(rèn)生成的Default.aspx頁面。
（2）切換到設(shè)計視圖。添加UpdatePanel、Panel和DropShadowExtender。設(shè)置DropShadowExtender的“TargetControlID”屬性為“Panel1”。
（3）在頁面上添加一些文本控件，讓用戶自定義陰影控件的屬性。最終的頁面設(shè)計如圖21-18所示。
圖21-18 用戶定制DropShadow控件的設(shè)計視圖
（4）窗體中的按鈕“保存配置”，屬于Html Button控件。切換到源代碼視圖，為其添加Click事件，代碼如下所示。
<asp:Button ID="Button1" runat="server" Text="保存配置" Width="137px" OnClientClick="SaveProfile();" />
（5）事件方法“SaveProfile”調(diào)用自文件“Profile.js”，所以必須在ScriptManager中引用此文件，代碼如下所示。
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/JS/Profile.js" />
</Scripts>
</asp:ScriptManager>
（6）在網(wǎng)站根目錄下，新建一個文件夾“JS”。在此文件夾下添加一個Jscript文件，名為“Profile.js”。此文件的主要內(nèi)容就是調(diào)用AJAX類庫中的ProfileService。文件的內(nèi)容如清單21-14所示。
代碼清單21-14 調(diào)用AJAX類庫中的ProfileService的方法
//加載個性化配置的方法-調(diào)用個性化服務(wù)的方法
function LoadProfile()
{
Sys.Services.ProfileService.load(null,
OnLoadCompleted, OnProfileFailed, null);
}
//保存?zhèn)€性化配置-調(diào)用個性化服務(wù)的方法
function SaveProfile()
{
//陰影沒有直接的屬性，通過設(shè)置寬度解決
Sys.Services.ProfileService.properties.shadow =
( GetElementById("Shadowchk").checked?5:0);//是否陰影
Sys.Services.ProfileService.properties.round =
GetElementById("Roundchk").checked; //是否銳化
Sys.Services.ProfileService.properties.radius =
GetElementById("txtradius").value;//銳化度
Sys.Services.ProfileService.properties.opacity =
GetElementById("txtopacity").value; //陰影透明度
Sys.Services.ProfileService.save(null,
OnSaveCompleted, OnProfileFailed, null);//保存
}
//讀取個性配置并應(yīng)用其內(nèi)容
function OnLoadCompleted(numProperties, userContext, methodName)
{
//首先獲取頁面中的陰影控件
var drop = $find('DropShadowBehavior1');
//顯示陰影效果
drop.set_Width(eval(Sys.Services.ProfileService.properties.shadow));
//顯示銳化效果
drop.set_Rounded(Sys.Services.ProfileService.properties.round=="True"?true:false);
//陰影透明度
drop.set_Radius(eval(Sys.Services.ProfileService.properties.radius));
//銳化幅度
drop.set_Opacity(parseFloat(Sys.Services.ProfileService.properties.opacity));
}
//保存配置成功后調(diào)用的方法
function OnSaveCompleted(numProperties, userContext, methodName)
{
LoadProfile();//加載配置
}
//配置加載失敗時調(diào)用的方法
function OnProfileFailed(error_object, userContext, methodName)
{
alert("配置服務(wù)調(diào)用失?。?" + error_object.get_message());
}
//javascript的方法getElementById被封裝成C#用法
function GetElementById(elementId)
{
var element = document.getElementById(elementId);
return element;
}
//判斷是否正確加載了ajax類庫
if (typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();
（7）打開Default.aspx的代碼視圖，在Page_Load中添加窗體初加載時DropShadowExtender的顯示樣式。這些內(nèi)容都是通過Profile類，從用戶定義的配置中獲取的。代碼如清單21-15所示。
代碼清單21-15 服務(wù)器端獲取用戶的個性定義代碼
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//頁面初始化時，加載個性定義
DropShadowExtender1.Opacity = float.Parse( Profile.opacity);//透明度
DropShadowExtender1.Radius = int.Parse(Profile.radius);//銳化幅度
//是否啟用銳化效果
DropShadowExtender1.Rounded = (Profile.round == "True" ? true : false);
DropShadowExtender1.Width = int.Parse(Profile.shadow);//陰影的寬度
//設(shè)置頁面上各元素的顯示
if (DropShadowExtender1.Rounded)
Roundchk.Checked = true;//是否銳化
if (DropShadowExtender1.Width !=0)
Shadowchk.Checked=true;//是否陰影
txtopacity.Text=DropShadowExtender1.Opacity.ToString();//透明度
txtradius.Text= DropShadowExtender1.Radius.ToString();//銳化幅度
}
}
（8）按“Ctrl+S”保存所有的設(shè)計。將Default.aspx設(shè)置為起始頁。
（9）按F5運(yùn)行程序。首先是登錄窗體，如圖21-19所示。如果沒有注冊用戶，請先單擊“注冊”鏈接。
圖21-19 登錄運(yùn)行界面
（9）輸入用戶名和密碼，單擊“登錄”按鈕。此時打開用戶定制窗體，如圖21-20所示。
圖21-20 用戶定制控件屬性的界面
（10）輸入控件的各個屬性，單擊“應(yīng)用配置”按鈕，此時界面中的陰影控件發(fā)生了變化，變化的格式便是用戶剛剛定義的屬性。
（11）單擊“注銷”鏈接，界面切換到登錄窗口，重新登錄窗口，可以發(fā)現(xiàn)陰影控件的樣式依然是用戶定義的內(nèi)容。同時自定義的屬性，在對應(yīng)的文本控件上都有體現(xiàn)。效果如圖21-21所示。
圖21-21 顯示的用戶定制內(nèi)容
通過Profile和DropShadow結(jié)合的方式，本例實(shí)現(xiàn)了用戶定制DropShadow的功能。這些功能多用在個性化網(wǎng)站內(nèi)，促進(jìn)網(wǎng)站與用戶的交互。
21.3 RoundedCorners銳化邊角控件
RoundedCorners控件專門用來銳化控件的邊角，本節(jié)介紹其主要的屬性和功能。
21.3.1 簡介
RoundedCorners控件和DropShadow控件的銳化效果一樣，缺點(diǎn)是沒有陰影效果，優(yōu)點(diǎn)是可以只銳化4個邊角中的任意一個或多個。RoundedCorners控件的主要屬性如下所示：
<ajaxToolkit:RoundedCornersExtender ID="rce" runat="server"
TargetControlID="Panel1"
Radius="6"
Corners="All" />
其中各屬性的意義如下：
l TargetControlID：被銳化的控件ID。
l Radius：銳化幅度。
l Corners：要銳化的邊角，All表示所有邊角。
RoundedCorners控件的應(yīng)用效果如圖21-22所示。
圖21-22 RoundedCorners控件的應(yīng)用效果
21.3.2 自定義銳化效果
本例的功能是可以自定義邊角銳化的幅度，也可以選擇要銳化的邊角。演示步驟如下：
（1）打開VS2005，新建一個AJAX Control Toolkit網(wǎng)站，命名為“AjaxRoundedCornersCtrl”。
（2）打開默認(rèn)生成的Default.aspx，切換到設(shè)計視圖。
（3）添加一個Panel，用來實(shí)現(xiàn)銳化效果，再添加一個RoundedCorners，用來控制銳化。然后添加2個Html Radio和4個Html CheckBox。效果如圖21-23所示。
圖21-23 RoundedCorners控件實(shí)例的設(shè)計視圖
（4）2個Radio讓用戶選擇其銳化的幅度，4個CheckBox讓用戶選擇銳化的邊角，這6個控件的事件定義如清單21-16所示。注意“$find”方法的使用，是AJAX類庫中提供查找客戶端AJAX控件專用的方法。
代碼清單21-16 自定義RoundedCorners的效果事件
<input id="Radio1" type="radio" value="8"
onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);"/>8
<input id="Radio2" type="radio" value="10"
onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />10
選擇某個邊角
<input id="Checkbox1" type="checkbox" value="1"
onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />左上角
<input id="Checkbox2" type="checkbox" value="2"
onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />右上角
<input id="Checkbox3" type="checkbox" value="8"
onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />左下角
<input id="Checkbox4" type="checkbox" value="4"
onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />右下角
（5）設(shè)計RoundedCorners的屬性如下所示。
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server"
BehaviorID="RoundedCornersBehavior1"
TargetControlID="Panel1">
</ajaxToolkit:RoundedCornersExtender>
（6）按“Ctrl+S”保存所有的設(shè)計。按F5運(yùn)行程序，效果如圖21-24所示?？赏ㄟ^選擇不同的銳化幅度測試不同的運(yùn)行效果。
圖21-24 RoundedCorners自定義的運(yùn)行效果
21.4 ToggleButton個性化按鈕控件
ToggleButton是一個專用于CheckBox的按鈕控件，本節(jié)介紹其主要屬性，并以實(shí)例的形式，顯示如何在項(xiàng)目中應(yīng)用此控件。
21.4.1 簡介
ToggleButton控件只能應(yīng)用于控件CheckBox，其最主要的功能，是以自定義圖片的形式，顯示復(fù)選框的選中和未選狀態(tài)，確切的說是一個根據(jù)狀態(tài)變化的圖片按鈕。ToggleButton控件的主要屬性如下：
<ajaxToolkit:ToggleButtonExtender ID="ToggleEx" runat="server"
TargetControlID="CheckBox1"
ImageWidth="19"
ImageHeight="19"
CheckedImageAlternateText="Check"
UncheckedImageAlternateText="UnCheck"
UncheckedImageUrl="ToggleButton_Unchecked.gif"
DisabledCheckedImageUrl=””
CheckedImageUrl="ToggleButton_Checked.gif" />
其中各屬性的意義如下：
l TargetControlID：要應(yīng)用ToggleButton特色的CheckBox控件的ID。
l ImageWidth：顯示圖片的寬度。
l ImageHeight：顯示圖片的高度。
l CheckedImageAlternateText：選中狀態(tài)下的提示文本。
l UncheckedImageAlternateText：未選中狀態(tài)下的提示文本。
l UncheckedImageUrl：未選中狀態(tài)下顯示的圖片地址。
l CheckedImageUrl：選中狀態(tài)下顯示的圖片地址。
l DisabledCheckedImageUrl：當(dāng)控件為不可用狀態(tài)時，默認(rèn)選中時要顯示的圖片。
ToggleButton控件的應(yīng)用效果如圖21-25所示。
圖21-25 ToggleButton控件的應(yīng)用效果
注意：此控件不能應(yīng)用于CheckBoxList控件。
21.4.2 用ToggleButton裝飾CheckBox控件實(shí)例
ToggleButton專門用來裝飾CheckBox，并不支持其他控件，復(fù)選框可以是客戶端的，也可以是服務(wù)器端的。本例使用ToggleButton來裝飾一組服務(wù)器端的CheckBox，其中每個得定義又不相同，有CheckBox在不可用狀態(tài)下的ToggleButton應(yīng)用，也有CheckBox默認(rèn)就被選中時ToggleButton的應(yīng)用。實(shí)例的演示步驟如下：
（1）打開VS2005，新建一個AJAX Control Toolkit網(wǎng)站，命名為“AjaxToggleButtonCtrl”。
（2）打開默認(rèn)生成的Default.aspx頁，切換到窗體的設(shè)計視圖。
（3）在視圖中添加6個CheckBox控件和5個ToggleButtonExtender。其中有一個CheckBox并不做任何修飾，體現(xiàn)對比效果。
（4）設(shè)計頁面的布局，最終效果如圖21-26所示。
圖21-26 ToggleButton實(shí)例的設(shè)計視圖
（5）將“ToggleButtonExtender1”應(yīng)用于“CheckBox1”，設(shè)計最普通的應(yīng)用，需要提供兩個圖片，一個用于顯示未選中狀態(tài)的“wrong.jpg”，一個用于顯示選中狀態(tài)的“right.jpg”。ToggleButtonExtender1最終的設(shè)計屬性如清單21-17所示。
代碼清單21-17 ToggleButtonExtender1的設(shè)計屬性
<ajaxToolkit:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server"
TargetControlID="CheckBox1"
ImageHeight="20"
ImageWidth="23"
CheckedImageAlternateText="選中"
UncheckedImageAlternateText="未選中"
CheckedImageUrl="right.jpg"
UncheckedImageUrl="wrong.JPG">
</ajaxToolkit:ToggleButtonExtender>
（6）將“ToggleButtonExtender5”應(yīng)用于“CheckBox5”，此復(fù)選框的屬性“Enabled”要設(shè)置為“false”，表示其處于不可用狀態(tài)，這時就需要定義ToggleButtonExtender5的“DisabledCheckedImageUrl”屬性。最終ToggleButtonExtender5的設(shè)計屬性，如清單21-18所示。
代碼清單21-18 ToggleButtonExtender5的設(shè)計屬性
<ajaxToolkit:ToggleButtonExtender ID="ToggleButtonExtender5" runat="server"
TargetControlID="CheckBox5"
ImageHeight="20"
ImageWidth="23"
DisabledCheckedImageUrl="wrong.JPG"
DisabledUncheckedImageUrl="right.jpg"
CheckedImageAlternateText="選中"
UncheckedImageAlternateText="未選中"
UncheckedImageUrl="right.jpg"
CheckedImageUrl="wrong.JPG">
</ajaxToolkit:ToggleButtonExtender>
（7）然后將其他的ToggleButtonExtender對應(yīng)不同的CheckBox，設(shè)計屬性同ToggleButtonExtender1。
（8）按“Ctrl+S”保存所有的代碼，按F5運(yùn)行程序，效果如圖21-27所示?？赏ㄟ^單擊按鈕，更改CheckBox的選中狀態(tài)。
圖21-27 ToggleButton實(shí)例的運(yùn)行效果
21.5 UpdatePanelAnimation局部刷新動畫控件
UpdatePanelAnimation是應(yīng)用于UpdatePanel的控件，提供一些動畫效果，本節(jié)介紹其主要屬性，并演示如何在項(xiàng)目中應(yīng)用此控件。
21.5.1 簡介
UpdatePanelAnimation控件用來裝飾UpdatePanel更新的效果，提供對UpdatePanel更新時和更新后的特效，并允許用戶定義這些特效。定義的語法與“Animation”控件類似。UpdatePanelAnimation控件的屬性如下所示：
<ajaxToolkit:UpdatePanelAnimationExtender ID="ae"
runat="server"
TargetControlID="up">
<Animations>
<OnUpdating> ... </OnUpdating>
<OnUpdated> ... </OnUpdated>
</Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>
其中各屬性的意義如下：
l TargetControlID：要應(yīng)用特效的UpdatePanel的ID。
l OnUpdating：更新時應(yīng)用的特效。
l OnUpdated：更新后應(yīng)用的特效。
針對OnUpdated事件和OnUpdating事件，Microsoft給出了特別說明。任何局部控件的回調(diào)，都會導(dǎo)致OnUpdating的觸發(fā)，如果要使任何回調(diào)完成后，都觸發(fā)OnUpdated，則需要設(shè)置UpdatePanel的屬性“OnUpdated”為“Always”。
21.5.2 實(shí)現(xiàn)局部更新時漸變效果
本例使用Animation控件的一些知識，演示UpdatePanel控件更新后的顏色漸變特效。
（1）打開VS2005，新建一個AJAX Control Toolkit網(wǎng)站，命名為“AjaxUpdatePanelAnimationCtrl”。
（2）打開默認(rèn)生成的Default.aspx頁面，切換到窗體的設(shè)計視圖。
（3）在視圖中添加UpdatePanel控件和UpdatePanelAnimationExtender控件。
（4）為UpdatePanelAnimationExtender控件設(shè)計動畫特效，本例使用的是顏色漸變特效，代碼如清單21-19所示。注意改變的是背景色。
代碼清單21-19 UpdatePanelAnimationExtender的顏色特效代碼
<ajaxToolkit:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server"
TargetControlID="UpdatePanel1">
<Animations>
<OnUpdated>
<Sequence>
<Parallel duration="2" Fps="30">
<Color StartValue="#ff3f3f" EndValue="#ffffff" Property="style" PropertyKey="backgroundColor" />
</Parallel>
</Sequence>
</OnUpdated>
</Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>
（5）在UpdatePanel控件中，添加一些需要回調(diào)的內(nèi)容，本例設(shè)計了一個登錄窗體，頁面的最終布局如圖21-28所示。
圖21-28 UpdatePanelAnimation實(shí)例的設(shè)計視圖
（6）雙擊“登錄”按鈕，添加一些代碼，主要是引起頁面的回調(diào)，還需要通過線程延緩更新的時間，否則可能看不到效果。由于本例使用的是OnUpdated事件，所以影響并不大，但最好還是添加這個延遲。最終按鈕的Click事件代碼如下。
protected void Button1_Click(object sender, EventArgs e)
{
//延緩更新時間
System.Threading.Thread.Sleep(3000);
Literal1.Text = "登錄完畢";
}
（7）按“Ctrl+S”保存所有的設(shè)計。按F5運(yùn)行程序，開始界面和普通界面沒有區(qū)別。
（8）單擊“登錄”按鈕，等待一段時間后，可以看到UpdatePanel區(qū)域內(nèi)，背景顏色發(fā)生了變化，有漸變特效。
注意：由于書本印刷的問題，本例沒有提供效果圖片。
21.6 小結(jié)
本章介紹了AjaxControlToolkit中的一些特殊效果，如動畫、陰影、個性按鈕等，通過這些組件，開發(fā)人員可以很輕松的制作美觀的頁面，用戶也可以領(lǐng)略到個性化風(fēng)格的應(yīng)用效果。
通過本章的描述，希望讀者已經(jīng)完全明白了AjaxControlToolkit工具包的作用，其主要功能就是提供個性組件，然后讓開發(fā)人員可以輕松的調(diào)用。
鄂公網(wǎng)安備 42010302001612號 