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