zoukankan      html  css  js  c++  java

  • AjaxControlToolkit的安装与使用详解

    AjaxControlToolkit下载
    http://ajax.asp.net/downloads/default.aspx?tabid=47
    http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=1425

    环境设置如下：下载完 ASPAJAXExtSetup.msi 安装更新后在你的系统盘下的（以C盘为例） 出现这个 文件夹：C:\Program Files\Microsoft asp.NET\ASP.NET 2.0 ajax Extensions\v1.0.61025安装这个后我们就可以创建Asp.net AJAXEnabledWebSite站点了，这其实就是个ajax.net网站的模板。但是我们现在还不能使用微软给我们开发好的ajax控件 。要想知道怎么使用ajax.net控件往下看。下载AjaxControlToolkit ，上面两个一个是带源代码的 一个是不带源代码的toolkit。建议下载带源代码的 toolkit。下载完成后把该文件解压到：
    C:\Program Files\Microsoft asp.NET\ASP.NET 2.0 ajax Extensions\v1.0.61025\AjaxContronlToolkit\

    双击运行AjaxControlToolkit.sln。用vs2005打开这个sln，编译TemplateVSI这个项目后，把在C:\Program Files\Microsoft asp.NET\ASP.NET 2.0 AJAX Extensions\SampleWebSite\Bin下面生成的AjaxControlToolkit.dll和 AjaxControlToolkit.pdb复制到C:\Program Files\Microsoft asp.NET\ASP.NET 2.0 AJAX Extensions\Binaries文件夹下面，这样我们就可以在vs2005中使用ajax.net这些控件了。
    新建一个Ajax ControlToolkitWebSite 类型的web项目。在工具栏中新添加一个选项卡起名：AjaxControltoolkit
    在这个选项卡上右键选择项-》浏览找到刚才复制过去的AjaxControlToolkit.dll，添加进来。这样我们就ajax.net控件成功引用到vs2005中了 。

    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 runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
    ContentCssClass    ="accordionContent" FadeTransitions="false" FramesPerSecond="40"
    TransitionDuration    ="250" AutoSize="None">
    <Panes>
    <ajaxToolkit:AccordionPane runat="server">
    <Header>
    <a href="" false;" >1. Accordion</a></Header>
    <Content>
    </Content>
    </ajaxToolkit:AccordionPane>
    </Panes>
    </ajaxToolkit:Accordion> 


    2. AlwaysVisibleControl 
    功能：最多的应用是在线小说的目录和不胜其烦的浮动小广告
    细节： (1)避免控件闪烁，把这个控件要在目标位置时使用absolutely position 
    (2) HorizontalSide="Center" VerticalSide="Top" 使用这个方法控制浮动在什么位置

    代码示意：

    <cc1:AlwaysVisibleControlExtender 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 
    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 runat="server" TargetControlID="DropDownList1" Category="Make" PromptText="Please select a make" LoadingText="[Loading makes]" ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents"/>
    <ajaxToolkit:CascadingDropDown runat="server" TargetControlID="DropDownList2" Category="Model" PromptText="Please select a model" LoadingText="[Loading models]" ServiceMethod="GetDropDownContentsPageMethod" ParentControlID="DropDownList1"/>
    <ajaxToolkit:CascadingDropDown 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 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"]=" confirm('确定要停止下载么？');"; 

    不知道是不是我没有发现这个控件的其它优势。

    7.DragPanel 
    功能：页面拖动
    细节： (1)TargetControlID 要拖动的控件
    (2)DragHandleID 拖动的标题栏所在的ControlID

    代码示意

    <ajaxToolkit:DragPanelExtender runat="server"
    TargetControlID    ="Panel3"
    DragHandleID    ="Panel4" />

    8.DropDown
    功能：什么都可以以下拉菜单的形式弹出来
    细节： (1)TargetControlID要在什么控件上实现扩展
    (2)DropDownControlID弹出来什么

    代码示意：

    <asp:Panel runat="server" CssClass="ContextMenuPanel" Style="display: none;
    visibility: hidden;"    >
    <asp:LinkButton runat="server" Text="Option 1" CssClass="ContextMenuItem"
    OnClick    ="OnSelect" />
    <asp:LinkButton runat="server" Text="Option 2" CssClass="ContextMenuItem"
    OnClick    ="OnSelect" />
    <asp:LinkButton runat="server" Text="Option 3 (Click Me!)" CssClass="ContextMenuItem"
    OnClick    ="OnSelect" />
    </asp:Panel>
    <cc1:DropDownExtender runat="server" TargetControlID="TextLabel"
    DropDownControlID    ="DropPanel" />

    9.DropShadow
    功能：阴影效果，其实可以放给美工实现
    细节： (1)Width 单位：px 默认5px
    (2)Opacity 不透明度0-1.0 默认.5

    代码示意：

    <ajaxToolkit:DropShadowExtender 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 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 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 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 runat="server" CssClass="modalPopup" style="display:none">
    <p>
    <asp:Label runat="server" BackColor="Blue" ForeColor="White" Style=""
    Text    ="信息提示"></asp:Label>&nbsp;</p>
    <p >确定要删除当前下载的任务么？</p>
    <p style="text-align:center;">
    <asp:Button runat="server" Text="OK" ></asp:Button>
    <asp:Button runat="server" Text="Cancel"></asp:Button>
    </p>
    </asp:Panel>
    <ajaxToolkit: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 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 runat="server"
    TargetControlID    ="TextBox1" Width="120" RefValues=""
    ServiceDownMethod    ="" ServiceUpMethod="" TargetButtonDownID="" TargetButtonUpID="" />
    <ajaxToolkit:NumericUpDownExtender 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 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 BehaviorID="PagingBulletedListBehavior1" runat="server"
    TargetControlID    ="BulletedList1"
    ClientSort    ="true"
    IndexSize    ="1"
    Separator    =" - "
    SelectIndexCssClass    ="selectIndex"
    UnselectIndexCssClass    ="unselectIndex" /> 

    18.PasswordStrength
    功能：验证密码强度
    细节： StrengthIndicatorType两种显示方式：文字提示，进度条提示

    代码示意：

     

    <ajaxToolkit:PasswordStrength 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 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 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 runat="server" TargetControlID="MessageTextBox" 
    PopupControlID    ="Panel2" CommitProperty="value" CommitScript="e.value += ' - do not forget!';" Position="Bottom" />

    20.Rating 
    功能：级别控件
    细节： 又是一个鸡肋，没有太大实用价值，看代码吧

    代码示意：

    <ajaxToolkit:Rating 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 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 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 runat="server" TargetControlID="Panel1" Radius="6" />

    24.Slider
    功能：实现WinForm中的Slider控件效果
    细节： (1)修改文本框的值也可以影响Slider的状态！这个反馈还是有用的！

    代码示意：

    <asp:TextBox runat="server"></asp:TextBox> 
    <cc1:SliderExtender runat="server"
    BehaviorID    ="Slider2"
    TargetControlID    ="Slider2"
    BoundControlID    ="TextBox1"
    Orientation    ="Horizontal" 
    EnableHandleAnimation    ="true"
    Minimum    ="0"
    Maximum    ="100"/>

    25.TextBoxWatermark
    功能：文本水印
    细节： 没有什么说的看代码--->

    代码示意：

    <asp:TextBox CssClass="unwatermarked" Width="150" runat="server"></asp:TextBox>
    <cc1:TextBoxWatermarkExtender runat="server" TargetControlID="TextBox1" WatermarkText="请输入用户名" WatermarkCssClass="watermarked" />

    26.UpdatePanelAnimation 
    功能：更新动画效果
    细节：代码结构简单但是要说的东西很多，回头再说写专题吧

    代码示意：

    <ajaxToolkit:UpdatePanelAnimationExtender 
    runat="server" TargetControlID="up">
    <Animations>
    <OnUpdating> </OnUpdating>
    <OnUpdated> </OnUpdated>
    </Animations>
    </ajaxToolkit:UpdatePanelAnimationExtender>

    27.ToggleButton
    功能：就是把一个CheckBox的逻辑应用到一个按钮上，于是就有了双态按钮这么个玩意，有点意思啊
    闲言少叙，看代码：

     

    <asp:CheckBox Checked="true" Text="I like ASP.NET" runat="server"/>
    <cc1:ToggleButtonExtender 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" ControlToValidate="NameTextBox" Display="None" ErrorMessage="<b>Required Field Missing</b><br />A name is required." />
    <asp:RequiredFieldValidator runat="server" 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=';quot;not implemented but you get the idea;)&quot;);'>Extract from Profile</a></div>" />
    <asp:RegularExpressionValidator runat="server" 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" TargetControlID="NReq" HighlightCssClass="highlight" />
    <cc1:ValidatorCalloutExtender runat="Server" TargetControlID="PNReq" HighlightCssClass="highlight" Width="350px" />
    <cc1:ValidatorCalloutExtender runat="Server" TargetControlID="PNRegEx" HighlightCssClass="highlight" />
  • 相关阅读:
    AIR配置文件（*app.xml）说明
    重学AS3之基础知识重点记忆
    重学AS3之高级知识重点记忆
    FLEX AIR添加系统托盘图标步骤
    FLASH组件在FLEX中使用
    ASP.NET入门教程:数据绑定
    ASP.NET入门教程:Web表单维持对象的ViewState
    ASP.NET入门教程:简单的ASP.NET页面
    ASP.NET入门教程:事件句柄
    ASP.NET入门教程:TextBox控件
  • 原文地址：https://www.cnblogs.com/Leo_wl/p/1995033.html
Copyright © 2011-2022 走看看