ASP.NETAJAXControlTookit使用文档

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

-----------------------------------------------------------
资源
-----------------------------------------------------------
版本：1.0 Beta 2
官方网站：http://ajax.asp.net/default.aspx?tabid=47&subtabid=477
官方下载网站：http://www.codeplex.com/Release/ProjectReleases.aspx?ProjectName=AtlasControlToolkit
官方展示网站：http://ajax.asp.net/ajaxtoolkit/

-----------------------------------------------------------
示例代码（以下是根据展示网站整理出来的。持续更新中）
-----------------------------------------------------------
Accordion
    类似OutlookBar的折叠显示效果
     <ajaxToolkit:Accordion
        ID="MyAccordion"
        runat="Server"
        SelectedIndex="0"
        HeaderCssClass="accordionHeader"
        ContentCssClass="accordionContent"
        AutoSize="None">
        FadeTransitions="true"
        TransitionDuration="250"
        FramesPerSecond="40"
        <Panes>
            <ajaxToolkit:AccordionPane
                HeaderCssClass="accordionHeader"
                ContentCssClass="accordionContent">
                <Header> . . . </Header>
                <Content> . . . </Content>
            </ajaxToolkit:AccordionPane>
            .
            .
            .
        </Panes>
        <HeaderTemplate>...</HeaderTemplate>
        <ContentTemplate>...</ContentTemplate>
        </ajaxToolkit:Accordion>

AlwaysVisibleControl
    类似浮动层效果
    <ajaxToolkit:AlwaysVisibleControlExtender ID="ace" runat="server"
        TargetControlID="timer"
        VerticalSide="Top"
        VerticalOffset="10"
        HorizontalSide="Right"
        HorizontalOffset="10"
        ScrollEffectDuration=".1" />

Animation
    为层的展示添加 Move，Resize，Fade，Color等动画变化效果
    <ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="ctrl">
        <Animations>
            <OnLoad> ... </OnLoad>
            <OnClick> ... </OnClick>
            <OnMouseOver> ... </OnMouseOver>
            <OnMouseOut> ... </OnMouseOut>
            <OnHoverOver> ... </OnHoverOver>
            <OnHoverOut> ... </OnHoverOut>
        </Animations>
        </ajaxToolkit:AnimationExtender>

CascadingDropDown
    局部刷新的级联菜单
    <ajaxToolkit:CascadingDropDown ID="CDD1" runat="server"
        TargetControlID="DropDownList2"
        Category="Model"
        PromptText="Please select a model"
        LoadingText="[Loading models...]"
        ServicePath="CarsService.asmx"
        ServiceMethod="GetDropDownContents"
        ParentControlID="DropDownList1"
        SelectedValue="SomeValue" />
    [WebMethod]
    public CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category){...}

CollapsiblePanel
    可缩放的Panel
     <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"/>

ConfirmButton
    为客户端按钮添加确认对话框功能
    <ajaxToolkit:ConfirmButtonExtender ID="cbe" runat="server"
        TargetControlID="LinkButton1"
        ConfirmText="Are you sure you want to click this?" />

DragPanel
    为层添加可拖动功能
    <ajaxToolkit:DragPanelExtender ID="DPE1" runat="server"
        TargetControlID="Panel3"
        DragHandleID="Panel4" />

DropDown
    点击控件后下拉展现指定的层（如菜单）
    <ajaxToolkit:DropDownExtender runat="server" ID="DDE"
        TargetControlID="TextLabel"
        DropDownControlID="DropPanel" />


DropShadow
    为层添加阴影和圆角效果
    <ajaxToolkit:DropShadowExtender ID="dse" runat="server"
        TargetControlID="Panel1"
        Opacity=".8"
        Rounded="true"
        TrackPosition="true" />


DynamicPopulate
    由 web service 或 page method 返回的html字符串替换
    <ajaxToolkit:DynamicPopulateExtender ID="dp" runat="server"
        TargetControlID="Panel1"
        ClearContentsDuringUpdate="true"
        PopulateTriggerControlID="Label1"
        ServiceMethod="GetHtml"
        UpdatingCssClass="dynamicPopulate_Updating" />

FilteredTextBox
    过滤字符的文本框
     <ajaxToolkit:FilteredTextBoxExtender ID="ftbe" runat="server"
        TargetControlID="TextBox3"
        FilterType="Custom, Numbers"
        ValidChars="+-=/*()." />

HoverMenu
    随光标移动的菜单
    <ajaxToolkit:HoverMenuExtender ID="hme2" runat="Server"
        TargetControlID="Panel9"
        HoverCssClass="popupHover"
        PopupControlID="PopupMenu"
        PopupPosition="Left"
        OffsetX="0"
        OffsetY="0"
        PopDelay="50" />
    <asp:Panel CssClass="popupMenu" ID="PopupMenu"
        runat="server">
        <asp:LinkButton ID="LinkButton1" runat="server"
            CommandName="Edit" Text="Edit" />
        <br />
        <asp:LinkButton ID="LinkButton2" runat="server"
            CommandName="Delete" Text="Delete" />
        </asp:Panel>

ModalPopup
    灯箱效果（弹出模态对话框，背景变灰且不可操作。类似windows关机）
    <ajaxToolkit:ModalPopupExtender ID="MPE" runat="server"
        TargetControlID="LinkButton1"
        PopupControlID="Panel1"
        BackgroundCssClass="modalBackground"
        DropShadow="true"
        OkControlID="OkButton"
        OnOkScript="onOk()"
        CancelControlID="CancelButton" />

MutuallyExclusiveCheckbox
    可互斥的Checkbox
    <ajaxToolkit:MutuallyExclusiveCheckboxExtender runat="server"
        ID="MustHaveGuestBedroomCheckBoxEx"
        TargetControlID="MustHaveGuestBedroomCheckBox"
        Key="GuestBedroomCheckBoxes" />

NoBot
    anti-bot技术。用以限制不安全的请求。如：
        InvalidBadResponse        : 不符合流程的响应
        InvalidResponseTooSoon    : 表单填写的时间过快
        InvalidAddressTooActive   : 提交者的IP出现过于频繁
        InvalidBadSession         : 无效的Session客户
        InvalidUnknown            : 其它不安全的请求
    <ajaxToolkit:NoBot
        ID="NoBot2"
        runat="server"
        OnGenerateChallengeAndResponse="CustomChallengeResponse"
        ResponseMinimumDelaySeconds="2"
        CutoffWindowSeconds="60"
        CutoffMaximumInstances="5" />

NumericUpDown
    就是Windows控件里面的SpinButton
    <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" />

PagingBulletedList
    按关键字分组的控件（类似字典）
    <ajaxToolkit:PagingBulletedListExtender ID="PBLE1" runat="server"
        TargetControlID="BulletedList1"
        ClientSort="true"
        IndexSize="1"
        MaxItemPerPage="20"
        Separator=" - "
        SelectIndexCssClass="selectIndex"
        UnselectIndexCssClass="unSelectIndex" />

PasswordStrength
    展示输入密码强弱能力的控件
    <ajaxToolkit:PasswordStrength ID="PS" runat="server"
        TargetControlID="TextBox1"
        DisplayPosition="RightSide"
        StrengthIndicatorType="Text"
        PreferredPasswordLength="10"
        PrefixText="Strength:"
        TextCssClass="TextIndicator_TextBox1"
        MinimumNumericCharacters="0"
        MinimumSymbolCharacters="0"
        RequiresUpperAndLowerCaseCharacters="false"
        TextStrengthDescriptions="Very Poor;Weak;Average;Strong;Excellent"
        CalculationWeightings="50;15;15;20" />

PopupControl
    点击控件弹出附加窗口。如弹出式日期控件
    <ajaxToolkit:PopupControlExtender ID="PopEx" runat="server"
        TargetControlID="DateTextBox"
       PopupControlID="Panel1"
        Position="Bottom" />


Rating
    排名控件。用户用鼠标选择星星的个数来代表投票
    <ajaxToolkit:Rating ID="ThaiRating" runat="server"
        CurrentRating="2"
        MaxRating="5"
        StarCssClass="ratingStar"
        WaitingStarCssClass="savedRatingStar"
        FilledStarCssClass="filledRatingStar"
        EmptyStarCssClass="emptyRatingStar"
        OnChanged="ThaiRating_Changed" />

ReorderList
    可客户端排序的列表
    <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>

ResizableControl
    可在客户端用鼠标控制控件大小
    <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" />

RoundedCorners
    让Panel展现圆角
     <ajaxToolkit:RoundedCornersExtender ID="rce" runat="server"
        TargetControlID="Panel1"
        Radius="6" />

Slider
    就是Windows里面的SliderBar，有水平和垂直两种样式
    <ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server"
        TargetControlID="Slider1"
        Minimum="-100"
        Maximum="100"
        BoundControlID="Slider1_BoundControl"
        Steps="5" />
    <ajaxToolkit:SliderExtender ID="SliderExtender2" runat="server"
        TargetControlID="Slider2"
        BoundControlID="Slider2_BoundControl"
        Orientation="Vertical"
        EnableHandleAnimation="true" />

TextBoxWatermark
    输入框水印效果：为输入框提供默认文字和背景，在用户鼠标点击或者悬停后，清空背景及文字
    <ajaxToolkit:TextBoxWatermarkExtender ID="TBWE2" runat="server"
        TargetControlID="TextBox1"
        WatermarkText="Type First Name Here"
        WatermarkCssClass="watermarked"
        HasInitialFocus="false" />

ToggleButton
    将CheckBox用图像替代
    <ajaxToolkit:ToggleButtonExtender ID="ToggleEx" runat="server"
        TargetControlID="CheckBox1"
        ImageWidth="19"
        ImageHeight="19"
        CheckedImageAlternateText="Check"
        UncheckedImageAlternateText="UnCheck"
        UncheckedImageUrl="ToggleButton_Unchecked.gif"
        CheckedImageUrl="ToggleButton_Checked.gif"
        DisabledUncheckedImageUrl="ToggleButton_DisabledUnchecked.gif"
        DisabledCheckedImageUrl="ToggleButton_DisabledChecked.gif" />


UpdatePanelAnimation
     为Panel添加提交时的动画效果。如fade, collapse, Colorlize
    <ajaxToolkit:UpdatePanelAnimationExtender ID="ae" runat="server" TargetControlID="up">
        <Animations>
            <OnUpdating> ... </OnUpdating>
            <OnUpdated> ... </OnUpdated>
        </Animations>
        </ajaxToolkit:UpdatePanelAnimationExtender>

ValidatorCallout
    美化版的客户端数据验证
    <ajaxToolkit:ValidatorCalloutExtender
        runat="Server"
        ID="PNReqE"
        TargetControlID="PNReq"
        Width="350px"
        HighlightCssClass="highlight"
        WarningIconImageUrl="warning.gif"
        CloseImageUrl="close.gif" />