《征服ASP.NET2.0AJAX》一书的读后总结（21-22章）

第一章动画和图像特效

1.
AnimationExtender控件提供了很多的小动画控件（效果：D:/学习总结(1122)/JavaScript&Ajax学习/征服ASP.NET2.0AJAX书对应的代码/asp[1].net2.0+ajax光盘文件17-23/C21）
<OnLoad>：表示要触发的事件是加载页面时；
<OnClick>：表示要触发的事件是单击控件时；
<OnMouseOver>：表示要触发的事件是鼠标滑过时；
<OnMouseOut>：表示要触发的事件是鼠标移走时；
<OnHoverOver>：与<OnMouseOver>类似，对特定控件而言；
<OnHoverOut>：与<
OnMouseOut >类似，对特定控件而言；
包含的小控件为：
（1）
<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server"
TargetControlID="Panel1">
<Animations >
<OnMouseOver>
<Color Duration=".2"
PropertyKey="color"
StartValue="#FFFFFF"
EndValue="#FF0000"
/>
<!--对Plan实现Color
Animation（变化颜色动画）
-->
<!--Duration：动画显示效果的时间间隔-->
<!--PropertyKey：要设置的属性值-->
<!--StartValue:属性的开始值 -->
<!--EndValue：属性的结束值 -->
<!-- -->
</OnMouseOver>
<OnMouseOut>
<Color Duration=".2" PropertyKey="color" StartValue="#FF0000" EndValue="#FFFFFF" />
</OnMouseOut>
</Animations>
</ajaxToolkit:AnimationExtender>
（2）
<OnMouseOver>
<Fade duration="1" Fps="20" maximumOpacity="0.8"
minimumOpacity="0.2"
/>

<%-- 对Plan实现Fade
Animation（淡入淡出合并动画） --%>
<%-- duration：动画效果的时间间隔 --%>
<%-- Fps：帧/秒的显示速度 --%>
<%-- maximumOpacity：最大透明度 --%>
<%-- minimumOpacity：最小透明度 --%>

</OnMouseOver>
（3）
<OnMouseOver>
<FadeIn duration="1" Fps="20" maximumOpacity="0.8"
minimumOpacity="0.2"
/>
<%-- 对Plan实现Fade
Animation（淡入淡出分开动画） --%>
<%-- duration：动画效果的时间间隔 --%>
<%-- Fps：帧/秒的显示速度 --%>
<%-- maximumOpacity：最大透明度 --%>
<%-- minimumOpacity：最小透明度 --%>

</OnMouseOver>
（4）
<OnClick>
<Resize duration=".1" Fps="20" width="300" height="150"
unit="px"
/>
<%-- 对Plan实现Resize
Animation（可伸缩动画） --%>
<%-- duration：动画效果的时间间隔 --%>
<%-- Fps：帧/秒的显示速度 --%>
<%-- width：变化后的宽度 --%>
<%-- height：变化后的高度 --%>
<%-- unit：高度和宽度的单位，通常为px--%>
</OnClick>

特殊的Action行为：
（1）
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

</div>
<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server"
TargetControlID="btn">
<Animations >
<OnClick>
<EnableAction Enabled="false" />
<%--设置动画目标控件不可用（可以触发单击事件的控件） 注意：由于Disabled属性为HTML控件所有，所以在使用此行为时，目标控件应该为HTML控件。--%>
</OnClick></Animations>
</ajaxToolkit:AnimationExtender>
<input type="button" id="btn" value="单击不可用" runat="server" />
</form>

（2）
<OnClick>
<StyleAction AnimationTarget="btn"
Attribute="display"
Value="none"/>
<%--设置动画目标控件的属性（可以触发单击事件的控件）--%>
<%-- AnimationTarget：要实现特效的控件--%>
<%--Attribute：控件的某个属性--%>
<%-- Value：属性的值--%>
</OnClick>
（3）
<OnClick>
<OpacityAction duration="0.1"
fps="20" opacity="0.6"/>
<%--设置动画目标控件的透明度（可以触发单击事件的控件）--%>
<%-- AnimationTarget：要实现特效的控件--%>
<%-- fps：帧/秒的显示速度--%>
<%-- opacity：透明度的值--%>
</OnClick>
（1）

2.

3.

4.

5.

6.

7.

8.

第二章 其他特效

1、
AlwaysVisibleControl：创建一个始终显示的内容，通常用它来显示菜单、消息和广告
<ajaxToolkit:AlwaysVisibleControlExtender
ID="avce"
runat="server"
TargetControlID="timer"//始终要显示的控件的ID
VerticalSide="Top"
//要显示的控件时的垂直位置，如上、中、下。
VerticalOffset="10"//显示控件时与最上方的距离，相对坐标
HorizontalSide="Right"//要显示的控件时的水平位置，如上、中、下。
HorizontalOffset="10"
//要显示的控件时的水平位置，相对坐标。
ScrollEffectDuration=".1" //当滚动条滚动时，显示控件的显示延迟，这是默认0.1s
/>

2、
Calendar提供的日历控件无法实现客户端选择后隐藏，只能自己写代码，此控件实现了此功能。传统控件有3大问题：
刷新：单击日期后需要刷新页面
焦点获取：无法实现日历控件与TextBox的绑定。
自动隐藏：选择日期后，无法实现自动隐藏。
此控件解决了此问题，并提供日期的多种选择方式。
<ajaxToolkit:CalendarExtender ID="calendarButtonExtender" runat="server"
TargetControlID="Date5"
//与日历绑定的控件必须为TextBox，用来显示最后选择的日期。
CssClass=" MyCalendar " //日历的样式
Format=" MMMM d, yyyy "//日历显示的日期格式
PopupButtonID="Image1" //当日期是通过选择某个按钮弹出的时候，指定按钮的ID
SelectedDate="April 28, 1906" //
PopupPosition="Left"//
OnClientDateSelectionChanged="F"//用户选择日期后发生的事件
OnClientHidden="F" //客户端隐藏日历控件后发生的事件
OnClientHiding="F" //客户端隐藏日历控件前发生的事件
OnClientShowing="F" //客户端显示日历控件前发生的事件
OnClientShown="F"//客户端显示日历控件前后发生的事件
/>

3、
CascadingDropDown：级联下拉列表的选择，当未选择第一级下拉列表，第二级下拉列表不可用，当选择了第二级下拉列表时，第三级才可用，以此类推。（与AutoComplete相似，从服务器获取数据，客户端的代理显示这些数据）

<ajaxToolkit:CascadingDropDown ID="CascadingDropDown3" runat="server"
TargetControlID="DropDownList3"//对应的下拉列表控件的ID
Category="Color"//当前下拉表的类别
PromptText="Please select a
color"//当下拉表中无数据或者未选择数据时给用户的提示
LoadingText="[Loading
colors...]"//加载下拉列表数据时的提示
ServicePath="~/CascadingDropDown/CarsService.asmx"//下拉列表获取数据数据所需的Web服务路径

ServiceMethod="GetDropDownContents"//下拉列表获取数据数据所需的Web方法
ParentControlID="DropDownList2"//控制此下拉列表控件的父级控件
SelectedValue=“”默认的选择值。
/>

4、
ConfirmButton：删除确认按钮是一段JavaScript代码的简单应用。

5、
DynamicPopulate：允许程序在运行过程中更改指定的控件的内容，通过DOM对象的方法。

<ajaxToolkit:DynamicPopulateExtender ID="dp"
BehaviorID="dp1"//行为ID,用于在客户端获取AJAX控件 runat="server"
TargetControlID="Panel1"//需要动态填充内容的控件
ClearContentsDuringUpdate="true"//在更新的时候是否清空内容
PopulateTriggerControlID="Label1"//引发填充事件的控件的ID
ScriptPath=""：获取数据需要使用的web服务
ServiceMethod="GetHtml"//获取数据的方法
UpdatingCssClass="dynamicPopulate_Updating"//更新过程中使用的样式
ContextKey=""//上下文关键字，可通过此关键字判断返回什么类型的数据
CustomScript=""//自定义脚本，此脚本必须能被格式化为字符串。
/>

6、
ModalPopup：弹出控件最大特色就是“模式”窗口风格，当用户选择这个设置时，其他内容都会受到保护。
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"

TargetControlID="LinkButton1"//控制是否弹出控件的ID
PopupControlID="Panel1"//要弹出控件的ID
BackgroundCssClass="modalBackground"// 弹出控件后其他内容的样式
OkControlID="OkButton"//确认按钮的ID
OnOkScript="onOk()"// 单击“确认”按钮时要执行的脚本方法
OnCancelScript=""//单击“取消”按钮时要执行的脚本方法
CancelControlID="CancelButton"//取消按钮的ID
DropShadow="true"//弹出控件是否有阴影
Drag="true"//是否允许弹出式控件拖动
PopupDragHandleControlID="Panel3"// 允许拖拽的控件ID
/>
7、
MutuallyExclusiveCheckBox：过于简单，只能应用于CheckBox,而不能应用于CheckBoxList即只能实现一对一（可以多项）的互斥，不能实现一对多或多对多的互斥。

<b>Must Have</b><br />
<asp:Checkbox runat="server" ID="MustHaveGuestBedroomCheckBox"
Text="Guest Bed Downstairs" /><br />
<ajaxToolkit:MutuallyExclusiveCheckboxExtender runat="server" ID="MustHaveGuestBedroomCheckBoxEx"
TargetControlID="MustHaveGuestBedroomCheckBox"//被控制的复选框的ID
Key="GuestBedroomCheckBoxes"//区分互斥复选框的键值
/>

<b>Must Not Have</b><br />
<asp:Checkbox runat="server" id="MustNotHaveGuestBedroomCheckBox"
Text="Guest Bed Downstairs" /><br />
<ajaxToolkit:MutuallyExclusiveCheckboxExtender ID="MutuallyExclusiveCheckboxExtender1" runat="server"
TargetControlID="MustNotHaveGuestBedroomCheckBox"
Key="GuestBedroomCheckBoxes" />

8、
NoBot：生成人类很容易通过但计算机却通不过的测试，主要用来提高垃圾邮件和非法注册等操作的安全性。

<ajaxToolkit:NoBot ID="NoBot1" runat="server" OnGenerateChallengeAndResponse="CustomChallengeResponse"//自定义的相应事件，用于反BOT ResponseMinimumDelaySeconds="2"//响应的最小延迟，单位S
/>
它不属于任何控件，只是表单提交时的预防措施。
9、
NumericUpDown用来为TextBox控件添加上下按钮，当单击按钮时，可以实现数字的加减，同时提供静态数据，实现数据的上下选择。
<ajaxToolkit:NumericUpDownExtender ID="NumericUpDownExtender3" runat="server"
TargetControlID="TextBox3"//需要进行加减操作的TextBoxID
Tag=""//使用WEB服务时自定义的参数
Width="120"//TextBox显示的宽度，默认为0（不显示）
ServiceUpPath="NumericUpDown.asmx"//“上”操作调用的WEB服务
ServiceDownPath="NumericUpDown.asmx"//“下”操作调用的WEB服务
ServiceUpMethod="NextValue"
//“上”操作调用的WEB服务方法
ServiceDownMethod="PrevValue"//“下”操作调用的WEB服务方法
RefValues=""//进行上下操作的一些静态值
TargetButtonDownID=""//进行“下”操作的按钮
TargetButtonUpID=""//进行“上”操作的按钮
Step=""//加减数据的跨度。

/>
10、PagingBulletedList：显示一些列表项，其主要的扩展对象是ASP.NET2.0 BulletedList控件。其扩展属性如下：
可以使用字符和数字作为标题的索引
可以指定每个索引显示的项目数
可以在客户端对显示的项目进行排序
<ajaxToolkit:PagingBulletedListExtender ID="PagingBulletedListExtender1" runat="server"
BehaviorID="PagingBulletedListBehavior1"
TargetControlID="BulletedList1"//要应用PagingBulletedListExtender控件的BulletedList的ID
ClientSort="true"//列表项是否在客户端进行排序
IndexSize="1"//标题索引的字符个数
MaxItemPerPage=""//每页显示的最大项目数，和IndexSize属性类似，两个属性不能同时使用
Separator=" - "//标题索引的间隔符
SelectIndexCssClass="selectIndex"//选中标题索引时应用的样式
UnselectIndexCssClass="unselectIndex"// 未选中标题索引应用的样式
/>

11、Rating：显示的是等级信息，而且是以图片的样式展现的。可以设置这些图片的排列方式，显示样式等，还可以通过单击这些图片来设置等级，MISCOSOFT提供的等级图片为“星”。

<ajaxToolkit:Rating ID="ThaiRating" runat="server" BehaviorID="RatingBehavior1"
CurrentRating="2"//当前等级
MaxRating="5"//最大等级
StarCssClass="ratingStar"//星的样式
WaitingStarCssClass="savedRatingStar"//更
FilledStarCssClass="filledRatingStar"//
EmptyStarCssClass="emptyRatingStar"//
OnChanged="ThaiRating_Changed"//
style="float: left;"//
/>
12、ReorderList：显示数据的控件，其功能与GridView、DataList 和Repeater等相似，都可以绑定数据，支持各种模板，此控件的最大优势在于，允许用户自定义的显示即用户可以拖拽行到任意位置，同时支持客户端排序，提高性能。

<ajaxToolkit:ReorderList ID="ReorderList1"
runat="server"
PostBackOnReorder="false"//
DataSourceID="ObjectDataSource1"//绑定的数据源控件ID
CallbackCssStyle="callbackStyle"//
DragHandleAlignment="Left"//可拖拽控件显示的位置
ItemInsertLocation="Beginning"//插入数据后显示的位置
DataKeyField="ItemID"//数据源的主键
SortOrderField="Priority"//排序字段
AllowReorder="true"//是否支持记录的拖拽，如果已经设置了RecorderTemplate,则此属性默认为true
PostBackOnReorder="true"：页面是否回调，如果执行添加和删除操作时，此属性必须为true
>
<ItemTemplate>//显示数据模板
<div class="itemArea">
<asp:Label ID="Label1" runat="server"
Text='<%#
HttpUtility.HtmlEncode(Convert.ToString(Eval("Title"))) %>' />
<asp:Label ID="Label2" runat="server"
Text='<%#
HttpUtility.HtmlEncode(Convert.ToString(Eval("Description", " -
{0}"))) %>' />
</div>
</ItemTemplate>
<EditItemTemplate>
<div class="itemArea">
<asp:TextBox ID="TextBox2" runat="server" Text='<%#
Bind("Title") %>' ValidationGroup="edit" />
<asp:TextBox ID="TextBox3"
runat="server"
Text='<%#
Bind("Description") %>' ValidationGroup="edit" />
<asp:TextBox ID="TextBox4" runat="server" Text='<%#
Bind("Priority") %>' ValidationGroup="edit" />
</div>
</EditItemTemplate>
<ReorderTemplate>//用户选择了拖拽记录后的模板
<asp:Panel ID="Panel2" runat="server" CssClass="reorderCue" />
</ReorderTemplate>
<DragHandleTemplate>//显示拖拽位置的模板
<div class="dragHandle"></div>
</DragHandleTemplate>
<InsertItemTemplate>添加记录时的模板
<!-- bottom border is workaround for IE7 Beta issue
where bg doesn't render -->
<div style="padding-left:25px;
border-bottom:thin solid transparent;">
<asp:Panel ID="panel1" runat="server"
DefaultButton="Button1">
<asp:TextBox ID="TextBox1"
runat="server"
Text='<%#
Bind("Title") %>' ValidationGroup="add" />
<asp:Button ID="Button1"
runat="server"
CommandName="Insert"
Text="Add" ValidationGroup="add" />
<asp:RequiredFieldValidator
ID="RequiredFieldValidator1"
runat="server"
ValidationGroup="add"

ErrorMessage="Please
enter some text" ControlToValidate="TextBox1" />
</asp:Panel>
</div>
</InsertItemTemplate>
</ajaxToolkit:ReorderList>
</div>

<asp:ObjectDataSource ID="ObjectDataSource1"
runat="server"
DeleteMethod="Delete"
InsertMethod="Insert"
OldValuesParameterFormatString="original_{0}" SelectMethod="Select"
TypeName="SessionTodoXmlDataObject"
UpdateMethod="Update">
<DeleteParameters>
<asp:Parameter Name="Original_ItemID"
Type="Int32"
/>
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="Title"
Type="String"
/>
<asp:Parameter Name="Description"
Type="String"
/>
<asp:Parameter Name="Priority"
Type="Int32"
/>
<asp:Parameter Name="Original_ItemID" Type="Int32" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="Title"
Type="String"
/>
<asp:Parameter Name="Description"
Type="String"
/>
<asp:Parameter Name="Priority"
Type="Int32"
/>
</InsertParameters>
</asp:ObjectDataSource>

13、ResizableControl：可以改变页面上任意控件高度和宽度，可以引起页面的回调，也支持客户端的事件。开发人员在服务器和客户端都可以捕获控件发生的改变；
<ajaxToolkit:ResizableControlExtender ID="ResizableControlExtender1" runat="server"
BehaviorID="ResizableControlBehavior1"//
TargetControlID="PanelImage"//需要改变窗体大小的ID
ResizableCssClass="resizingImage"//改变控件大小时应用的样式
HandleCssClass="handleImage"//在控件中支持改变的位置所用的样式
MinimumWidth="50"//允许控件伸缩的最小宽度
MinimumHeight="26"//允许控件伸缩的最小高度
MaximumWidth="250"//允许控件伸缩的最大宽度
MaximumHeight="170"//允许控件伸缩的最大宽度
HandleOffsetX="3"//在控件中支持改变的位置,一般是控件右下角的相对坐标
HandleOffsetY="3"//在控件中支持改变的位置
OnClientResize="OnClientResizeImage"//控件伸缩后客户端触发的事件
/>

14、Slider可以个性化的显示当前的数字值，用户还可以通过文本框控制滑的数据值。

<ajaxToolkit:SliderExtender ID="SliderExtender2" runat="server"
BehaviorID="Slider2"//
TargetControlID="Slider2"//应用SliderExtender件的ID控
Minimum="-100"//滑块的最小值
Maximum="100"//滑块的最大值
BoundControlID="Slider2_BoundControl"//绑定到滑块上，用来显示数据的控件ID
Steps="5"//每次滑动时的步骤
Decimals="2"//显示值的小数位数
RaiseChangeOnlyOnMouseUp="true"//鼠标离开滑块时的事件。
Orientation="Vertical"//

EnableHandleAnimation="true"//
/>