zoukankan      html  css  js  c++  java
  • AjaxControlToolKit控件介绍

    代码下载 

    1.Accordion

       功能:实现了QQ、Msn好友分类的折叠效果,就像包含了多个CollapsiblePanels
       细节: (1)不要把Accordion放在Table种同时又把 FadeTransitions 设置为True,这将引起布局混乱
                    (2)每一个 AccordionPane control 有一个Header 和Content的 template
                    (3)在Content中可以进行任意扩展,你什么都可以放上^_^
                    (4)有三种AutoSize modes :None(推荐) Limit  Fill
                    (5)Accordion表现的更像是一个容器
      代码示意:         
          <ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
                ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40"
                TransitionDuration="250" AutoSize="None">
                <Panes>
                    <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
                        <Header>
                            <a href="" onclick="return false;" class="accordionLink">1. Accordion</a></Header>
                        <Content>
                        </Content>
                    </ajaxToolkit:AccordionPane>
                </Panes>
            </ajaxToolkit:Accordion>


    2. AlwaysVisibleControl

        功能:最多的应用是在线小说的目录和不胜其烦的浮动小广告
       细节: (1)避免控件闪烁,把这个控件要在目标位置时使用absolutely position
                    (2) HorizontalSide="Center" VerticalSide="Top" 使用这个方法控制浮动在什么位置
    代码示意:
        <cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" HorizontalSide="Center" VerticalSide="Top"  TargetControlID="Panel1" runat="server">

    3.Animation

       功能:28个控件种效果最酷的!顾名思义实现动画效果
       细节: (1)不只是控件:pluggable, extensible framework
                    (2)用在什么时候:OnLoad  OnClick  OnMouseOver OnMouseOut OnHoverOver OnHoverOut
                    (3)具体使用有很多可以谈的,有理由单独写一个Animation Xml 编程介绍
      代码示意:
       <ajaxToolkit:AnimationExtender ID="ae"
      runat="server" TargetControlID="ctrl">
        <Animations>
            <OnLoad>  </OnLoad>
            <OnClick>  </OnClick>
            <OnMouseOver>  </OnMouseOver>
            <OnMouseOut>  </OnMouseOut>
            <OnHoverOver>  </OnHoverOver>
            <OnHoverOut>  </OnHoverOut>
        </Animations>
    </ajaxToolkit:AnimationExtender>

    4.CascadingDropDown

       功能:DropDownList联动,调用Web Service
       细节: (1)DropDownList行为扩展
                    (2)如果使用Web service 方法签名必须符合下面的形式:
                    [WebMethod]
                    public CascadingDropDownNameValue[] GetDropDownContents(
                    string knownCategoryValues, string category){…}
    代码示意:
                     <ajaxToolkit:CascadingDropDown ID="CascadingDropDown1" runat="server" TargetControlID="DropDownList1" Category="Make"  PromptText="Please select a make"  LoadingText="[Loading makes]"  ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents"/>
                    <ajaxToolkit:CascadingDropDown ID="CascadingDropDown2" runat="server" TargetControlID="DropDownList2" Category="Model" PromptText="Please select a model" LoadingText="[Loading models]" ServiceMethod="GetDropDownContentsPageMethod" ParentControlID="DropDownList1"/>
                    <ajaxToolkit: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"/>

    5.CollapsiblePanel

       功能:Xp任务栏折叠效果
       细节: (1)可以扩展任何一个 ASP.NET Panel control
                    (2) CollapsiblePanel 默认认为使用了 标准 CSS box model 早期的浏览器要!DOCTYPE 中设置页面为自适应方式提交数据rendered in IE’s standards-compliant mode.
    代码示意:
       <ajaxToolkit: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"/>

    6.ConfirmButton

       功能:就是弹出来一个确定对话框
       细节: 本人认为不是最简单实现的方法,我的方法:
       this.Button1.Attributes["onclick"]="javascript:return confirm(‘确定要停止下载么?’);";
          不知道是不是我没有发现这个控件的其它优势。

    7.DragPanel

       功能:页面拖动
       细节: (1)TargetControlID 要拖动的控件
                    (2)DragHandleID   拖动的标题栏所在的ControlID
    代码示意
    <ajaxToolkit:DragPanelExtender ID="DPE1" runat="server"
        TargetControlID="Panel3"
        DragHandleID="Panel4" />

    8.DropDown

       功能:什么都可以以下拉菜单的形式弹出来
       细节: (1)TargetControlID要在什么控件上实现扩展
                    (2)DropDownControlID弹出来什么
    代码示意:
      <asp:Panel ID="DropPanel" runat="server" CssClass="ContextMenuPanel" Style="display: none;
                visibility: hidden;">
                 <asp:LinkButton runat="server" ID="Option1" Text="Option 1" CssClass="ContextMenuItem"
                    OnClick="OnSelect" />
                <asp:LinkButton runat="server" ID="Option2" Text="Option 2" CssClass="ContextMenuItem"
                    OnClick="OnSelect" />
                <asp:LinkButton runat="server" ID="Option3" Text="Option 3 (Click Me!)" CssClass="ContextMenuItem"
                    OnClick="OnSelect" />
            </asp:Panel>
            <cc1:DropDownExtender runat="server" ID="DDE" TargetControlID="TextLabel"
                DropDownControlID="DropPanel" />

    9.DropShadow

       功能:阴影效果,其实可以放给美工实现
       细节: (1)Width 单位:px  默认5px
                    (2)Opacity  不透明度0-1.0 默认.5
      代码示意:
        <ajaxToolkit:DropShadowExtender ID="dse" runat="server"
            TargetControlID="Panel1"
            Opacity=".8"
            Rounded="true"
            TrackPosition="true" />

    10.DynamicPopulate

       功能:能实用Web Service或页面方法来替换控件的内容
       细节: (1)ClearContentsDuringUpdate  替换之前先清除以前的内容(默认True)
                    (2)PopulateTriggerControlID 触发器绑定的控件 单击时触发
                    (3)ContextKey传递给Web Service的随机字符串
                    (4) Web Service方法签名必须符合下面的形式:
                    [WebMethod]
                    string DynamicPopulateMethod(string contextKey)
                    {…}
                    Note you can replace "DynamicPopulateMethod" with a naming of your choice, but the return
                    type and parameter name and type must exactly match, including case.
    代码示意:
    <ajaxToolkit:DynamicPopulateExtender ID="dp" runat="server"
        TargetControlID="Panel1"
        ClearContentsDuringUpdate="true"
        PopulateTriggerControlID="Label1"
        ServiceMethod="GetHtml"
        UpdatingCssClass="dynamicPopulate_Updating" />

    11.FilteredTextBox

       功能:文本框数据过滤
       细节: (1)过滤条件Numbers LowercaseLetters UppercaseLetters   Custom
                    (2)过滤条件也可以是Custom的组合 FilterType="Custom, Numbers"
                    (3)ValidChars="+-=/*()." Custom要定义这样的有效字符串
                    (4) 其实这是个鸡肋:你可以输入中文,聊胜于无,忍了
    示意代码:
    <ajaxToolkit:FilteredTextBoxExtender ID="ftbe" runat="server"
            TargetControlID="TextBox3"       
            FilterType="Custom, Numbers"
            ValidChars="+-=/*()." />

    12.HoverMenu

       功能:鼠标靠近时显示菜单,可以用在在线数据修改的表格上作为功能菜单
       细节: (1)PopupControlID要弹出来什么
                    (2)PopupPostion 在哪里弹出来Left (Default), Right, Top, Bottom, Center.
                    (3)OffsetX/OffsetY 弹出项与源控件的距离
                    (4) PopDelay 弹出延时显示 单位milliseconds. Default is 100.
    代码示意:
    <ajaxToolkit:HoverMenuExtender ID="hme2" runat="Server"
        TargetControlID="Panel9"
        HoverCssClass="popupHover"
        PopupControlID="PopupMenu"
        PopupPosition="Left"
        OffsetX="0"
        OffsetY="0"
        PopDelay="50" />

    13.ModalPopup

       功能:Xp的关机效果,后面全部灰掉,很多邮箱的删除对话框都着种效果
       细节: (1)本质上讲这是一个对话框模版,比ConfirmButton有意义有更强的扩展性!
                    (2)从下面的代码中我们发现 点OK的时候可以调用后台方法
                    (3)同时可以执行一段脚本
    代码示意:
      <asp:Panel ID="Panel2" runat="server" CssClass="modalPopup" style="display:none">
            <p>
                <asp:Label ID="Label1" runat="server" BackColor="Blue" ForeColor="White" Style="position: relative"
                    Text="信息提示"></asp:Label>&nbsp;</p>
            <p >确定要删除当前下载的任务么?</p>
            <p style="text-align:center;">
            <asp:Button ID="Button1" runat="server" Text="OK" ></asp:Button>
            <asp:Button ID="Button2" runat="server" Text="Cancel"></asp:Button>
            </p>
        </asp:Panel>
        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="LinkButton1"
        PopupControlID="Panel2" BackgroundCssClass="modalBackground" DropShadow="true"
        OkControlID="Button1" OnOkScript="onOk()" CancelControlID="CancelButton" />

    14.MutuallyExlcusiveCheckBox

       功能:互斥复选框就像Radio一样
       细节: (1)Key属性用来分组就像RdiolistGroup一样
                    (2)argetControlID用来绑定已有的CheckBox
       代码示意:
                   <ajaxToolkit:MutuallyExclusiveCheckboxExtender runat="server"
        ID="MustHaveGuestBedroomCheckBoxEx"
        TargetControlID="MustHaveGuestBedroomCheckBox"
        Key="GuestBedroomCheckBoxes" />

    15.NoBot

       功能:Captcha 图灵测试 反垃圾信息控件
       细节: (1)OnGenerateChallengeAndResponse 这个属性是EventHandler<NoBotEventArgs> 调用服务器端的方法,注意方法签名
                           例如:   protected void CustomChallengeResponse(object sender, NoBotEventArgs e) {……} 代码示意:
        <ajaxToolkit:NoBot
      ID="NoBot2"
      runat="server"
      OnGenerateChallengeAndResponse="CustomChallengeResponse"
      ResponseMinimumDelaySeconds="2"
      CutoffWindowSeconds="60"
      CutoffMaximumInstances="5" />

    16.NumericUpDown

       功能:实现Winform里面的Updown
       细节: (1)普通整数增减
                    (2)值列表循环显示比如下面的第二个例子RefValues
                    (3)调用Web Service的格式:
    <ajaxToolkit:NumericUpDownExtender ID="NUD1" runat="server"
        TargetControlID="TextBox1"
        Width="100"
        RefValues="January;February;March;April"
        TargetButtonDownID="Button1"
        TargetButtonUpID="Button2"
        ServiceDownPath="WebService1.asmx"
        ServiceDownMethod="PrevValue"
        ServiceUpPath="WebService1.asmx"
        ServiceUpMethod="NextValue"
        Tag="1" />
    代码示意:
               <ajaxToolkit:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server"
                        TargetControlID="TextBox1" Width="120" RefValues=""
                        ServiceDownMethod="" ServiceUpMethod="" TargetButtonDownID="" TargetButtonUpID="" />
                    <ajaxToolkit:NumericUpDownExtender ID="NumericUpDownExtender2" runat="server"
                        TargetControlID="TextBox2" Width="120" RefValues="January;February;March;April;May;June;July;August;September;October;November;December"
                        ServiceDownMethod="" ServiceUpMethod="" TargetButtonDownID="" TargetButtonUpID="" />
                           <ajaxToolkit:NumericUpDownExtender ID="NumericUpDownExtender4" runat="server"
                        TargetControlID="TextBox4" Width="80" TargetButtonDownID="img1"
                        TargetButtonUpID="img2" RefValues="" ServiceDownMethod="" ServiceUpMethod="" />

    17.PagingBulletedList

       功能:扩展BulletedList的分页功能
       细节: (1)可以控制每页最多显示多少条,是否排序
                    (2)IndexSize表示index headings 的字符数,如果MaxItemPerPage设置了概属性被忽略
                    (3)MaxItemPerPage分页每页最大条数
    代码示意:
    <ajaxToolkit:PagingBulletedListExtender ID="PagingBulletedListExtender1" BehaviorID="PagingBulletedListBehavior1" runat="server"
                        TargetControlID="BulletedList1"
                        ClientSort="true"
                        IndexSize="1"
                        Separator=" – "
                        SelectIndexCssClass="selectIndex"
                        UnselectIndexCssClass="unselectIndex" />

    18.PasswordStrength

       功能:验证密码强度
       细节: StrengthIndicatorType两种显示方式:文字提示,进度条提示
    代码示意:
    <ajaxToolkit:PasswordStrength ID="PasswordStrength1" runat="server" DisplayPosition="RightSide" TargetControlID="TextBox1"
                        StrengthIndicatorType="Text" PreferredPasswordLength="10" PrefixText="Strength:"
                        HelpStatusLabelID="TextBox1_HelpLabel" TextCssClass="TextIndicator_TextBox1"  TextStrengthDescriptions="Very Poor;Weak;Average;Strong;Excellent"
                        MinimumNumericCharacters="0" MinimumSymbolCharacters="0" RequiresUpperAndLowerCaseCharacters="false"/>
        <ajaxToolkit:PasswordStrength ID="PasswordStrength2" runat="server" DisplayPosition="RightSide" TargetControlID="TextBox2"
                        StrengthIndicatorType="BarIndicator" PreferredPasswordLength="15" HelpStatusLabelID="TextBox2_HelpLabel"
                         BarIndicatorCssClass="BarIndicator_TextBox2" BarBorderCssClass="BarBorder_TextBox2"
                         MinimumNumericCharacters="1" MinimumSymbolCharacters="1" RequiresUpperAndLowerCaseCharacters="true" />
        <ajaxToolkit:PasswordStrength ID="PasswordStrength3" runat="server" DisplayPosition="BelowLeft" TargetControlID="TextBox3"
                        StrengthIndicatorType="Text" PreferredPasswordLength="20" PrefixText="Meets Policy? " TextCssClass="TextIndicator_TextBox3"
                         MinimumNumericCharacters="2" MinimumSymbolCharacters="2" RequiresUpperAndLowerCaseCharacters="true"
                         TextStrengthDescriptions="Not at all;Very Low compliance;Low Compliance;Average Compliance;Good Compliance;Very High Compliance;Yes"
                         HelpHandleCssClass="TextIndicator_TextBox3_Handle" HelpHandlePosition="LeftSide" />

    19.PopupControl

       功能:任何控件上都可以弹出任何内容
       细节: (1)TargetControlID – The ID of the control to attach to
                    (2)PopupControlID – The ID of the control to display
                    (3)CommitProperty -属性来标识返回的值
                    (4) CommitScript -把返回结果值通过脚本处理,用到CommitProperty
      代码示意:
          <ajaxToolkit:PopupControlExtender  ID="PopupControlExtender2" runat="server" TargetControlID="MessageTextBox"
          PopupControlID="Panel2" CommitProperty="value" CommitScript="e.value += ‘ – do not forget!’;" Position="Bottom" />

    20.Rating

       功能:级别控件
       细节: 又是一个鸡肋,没有太大实用价值,看代码吧
       代码示意:
       <ajaxToolkit:Rating ID="ThaiRating" runat="server"
        CurrentRating="2"
        MaxRating="5"
        StarCssClass="ratingStar"
        WaitingStarCssClass="savedRatingStar"
        FilledStarCssClass="filledRatingStar"
        EmptyStarCssClass="emptyRatingStar"
        OnChanged="ThaiRating_Changed" />

    21.ReorderList

       功能:这个控件的炫酷程度仅次于Animation ,可以动态移动数据
       细节: (1)绑定数据,拖动数据之后数据将被更新到绑定源
                    (2)它不是已有控件的扩展是全新的服务器端控件,只是它对Ajax行为是敏感的
                    (3)重排的实现有两种方式:CallBack PostBack 前者的发生在页面上是没有PostBack的(也就是没有刷新页面)
                    (4) 而数据添加或者编辑的时候就必须要使用PostBack来同步服务器端的数据状态
                    (5)PostbackOnReorder就是针对两种策略进行选择
                    (6)可以扩展的很多,三言两语难以说尽给出基本框架吧,回头再说
    代码示意:
       <ajaxToolkit:ReorderList ID="ReorderList1" runat="server"
        DataSourceID="ObjectDataSource1"
        DragHandleAlignment="Left"
        ItemInsertLocation="Beginning"
        DataKeyField="ItemID"
        SortOrderField="Priority"
        AllowReorder="true">
          <ItemTemplate></ItemTemplate>
          <ReorderTemplate></ReorderTemplate>
          <DragHandleTemplate></DragHandleTemplate>
          <InsertItemTemplate></InsertItemTemplate>
    </ajaxToolkit:ReorderList>

    22.ResizableControl

       功能:就像设计状态一样可以拖动修改大小,可是有什么实际的意义么,放大字体?没有想到
       细节: (1)HandleCssClass – The name of the CSS class to apply to the resize handle 这个属性必须要有!
      代码示意:
    <ajaxToolkit:ResizableControlExtender ID="RCE" runat="server"
        TargetControlID="PanelImage"
        HandleCssClass="handleImage"
        ResizableCssClass="resizingImage"
        MinimumWidth="50"
        MinimumHeight="20"
        MaximumWidth="260"
        MaximumHeight="130"
        OnClientResize="OnClientResizeImage"
        HandleOffsetX="3"
        HandleOffsetY="3" />

    23.RoundedCorners

       功能:控件圆角 纯粹是控制外观的了,什么时候审美疲劳了还要改,呵呵
       细节: (1)还有一个非常非常坑人的地方:你必须要设置 CssClass="roundedPanel"要不然不起作用
                    (2) Radius设置弧度,默认是5
                    (3)好象只适用于容器
    代码示意:
                  <ajaxToolkit:RoundedCornersExtender ID="rce" runat="server"     TargetControlID="Panel1"     Radius="6" />

    24.Slider

       功能:实现WinForm中的Slider控件效果
       细节: (1)修改文本框的值也可以影响Slider的状态!这个反馈还是有用的!
      代码示意:
                  <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>                             
        <cc1:SliderExtender ID="SliderExtender2" runat="server"
                                    BehaviorID="Slider2"
                                    TargetControlID="Slider2"
                                    BoundControlID="TextBox1"
                                    Orientation="Horizontal"
                                    EnableHandleAnimation="true"
                                     Minimum="0"
                                    Maximum="100"
                                    />

    25.TextBoxWatermark

       功能:文本水印
       细节: 没有什么说的看代码—>
    代码示意:
        <asp:TextBox ID="TextBox1" CssClass="unwatermarked" Width="150" runat="server"></asp:TextBox>
                <cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" TargetControlID="TextBox1" WatermarkText="请输入用户名" WatermarkCssClass="watermarked" />

    26.UpdatePanelAnimation

       功能:更新动画效果
       细节:代码结构简单但是要说的东西很多,回头再说写专题吧
    代码示意:
      <ajaxToolkit:UpdatePanelAnimationExtender ID="ae"
      runat="server" TargetControlID="up">
         <Animations>
            <OnUpdating>  </OnUpdating>
            <OnUpdated>  </OnUpdated>
        </Animations>
    </ajaxToolkit:UpdatePanelAnimationExtender>

    27.ToggleButton

       功能:就是把一个CheckBox的逻辑应用到一个按钮上,于是就有了双态按钮这么个玩意,有点意思啊
       闲言少叙,看代码:
    <asp:CheckBox ID="CheckBox1" Checked="true" Text="I like ASP.NET" runat="server"/>
        <cc1:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server" TargetControlID="CheckBox1" ImageWidth="19"
         ImageHeight="19" UncheckedImageUrl="Image/down.gif" CheckedImageUrl="Image/up.gif" CheckedImageAlternateText="Check"
         UncheckedImageAlternateText="UnCheck" />

    28.ValidatorCallout

       功能:Windows系统中最常见的气泡提示,比如你磁盘空间不足的时候……
       细节: 是对数据验证控件的扩展,比较新鲜
    代码示意:
    <asp:RequiredFieldValidator runat="server" ID="NReq" ControlToValidate="NameTextBox" Display="None" ErrorMessage="<b>Required Field Missing</b><br />A name is required." />
            <asp:RequiredFieldValidator runat="server" ID="PNReq" ControlToValidate="PhoneNumberTextBox" Display="None" ErrorMessage="<b>Required Field Missing</b><br />A phone number is required.<div style=’margin-top:5px;padding:5px;border:1px solid #e9e9e9;background-color:white;’><b>Other Options:</b><br /><a href=’javascript:alert(&quot;not implemented but you get the idea;)&quot;);’>Extract from Profile</a></div>" />
            <asp:RegularExpressionValidator runat="server" ID="PNRegEx" ControlToValidate="PhoneNumberTextBox" Display="None" ErrorMessage="<b>Invalid Field</b><br />Please enter a phone number in the format:<br />(###) ###-####" ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}" />
            <cc1:ValidatorCalloutExtender runat="Server" ID="NReqE" TargetControlID="NReq" HighlightCssClass="highlight" />
            <cc1:ValidatorCalloutExtender runat="Server" ID="PNReqE" TargetControlID="PNReq" HighlightCssClass="highlight" Width="350px" />
            <cc1:ValidatorCalloutExtender runat="Server" ID="PNReqEx" TargetControlID="PNRegEx" HighlightCssClass="highlight" />

  • 相关阅读:
    vmware ubuntu 异常关机无法连接到网络
    Speed up GCC link
    常用的一些解压命令
    Log4j 漏洞复现
    Test Case Design method Boundary value analysis and Equivalence partitioning
    CCA (Citrix Certified Administrator) exam of “Implementing Citrix XenDesktop 4”
    What is Key Word driven Testing?
    SAP AGS面试小结
    腾讯2013终端实习生一面
    指针的引用
  • 原文地址:https://www.cnblogs.com/qixuejia/p/1653462.html
Copyright © 2011-2022 走看看