第一篇 Ajax基础
第1章 揭开Ajax的面纱
1.1 简要介绍Ajax的发展历程
1.1.1 Ajax概念的由来
1.1.2 Ajax的发展过程
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 创建异步调用的对象
1.3.2 加载数据所在的服务器
1.3.3 异步调用服务器状态的变化
1.3.4 发出一个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种不刷新技术的优劣
2.6 小结
第3章 Ajax目前的应用趋势
3.1 Ajax的优点
3.1.1 相对于开发环境的优点
3.1.2 相对于开发人员的优点
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的区别
3.4 目前Ajax的网络应用实例
3.4.1 Ajax实现即时刷新效果
3.4.2 Ajax制作仿关机效果的应用
3.4.3 异步数据调用网站
3.5 小结
第二篇 CSS样式表
第4章 创建CSS样式表
4.1 CSS在Ajax中的作用
4.2 CSS样式表的结构
4.2.1 为页面引入CSS样式的方法
4.2.2 CSS的结构规则
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优化工具- CSS Compressor
5.1.2 CSS的效果查看工具-CSSVista
5.1.3 W3C对网站CSS的校验
5.2 CSS滤镜让样式布局更精彩
5.2.1 了解CSS中的滤镜
5.2.2 用CSS滤镜制作会发光的字体
5.2.3 用CSS滤镜演示字体的投影效果
5.3 Ajax调用CSS高级应用范例
5.3.1 使用Ajax动态改变局部元素样式
5.3.2 使用Ajax+CSS实现动态菜单效果
5.4 小结
第三篇 JavaScript编程语言基础
第6章 JavaScript技术简介
6.1 JavaScript概述
6.1.1 简介及特点
6.1.2 与Java的区别
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创建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 发送请求的方法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标准的发展历程
9.3 DOM在Ajax中的作用
9.4 小结
第10章 Ajax中DOM的结构分析
10.1 DOM中的元素属性
10.1.1 DOM中数据的标准名称
10.1.2 用图例认识DOM中元素的属性
10.2 Ajax中动态操作DOM的主要方法
10.2.1 获取页面中指定控件的值
10.2.2 获取页面中同属性的一组控件
10.2.3 判断页面中控件是否嵌套
10.2.4 获取页面中某控件的属性
10.2.5 动态创建页面的一个元素
10.2.6 控件的替换
10.2.7 控件的复制
10.2.8 动态删除页面中的元素
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实现动态调色板
11.3 AjaxCaller框架的应用
11.3.1 AjaxCaller框架简介
11.3.2 使用AjaxCaller实现简单的定时任务
11.4 Microsoft提供的Ajax框架
11.5 小结
第12章 使用Ajax+ASP.NET 2.0开发RSS阅读器
12.1 认识RSS
12.1.1 RSS简介
12.1.2 RSS的作用
12.1.3 RSS的标准格式
12.1.4 RSS的工作原理
12.2 了解本例开发的RSS阅读器
12.2.1 RSS订阅器要使用的关键技术
12.2.2 RSS订阅器要实现的功能
12.3 开发RSS阅读器的前期准备
12.3.1 设计存储RSS数据需要的数据库
12.3.2 设计RSS界面的布局
12.4 添加RSS频道功能
12.4.1 添加频道到数据库的方法
12.4.2 异步发送添加请求的客户端实现
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开发论坛
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 帖子的发布
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 动态加载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的优点
15.4.4 深入了解UpdatePanel的属性UpdateMode和ChildrenAsTriggers
15.4.5 深入了解UpdatePanel的触发器Triggers
15.4.6 动态更新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的区别
16.3.5 WebPartZone个性化区域应用实例
16.4 Script控件介绍
16.5 小结
第七篇 AjaxControlToolkit工具包详解
第17章 概述
17.1 AjaxControlToolkit工具包简介
17.2 AjaxControlToolkit工具包内容
17.3 创建AJAX Control Toolkit 网站
17.4 AJAX-Enabled网站和AJAX Control Toolkit网站配置的区别
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 实现静态导航菜单的实例
19.3.4 Accordion与UpdatePanel实现静态导航菜单的不刷新
19.3.5 数据源控件与Accordion绑定的实例
19.3.6 动态绑定Accordion内容的实例
19.3.7 动态添加菜单项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 创建可拖拽面板实例
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 动态设置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动态填充控件
22.5.1 简介
22.5.2 动态填充实例
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 显示静态列表内容的实例
22.10.3 显示动态列表内容的实例
22.11 Rating显示等级控件
22.11.1 简介
22.11.2 使用Rating控件的回发事件实例
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 创建留言板中的数据表
23.3.3 留言板中数据表之间的关系
23.4 留言板的登录
23.4.1 用户的注册
23.4.2 实现关机效果的用户登录功能
23.5 发表留言主题的功能
23.5.1 设计发表留言功能的布局
23.5.2 实现发表留言功能的主要方法
23.6 浏览留言主题的功能
23.7 留言回复的功能
23.7.1 显示所有的回复内容
23.7.2 添加回复信息的功能
23.7.3 修改回复模板支持AJAX的 HoverMenu
23.7.4 为删除按钮添加删除确认功能
23.8 留言板短消息功能
23.8.1 发送短消息
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开发RSS阅读器
前面学习了Ajax中关键的基本技术，本章将根据前面所学的知识，开发一个目前比较流行的阅读器-RSS阅读器。同时详细介绍了网络上RSS文档的基本结构。在开发RSS阅读器时，使用Ajax和ASP.NET结合的方式，即提高了开发速度，也提高了安全度。本章的讲解流程如图12-1所示。
图12-1 开发RSS阅读器的流程
12.1 认识RSS
RSS是目前比较流行的一种订阅格式，越来越多的网站提供RSS服务，以提高用户和网站数据之间的交互。本节将详细介绍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规范。为了更方便的应用RSS样式，RSS提供了标准的元素以及这些元素的表现形式，这就是最新的RSS 2.0样本。目前所有网站提供的订阅功能，都支持RSS 2.0版本。样本地址可参考“http://cyber.law.harvard.edu/blogs/gems/tech/rss2sample.xml”。
RSS 2.0究竟包括哪些元素呢，本节以从外到内的顺序剖析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一些基础的概念东西和优点</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的使用。角色管理以后不发愁了。
</item>
</channel>
通过以上代码可以看出，RSS文件主要有组节点：rss、channel和item。其中rss节点表示执行的RSS标准的命名空间；channel节点表示在Blog或新闻组中的一个类别，通常被译为频道；item节点是用户要查看的主要信息，其中包括信息的标题、信息内容的链接地址、信息的发布时间等等。
了解了RSS 2.0的基本组成后，现在来认识channel节点内的主要元素。表12-1列出的是RSS 2.0定义的channel中的标准元素及说明，其中前三个元素属于必选项。
表12-1 channel中的元素及说明
元素名称 说明
title 频道的名称
link 频道对于网站的链接地址
description 对频道的描述信息
language 频道使用的语言
copyright 频道的一些版权声明，或免责信息
managingEditor 管理频道的人的相关信息
webMaste 页面主管的人的相关信息。（对于网站而言）
pubDate 频道的创建日期
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 内容的发布日期
source 内容的来源
12.1.4 RSS的工作原理
RSS阅读工具的工作原理如图12-2所示。
图12-2 工作原理图
12.2 了解要开发的RSS阅读器
在正式进入开发前，先了解本例需要的技术和本例要实现的功能，这样有助于提高开发的进度和质量。
12.2.1 RSS订阅器要使用的关键技术
本例要开发的RSS订阅器主要包括三大功能：
（1）添加RSS频道功能。添加功能比较简单，需要将RSS频道的名称和URL保存到数据库中，并能及时更新频道列表。
（2）显示所有RSS频道功能。在两种情况下要获取RSS频道列表：当用户添加新的RSS频道后，当用户刷新或加载订阅器时。
（3）显示频道内容列表。当用户选择频道列表后，系统需要显示频道的内容，并可以链接到频道所在的网站。当频道内容没有更新时，系统显示的内容可从本地的缓存获取，当有更新时，系统才使用Ajax技术到远程服务器获取更新内容。
RSS订阅器实现后的效果如图12-3所示。
图12-3 RSS订阅器效果图
12.2.2 RSS订阅器要实现的功能
为了快速的开发RSS阅读器，本节先介绍开发需要了解的技术：
l 在获取网络上的RSS信息时，需要使用Ajax中的XMLHttpRequest实现异步数据的处理，所以要掌握XMLHttpRequest的流程及实现原理。
l 为了提高客户端的响应速度，一些与内容无关的操作都将在JavaScript代码中完成，所以对于JavaScript语言要有一定的了解。
l 将获取后的数据显示在页面上时，为了保持页面的局部刷新，需要使用DOM技术提取指定元素，并将其内容更新。所以要掌握DOM的结构，以及DOM中的一些方法和属性。
l 为了页面的可观赏性，本例中很多控件使用了样式，所以要对样式表有一定的了解。
l 由于服务器端功能都是在ASP.NET 2.0中处理，所以还要掌握ASP.NET 2.0的数据库处理技术。
12.3 开发RSS阅读器的前期准备
进行正式的开发前，需要先设计数据保存的地方，然后设计界面。本节的目的就是要完成这两部分。
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订阅器的功能要求，可以将界面的布局分为三部分：添加部分、显示频道列表部分和显示频道内容部分。由于频道列表和频道内容部分的数据都是动态获取的，所以在其中添加控件。而添加部分需要用户手动输入内容，所以需要添加三个控件，用来与用户交互。根据对功能的理解，设计RSS订阅器的布局，创建步骤如下：
（1）打开VS2005，创建一个网站，命名为“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订阅器的前期准备已经完成，下节将进入正式开发阶段。
12.4 添加RSS频道功能
添加RSS频道的功能虽然简单，但由于牵扯到数据库和局部更新的问题，所以为了理清开发的思路，本例给出了实现添加功能的流程，如图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();
//在一个范围内执行sql命令，范围结束后，释放所有对象
using (SqlConnection conn = new SqlConnection(connectionString))
{
//定义命令属性
//判断数据库连接状态
if (conn.State != ConnectionState.Open)
conn.Open();
cmd.Connection = conn;
cmd.CommandType = CommandType.Text;
cmd.CommandText = "INSERT INTO RssStore VALUES('" +name +"','" +url +"')";
//执行命令
cmd.ExecuteNonQuery();
}
}
（7）按“Ctrl+S”保存设计的代码。
12.4.2 异步发送添加请求的客户端实现
在用户单击“添加RSS”按钮后，为了提高运行速度，本例将使用XMLHttpRequest实现数据的提交工作，异步功能实现的原理如图12-7所示。
图12-7 异步提交的原理图
实现的步骤如下：
（1）打开Default.aspx页。
（2）为“添加RSS”按钮添加click事件，事件调用方法“addrss”。
（3）在head元素内添加脚本代码，方法“addrss”的代码如清单12-4所示。其中需要创建一个XMLHttpRequest对象。
代码清单12-4 添加按钮调用的方法
<script type="text/javascript">
var xmlhttp;
function createXMLHttp()
{
//未考虑除IE外其他浏览器-创建异步对象
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
function addrss()
{
createXMLHttp();
//判断异步对象状态的方法
xmlhttp.onreadystatechange=statechange;
//获取添加的RSS属性
var name=document.getElementById("txtRssName").value;
var url=document.getElementById("txtRssUrl").value;
//加载服务器页并发送数据请求
xmlhttp.open("GET","addRssNamePage.aspx?name="+escape(name) +"&url="+escape(url),true);
xmlhttp.send(null);
}
</script>
注意：传递参数时，如果参数为中文，必须使用escape方法包装。
（4）在创建XMLHttpRequest对象的过程中，使用方法“statechange”判断事件的状态，此方法的设计代码如清单12-5所示。主要目的：是当请求成功完成后，调用方法“handleStr”实现页面的局部刷新。
代码清单12-5 判断请求状态的方法
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 添加请求的服务器端实现
当处理完客户端的技术后，可以发现，客户端要求服务器端返回的是字符串，本例就介绍如何返回客户端需要的数据内容，同时又将数据添加到服务器中。
（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)
{
//获取页面传递参数并参加记录到数据库中
//获取参数;
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频道的显示功能。本节主要实现此功能。
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();
//在一个范围内执行sql命令，范围结束后，释放所有对象
using (SqlConnection conn = new SqlConnection(connectionString))
{
//判断数据库连接状态
if (conn.State != ConnectionState.Open)
conn.Open();
cmd.Connection = conn;
//定义命令属性
cmd.CommandType = CommandType.Text;
cmd.CommandText = "SELECT Rss_Name,Rss_URL FROM RssStore";
//执行命令并返回数据
SqlDataReader rdr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
//定义一个数组用来返回
ArrayList myarray = new ArrayList();
//循环判断是否有数据
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的状态的事件是“statechangeLoad”。
代码清单12-9 客户端从服务器端获取数据的方法
//当页面加载时，需要显示所有的rss列表
function getRssName()
{
createXMLHttp();
xmlhttp.onreadystatechange=statechangeLoad;
//加载服务器页并发送数据请求
xmlhttp.open("GET","viewRssNamePage.aspx",true);
xmlhttp.send(null);
}
（4）事件“statechangeLoad”用来判断异步对象的状态，当对象处于成功完成的状态时，使用DOM对象更改列表div的内容。详细代码如清单12-10所示。
代码清单12-10 判断状态的事件
function statechangeLoad()
{
//如果请求已经完成
if(xmlhttp.readystate==4)
{
//判断请求是否成功返回
if(xmlhttp.status==200)
{
//返回的是字符串，进行处理后显示在客户端
document.getElementById("namelist").innerHTML=xmlhttp.responseText;
}
}
}
（5）按“Ctrl+S”保存代码的修改。
12.5.3 服务器端返回数据
客户端和数据库读取方法都已经设计完毕，本节将实现从服务器端返回数据给客户端。详细的实现步骤如下：
（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的优势。显示效果如图12-9所示。
图12-9 频道列表的显示效果图
12.6 显示频道内容功能
获取频道的内容主要是根据频道的地址，然后使用XMLHttpRequest对象从网络获取数据，返回字符串或者XML数据。本节就介绍如何显示频道的内容。
12.6.1 从网络获取频道的内容
从网络读取数据，需要先向网络请求频道的内容。创建请求的步骤如下：
（1）在显示频道列表时，使用了读取频道内容的方法“loadContent”，当时没有设计代码，现在实现这个方法的代码，如清单12-12所示。其中设计了一段提示代码，当系统数据没有加载完成时，出现提示如图12-10所示。
代码清单12-12 读取内容的方法
//加载rss内容的方法
function loadContent(url)
{
//提示信息
document.getElementById("rsscontent").innerHTML="请稍候，正在加载.......";
//创建异步对象
createXMLHttp();
//判断异步对象状态的方法
xmlhttp.onreadystatechange=viewContent;
//加载服务器页并发送数据请求-url为用户选择的rss频道路径
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
图12-10 频道未加载完时的等待效果图
（2）上述代码中使用了创建XMLHttpRequest对象的方法“createXMLHttp”，此方法的代码如下：
var xmlhttp;
function createXMLHttp()
{
//未考虑除IE外其他浏览器-创建异步对象
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
（3）由于本示例属于动态内容，所以没有任何数据库和服务端处理的代码。按“Ctrl+S”保存读取的代码。对于状态的判断以及客户端的显示，将在下一节介绍。
12.6.2 显示频道内容
当网络请求完成并且成功后，需要设置显示内容的div，一是要将内容显示在div中，二是要设置显示的格式，本例的格式在前期定义样式表时已经完成，此处没有变化。实现显示频道内容功能的步骤如下：
（1）打开Default.aspx页。
（2）在HTML源代码中XMLHttpRequest对象的状态判断方法“FillList”，代码如清单12-13所示。
代码清单12-13 显示内容的方法
//显示div内容的方法
function FillList( listdom)
{
var str="";
var list=new Array();
list=listdom.getElementsByTagName("item");
//本例使用字符串的形式将内容连接，也可使用DOM创建元素的形式
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。这些都是客户端技术，服务器端开发使用的是VS2005中的ASP.NET 2.0。
第21章 动画和图像特效
本章主要介绍一些具备特殊效果的组件，如动画、阴影、边角锐化等，AjaxControlToolkit工具包的主要功能就是提供一些个性化的组件，让网站界面美观。
本章主要介绍的组件有：Animation、DropShadow、RoundedCorners、ToggleButton和UpdatePanelAnimation。
21.1 Animation动画控件
Animation是非常有特色的动画控件，适合网站的装饰，本节主要介绍在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：表示要触发的事件是加载页面时。
l OnClick：表示要触发的事件是单击控件时。
l OnMouseOver：表示要触发的事件是鼠标滑过时。
l OnMouseOut：表示要触发的事件是鼠标移走时。
l OnHoverOver：与OnMouseOver类似，对特定控件而言。
l OnHoverOut：与OnMouseOut类似，对特定控件而言。
Animation的动画效果如图21-1所示。
图21-1 Animation的动画效果
21.2.2 多种动画控件的实例
在Animation控件内，又包含了多个小的控件，为了清晰的掌握这些控件的使用，本节将为常用的几个小动画控件，分别做一个实例。
1．变色颜色的动画效果
本例要实现的是当鼠标滑过Panel时，Panel的颜色发生变化，当鼠标移走时，Panel的颜色又发生了变化，这需要“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时，可以发现Panel的颜色发生了变化。
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时，可以发现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时，可以发现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时，可以发现Panel的高度和宽度都发生了变化。
21.3.3 Action行为实例
Animation控件除了具备一些小的动画控件外，还支持几种特殊的Action行为，如控制按钮不可用、隐藏按钮和设置透明度等。本节重点介绍三种行为：EnableAction、StyleAction和OpacityAction。
1．设置动画目标控件不可用
EnableAction用来设置控件为不可用状态，由于“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内设计动画效果，本例实现的是单击按钮后，此按钮变为不可用状态，使用的是“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运行程序，当单击按钮时，可以发现按钮的状态，迅速变成了不可用。
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运行程序，当单击按钮时，可以发现按钮消失了。
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的透明度发生变化，使用的是“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时，可以发现Panel的透明度立刻发生了变化。
本节通过几个小的动画实例，演示了“Animation”控件的大部分动画效果，如果要了解更多的知识，请参考“http://ajax.asp.net/ajaxtoolkit/Walkthrough/AnimationReference.aspx#Animation”的内容。
21.2 DropShadow阴影控件
本章主要介绍DropShadow阴影的组成及应用，其中最主要的是学习动态设置，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。本节利用这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运行程序，可以发现Panel出现了阴影效果，并且边角圆滑。效果如图21-8所示。
图21-8 DropShadow简单实例的运行效果
21.2.3 动态设置DropShadow控件
在实际应用中，用户通常喜欢自定义设置DropShadow的属性，这就需要了解如何动态设置DropShadow。本节学习两种方法实现DropShadow的动态设置。
1．客户端的动态设置
在程序运行的过程中，无法在客户端使用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按钮。其中按钮控件用来动态设置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 客户端动态更改阴影控件的属性
<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 客户端动态设置阴影属性的设计视图
（7）按“Ctrl+S”保存所有的设计，将此页设置为起始页。
（8）按F5运行程序，运行效果如图21-10所示。
图21-10 客户端动态设置阴影属性的初始效果
（9）单击“应用阴影”按钮，此时调用客户端的Click事件，最终效果如图21-11所示。
图21-11 客户端动态设置阴影效果
2．服务器端的动态设置
服务器端更改阴影控件的属性，需要避免页面的刷新，本例不再需要调用AJAX类库中的方法，因为服务器端可以直接获取阴影控件。服务器端更改阴影控件属性的演示步骤如下：
（1）在网站根目录下，添加一个Web窗体，命名为“DropShadow_Server.aspx”。
（2）切换到窗体的设计视图。添加ScriptManager控件。
（3）在视图中添加一个Panel和一个Button按钮。其中按钮控件用来动态设置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 服务器端动态更改阴影控件的属性
protected void Button1_Click(object sender, EventArgs e)
{
//动态修改阴影控件的属性
DropShadowExtender1.Opacity = 0.7F;//透明度
DropShadowExtender1.Radius =7;//锐化幅度
//是否启用锐化效果
DropShadowExtender1.Rounded = true;
DropShadowExtender1.Width =7;//阴影的宽度
}
（6）在视图中添加一个UpdatePanel，主要是避免刷新效果。页面设计的最终效果如图21-12所示。
图21-12 服务器端动态设置阴影属性的设计视图
（7）按“Ctrl+S”保存所有的设计，将此页设置为起始页。
（8）按F5运行程序，运行效果如图21-13所示。
图21-13 服务器端动态设置阴影属性的初始效果
（9）单击“应用阴影”按钮，此时调用服务器端的Click事件，最终效果如图21-14所示。
图21-14 服务器端动态设置阴影效果
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”节点下，添加登录验证需要的一些条件，如清单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”节点下，添加如下代码。
<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”节点下，添加启用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”节点的内容如清单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．用户定制属性的窗体
实现了登录验证和个性配置后，现在开始创建用户定制属性的窗体。创建步骤如下：
（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);
}
//保存个性化配置-调用个性化服务的方法
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）输入控件的各个属性，单击“应用配置”按钮，此时界面中的阴影控件发生了变化，变化的格式便是用户刚刚定义的属性。
（11）单击“注销”链接，界面切换到登录窗口，重新登录窗口，可以发现阴影控件的样式依然是用户定义的内容。同时自定义的属性，在对应的文本控件上都有体现。效果如图21-21所示。
图21-21 显示的用户定制内容
通过Profile和DropShadow结合的方式，本例实现了用户定制DropShadow的功能。这些功能多用在个性化网站内，促进网站与用户的交互。
21.3 RoundedCorners锐化边角控件
RoundedCorners控件专门用来锐化控件的边角，本节介绍其主要的属性和功能。
21.3.1 简介
RoundedCorners控件和DropShadow控件的锐化效果一样，缺点是没有阴影效果，优点是可以只锐化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的按钮控件，本节介绍其主要属性，并以实例的形式，显示如何在项目中应用此控件。
21.4.1 简介
ToggleButton控件只能应用于控件CheckBox，其最主要的功能，是以自定义图片的形式，显示复选框的选中和未选状态，确切的说是一个根据状态变化的图片按钮。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：选中状态下的提示文本。
l UncheckedImageAlternateText：未选中状态下的提示文本。
l UncheckedImageUrl：未选中状态下显示的图片地址。
l CheckedImageUrl：选中状态下显示的图片地址。
l DisabledCheckedImageUrl：当控件为不可用状态时，默认选中时要显示的图片。
ToggleButton控件的应用效果如图21-25所示。
图21-25 ToggleButton控件的应用效果
注意：此控件不能应用于CheckBoxList控件。
21.4.2 用ToggleButton装饰CheckBox控件实例
ToggleButton专门用来装饰CheckBox，并不支持其他控件，复选框可以是客户端的，也可以是服务器端的。本例使用ToggleButton来装饰一组服务器端的CheckBox，其中每个得定义又不相同，有CheckBox在不可用状态下的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”，设计最普通的应用，需要提供两个图片，一个用于显示未选中状态的“wrong.jpg”，一个用于显示选中状态的“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”，表示其处于不可用状态，这时就需要定义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的选中状态。
图21-27 ToggleButton实例的运行效果
21.5 UpdatePanelAnimation局部刷新动画控件
UpdatePanelAnimation是应用于UpdatePanel的控件，提供一些动画效果，本节介绍其主要属性，并演示如何在项目中应用此控件。
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的触发，如果要使任何回调完成后，都触发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运行程序，开始界面和普通界面没有区别。
（8）单击“登录”按钮，等待一段时间后，可以看到UpdatePanel区域内，背景颜色发生了变化，有渐变特效。
注意：由于书本印刷的问题，本例没有提供效果图片。
21.6 小结
本章介绍了AjaxControlToolkit中的一些特殊效果，如动画、阴影、个性按钮等，通过这些组件，开发人员可以很轻松的制作美观的页面，用户也可以领略到个性化风格的应用效果。
通过本章的描述，希望读者已经完全明白了AjaxControlToolkit工具包的作用，其主要功能就是提供个性组件，然后让开发人员可以轻松的调用。
鄂公网安备 42010302001612号 