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