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

<!--[if !supportLists]-->第一章<!--[endif]-->动画和图像特效
<!--[if !supportLists]-->1. <!--[endif]-->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）

 

 

<!--[if !supportLists]-->2. <!--[endif]-->

<!--[if !supportLists]-->3. <!--[endif]-->

<!--[if !supportLists]-->4. <!--[endif]-->

<!--[if !supportLists]-->5. <!--[endif]-->

<!--[if !supportLists]-->6. <!--[endif]-->

<!--[if !supportLists]-->7. <!--[endif]-->

<!--[if !supportLists]-->8. <!--[endif]-->

<!--[if !supportLists]-->第二章<!--[endif]--> 其他特效
<!--[if !supportLists]-->1、 <!--[endif]-->AlwaysVisibleControl：创建一个始终显示的内容，通常用它来显示菜单、消息和广告

<ajaxToolkit:AlwaysVisibleControlExtender ID="avce" runat="server"

TargetControlID="timer"//始终要显示的控件的ID

VerticalSide="Top" //要显示的控件时的垂直位置，如上、中、下。

VerticalOffset="10"//显示控件时与最上方的距离，相对坐标

HorizontalSide="Right"//要显示的控件时的水平位置，如上、中、下。

HorizontalOffset="10" //要显示的控件时的水平位置，相对坐标。

ScrollEffectDuration=".1" //当滚动条滚动时，显示控件的显示延迟，这是默认0.1s

/>

 

<!--[if !supportLists]-->2、 <!--[endif]-->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"//客户端显示日历控件前后发生的事件

/>

 

<!--[if !supportLists]-->3、 <!--[endif]-->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=“”默认的选择值。

/>

 

<!--[if !supportLists]-->4、 <!--[endif]-->ConfirmButton：删除确认按钮是一段JavaScript代码的简单应用。

 

 

 

<!--[if !supportLists]-->5、 <!--[endif]-->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=""//自定义脚本，此脚本必须能被格式化为字符串。

/>

 

<!--[if !supportLists]-->6、 <!--[endif]-->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

/>

<!--[if !supportLists]-->7、 <!--[endif]-->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" />

 

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

 

<ajaxToolkit:NoBot ID="NoBot1" runat="server" OnGenerateChallengeAndResponse="CustomChallengeResponse"//自定义的相应事件，用于反BOT ResponseMinimumDelaySeconds="2"//响应的最小延迟，单位S

/>

它不属于任何控件，只是表单提交时的预防措施。

<!--[if !supportLists]-->9、 <!--[endif]-->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=""//加减数据的跨度。

 

/>

<!--[if !supportLists]-->10、<!--[endif]-->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"// 未选中标题索引应用的样式

/>

 

<!--[if !supportLists]-->11、<!--[endif]-->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;"//

/>

<!--[if !supportLists]-->12、<!--[endif]-->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>

 

<!--[if !supportLists]-->13、<!--[endif]-->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"//控件伸缩后客户端触发的事件

/>

 

<!--[if !supportLists]-->14、<!--[endif]-->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"//

/>

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/zhang_xiao_qing_c_s_/archive/2009/02/10/3874137.aspx