Ajax Control Toolkit 34个服务器端控件.docx

Ajax Control Toolkit 34个服务器端控件.docx

《Ajax Control Toolkit 34个服务器端控件.docx》由会员分享，可在线阅读，更多相关《Ajax Control Toolkit 34个服务器端控件.docx（24页珍藏版）》请在冰豆网上搜索。

AjaxControlToolkit34个服务器端控件

1.Accordion

【功能概述】

Accordion可以让你设计多个panel并且一次只显示一个Panel.在页面上的显示效果就像是使用了多个CollapsiblePanels只不过每一次只展开其中一个CollapsiblePanel.Accordion控件内部包含了若干个AccordionPane，每一个AccordionPane的template里包括了对其Header和Content的定义。

我们可以在后台代码中通过SelectedIndex属性取得当前展开的哪一个Panel，还可以控制哪一个Panel展开。

经常可以见到类似的效果，比如QQ、Msn好友分类的折叠效果。

【细节】

（1）不要把Accordion放在Table中而又把FadeTransitions设置为True，这将引起布局混乱

（2）在AccordionPane模板中的Content中可以定义任何Web元素，表现的就像一个容器

（3）AccordionPane内容模板自动改变大小有三种AutoSizemodes：

None（推荐）Limit Fill

（4）$find（'ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender'）这里找到的是Behavior.什么是Behavior呢？

在AAjax框架中包含一组动作并完成一个功能.Accordion的一个Behavior就是淡入淡出.

找到Behavior的引用，behavior.set_FadeTransitions（）behavior.get_FadeTransitions（）的方式来实现具体某一个Behavior的访问和修改.

varbehavior=$find（'ctl00_SampleContent_MyAccordion_AccordionExtender'）;这种写法是不好的，我们在自动测试的页面中发现了更好的写法：

varbehavior=$find（"<%=MyAccordion.ClientID%>_AccordionExtender"）;

【代码示意】

            function toggleFade（） {

                var behavior = $find（'ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender'）;

                if （behavior） {        

                    behavior.set_FadeTransitions（!

behavior.get_FadeTransitions（））;

                }

            }

            function changeAutoSize（） {

                var behavior = $find（'ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender'）;

                var ctrl = $get（'autosize'）;    //这里找的是下拉列表控件,不是Behavior

                if （behavior） {

                    var size = 'None';   // 这里顺便看看怎么使用Select

                    switch （ctrl.selectedIndex） {

                        case 0 :

                            behavior.get_element（）.style.height = 'auto';

                            size = AjaxControlToolkit.AutoSize.None;

                            break;

                        case 1 :

                            behavior.get_element（）.style.height = '400px';

                            size = AjaxControlToolkit.AutoSize.Fill;

                            break;

                        case 2 :

                            behavior.get_element（）.style.height = '400px';

                            size = AjaxControlToolkit.AutoSize.Limit;

                            break;

                    }

                    behavior.set_AutoSize（size）;

                }

                if （document.focus） {

                    document.focus（）;

                }

            }

Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"

            ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40"

            TransitionDuration="250" AutoSize="None">

AccordionPane ID="AccordionPane1" runat="server">

AccordionPane>

Accordion> 

2.AlwaysVisibleControl

【功能概述】

AlwaysVisibleControl是一个简单的扩展控件可以让一部分内容浮动在页面上，当滚动页面或者改变浏览器大小时总是可见的。

它可以扩展任意一个A控件，并可按照要求设置水平竖直方向上的相对距离.

最多的应用是在线阅读的目录和不胜其烦的浮动小广告。

【细节】

（1）  避免控件闪烁，要扩展的控件要使用absolutelyposition

（2）  HorizontalSide="Center"VerticalSide="Top"使用这个方式控制浮动的位置

（3）  Varlabel=ocument.getElementById（'ctl00_SampleContent_currentTime'）;这行代码我们可以使用更简单的方法：

     varlabel=$get（'ctl00_SampleContent_currentTime'）;

【代码示意】

 代码示意：

AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" HorizontalSide="Center" VerticalSide="Top"  TargetControlID="Panel1" runat="server">

3.Animation

【功能概述】

28个控件种效果最酷的！

顾名思义实现动画效果。

它是一个插入式，可扩展的框架可以方便的为你的页面添加动画效果。

【细节】

请参考页面代码阅读下面的细节内容:

（1）Sys.UI.DomElement.getLocation（b）取得控件位置的函数，常用！

！

！

（2）动画分为两种：

AnimationAction后者的强大让我很兴奋

    （3） 顺序执行的动画脚本

    （4）  并发执行的动画脚本

    （5）【Action】控制目标元素外观样式，属性--值的格式修改，一个元素可以应用多个StyleAction

     （6）【Action】控件是否可用使用的方式跟上面是一样的，当前控件可省略AnimationTarget

 （7）【Action】执行一段脚本的Action          

   （8）【Action】隐藏目标的控件

   （9）【Action】设置透明度的Action

  （10）【Animation】      淡入淡出   

 （11）【Animation】   控制目标元素的大小但是注意：

IfscaleFontistrue,thesizeofthefontwillalsoscalewiththeelement. Ifcenteristrue,thentheelement'scenterwillnotmoveasitisscaled.Itisimportanttonotethatthetargetmustbepositioned（i.e.absolutely）sothatsettingsitstop/leftpropertieswillchangeitslocationinorderforcentertohaveaneffect.

     （12）【Animation】   脉搏跳动效果         

     （13）【Animation】 颜色渐变效果，设置起始结束颜色就可以

    （14） 【Animation】改变元素的大小Action

（15）动画效果是在用户某一个动作发生的时候触发，触发的时机包括：

OnLoad OnClick OnMouseOverOnMouseOutOnHoverOverOnHoverOut

正式版的页面文件为动画脚本添加了注释更加清晰易懂.上面列出的是常用的一些动画效果，全部资料参见AnmationReference。

仔细阅读Animation的页面代码，其实我们已经提前触摸到了Xaml的编程风格。

AAjax之后的下一代WEB界面是WPF/E,WPF/E现在支持的是”javascript+Xaml”还不支持”C#+Xaml”。

下一代的WEBUI会是怎样的？

下一个版本的A会怎样安排Ajax的位置？

WPF/E会不会被整合在新版本的A中呢？

期待中……

【示意代码】

代码示意：

AnimationExtender ID="ae"

  runat="server" TargetControlID="ctrl">

AnimationExtender>

4.AutoCompleteNEW!

!

!

【功能概述】

AutoComplete控件是对A文本框控件的扩展，当用户词汇前面的字母时以弹出区域的形式给出备选词。

这个功能的完成依赖于特定的WebService。

在正式版的AjaxControlToolkit中看到自动完成扩展控件有一种感觉：

它终于出现在了它应该出现的地方。

之前AutoComplete控件是在CTP版本中以核心组件的形式出现的，这个功能极为明确的控件被归类到核心组件，我还是比较迷惑。

正式版中它终于成为了一个扩展控件。

Google的自动完成功能，新浪网易等信箱的收件人自动完成功能是这个功能的成功应用。

【细节】

从Atlas的版本开始，AutoComplete的使用方法就没有太大的改变，只要注意：

（1）调用的WebService方法签名有要求：

          [WebMethod]

          publicstring[]GetCompletionList（stringprefixText,intcount）{...}

（2）MinimumPrefixLength最短前缀字符数，就是说你至少要键入几个字符才会出现提示

5.CalendarNEW!

!

!

【功能概述】

Calendar同样是对文本框的扩展，当点击文本框的时候弹出日期选择选项。

现在的版本提供的功能已经和WinForm中的日期控件一样，可以通过点击日期选择，点击箭头在年月之间切换。

【细节】

（1）同样是对文本框的扩展，文本框获得焦点就会出现日期选择，样式是可以自定义的

（2）虽然一定是对文本框的扩展但是我们还是可以指定弹出按钮PopupButtonID，一旦这个值设定了，文本框获得焦点也不会弹出日期选择

         （3）不需要把它放在UpdatePanel中

6.CascadingDropDown

【功能概述】

CascadingDropDown控件是对ASP.NETDropDownListcontrol的扩展，实现对一个DropDownList操作时其它DropDownList发生相应的变化。

这个功能的实现依赖于WebService。

【细节】

（1）如果使用Webservice方法签名必须符合下面的形式：

               [WebMethod]

               publicCascadingDropDownNameValue[]GetDropDownContents（

               stringknownCategoryValues,stringcategory）{...}

（2）在阅读代码的时候请关注：

Category属性。

官方说法ThenameofthecategorythisDropDownListrepresents实打开~/App_Data/CarsService.xml你就发现这是Xml的元素标签。

从这个角度我们就解决了为什么联动，即联动的本质；同时也明白了调用Service的参数约定。

【示意代码】

CascadingDropDown ID="CascadingDropDown1" runat="server" TargetControlID="DropDownList1" Category="Make"  PromptText="Please select a make"  LoadingText="[Loading makes]"  ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents"/>

CascadingDropDown ID="CascadingDropDown2" runat="server" TargetControlID="DropDownList2" Category="Model" PromptText="Please select a model" LoadingText="[Loading models]" ServiceMethod="GetDropDownContentsPageMethod" ParentControlID="DropDownList1"/>

CascadingDropDown ID="CascadingDropDown3" runat="server" TargetControlID="DropDownList3" Category="Color" PromptText="Please select a color" LoadingText="[Loading colors]" ServicePath="~/CascadingDropDown/CarsService.asmx" ServiceMethod="GetDropDownContents" ParentControlID="DropDownList2"/>

另外页面上还有一段定义UpdatePanel的代码很典型，可以作为参考：

UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="Conditional"RenderMode="inline">

LabelID="Label1"runat="server"Text="[Noresponseprovidedyet]"/>

AsyncPostBackTriggerControlID="DropDownList3"EventName="SelectedIndexChanged"/>

UpdatePanel>

7.CollapsiblePanel

【功能概述】

这个控件几乎在每一个页面上都出现了。

它是非常灵活的一个控件，可以扩展任何ASP.NETPanelcontrol。

在页面上轻松实现展开收缩效果。

这种效果我们最熟悉的恐怕就是XP的文件任务栏了。

【细节】

（1）   CollapsiblePanel默认认为使用了标准CSSboxmodel早期的浏览器要!

DOCTYPE中设置页面为自适应方式提交数据renderedinIE'sstandards-compliantmode.

（2）   可以自动展开自动收缩Autoexpand="true"AutoCollapse="true"但是这两个本身是互斥的不能同时为True;如果设置了这两个属性其中一个为True就不要在设置Collapsed="True"，这样就没有意义了。

（3）   TextLabelID="Label1"这个属性有什么深意\高级的操作么？

我还在研究。

。

。

 代码示意：

CollapsiblePanelExtender ID="cpe" runat="Server"

    TargetControlID="Panel1"

    CollapsedSize="0"

    ExpandedSize="300"

    Collapsed="True"

    ExpandControlID="LinkButton1"

    CollapseControlID="LinkButton1"

    AutoCollapse="False"

    AutoExpand="False"

    ScrollContents="True"

    TextLabelID="Label1"

    CollapsedText="Show Details"

    OpenedText="Hide Details" 

    ImageControlID="Image1"

    ExpandedImage="~/images/collapse.jpg"

    CollapsedImage="~/images/expand.jpg"

    ExpandDirection="Height"/>

8.ConfirmButton

【功能概述】

这个控件是对Button和