《征服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"//

/>