AjaxControlToolkit的安装与使用详解

发布时间：2020-12-16 03:17:58 所属栏目：百科来源：网络整理

导读：环境设置下载完 ASPAJAXExtSetup.msi 安装更新后在你的系统盘下的（以C盘为例）出现这个文件夹：C:Program FilesMicrosoft asp.NETASP.NET 2.0 ajax Extensionsv1.0.61025 安装这个后我们就可以创建Asp.net AJAXEnabledWebSite站点了，这其实就是个aj

环境设置

下载完 ASPAJAXExtSetup.msi 安装更新后在你的系统盘下的（以C盘为例）出现这个文件夹：C:Program FilesMicrosoft asp.NETASP.NET 2.0 ajax Extensionsv1.0.61025

安装这个后我们就可以创建Asp.net AJAXEnabledWebSite站点了，这其实就是个ajax.net网站的模板。但是我们现在还不能使用微软给我们开发好的ajax控件。

要想知道怎么使用ajax.net控件往下看。

下载AjaxControlToolkit ，上面两个一个是带源代码的一个是不带源代码的toolkit。建议下载带源代码的 toolkit。

下载完成后把该文件解压到：
C:Program FilesMicrosoft asp.NETASP.NET 2.0 ajax Extensionsv1.0.61025AjaxContronlToolkit

双击运行AjaxControlToolkit.sln。用vs2005打开这个sln，编译TemplateVSI这个项目后，把在C:Program FilesMicrosoft asp.NETASP.NET 2.0 AJAX ExtensionsSampleWebSiteBin下面生成的AjaxControlToolkit.dll和 AjaxControlToolkit.pdb复制到C:Program FilesMicrosoft asp.NETASP.NET 2.0 AJAX ExtensionsBinaries文件夹下面，这样我们就可以在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:Accordionrunat="server"SelectedIndex="0"HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent"FadeTransitions="false"FramesPerSecond="40"
TransitionDuration="250"AutoSize="None">
<Panes>
<ajaxToolkit:AccordionPanerunat="server">
<Header>
<ahref=""false;">1.Accordion</a></Header>
<Content>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>

2. AlwaysVisibleControl

功能：最多的应用是在线小说的目录和不胜其烦的浮动小广告
细节：

(1)避免控件闪烁，把这个控件要在目标位置时使用absolutely position
(2) HorizontalSide="Center" VerticalSide="Top" 使用这个方法控制浮动在什么位置

代码示意：

<cc1:AlwaysVisibleControlExtenderHorizontalSide="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:CascadingDropDownrunat="server"TargetControlID="DropDownList1"Category="Make"PromptText="Pleaseselectamake"LoadingText="[Loadingmakes]"ServicePath="CarsService.asmx"ServiceMethod="GetDropDownContents"/>
<ajaxToolkit:CascadingDropDownrunat="server"TargetControlID="DropDownList2"Category="Model"PromptText="Pleaseselectamodel"LoadingText="[Loadingmodels]"ServiceMethod="GetDropDownContentsPageMethod"ParentControlID="DropDownList1"/>
<ajaxToolkit:CascadingDropDownrunat="server"TargetControlID="DropDownList3"Category="Color"PromptText="Pleaseselectacolor"LoadingText="[Loadingcolors]"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:CollapsiblePanelExtenderrunat="Server"
TargetControlID="Panel1"
CollapsedSize="0"
ExpandedSize="300"
Collapsed="True"
ExpandControlID="LinkButton1"
CollapseControlID="LinkButton1"
AutoCollapse="False"
AutoExpand="False"
ScrollContents="True"
TextLabelID="Label1"
CollapsedText="ShowDetails"
OpenedText="HideDetails"
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:DragPanelExtenderrunat="server"
TargetControlID="Panel3"
DragHandleID="Panel4"/>

8.DropDown

功能：什么都可以以下拉菜单的形式弹出来
细节：

(1)TargetControlID要在什么控件上实现扩展
(2)DropDownControlID弹出来什么

代码示意：

<asp:Panelrunat="server"CssClass="ContextMenuPanel"Style="display:none;
visibility:hidden;">
<asp:LinkButtonrunat="server"Text="Option1"CssClass="ContextMenuItem"
OnClick="OnSelect"/>
<asp:LinkButtonrunat="server"Text="Option2"CssClass="ContextMenuItem"
OnClick="OnSelect"/>
<asp:LinkButtonrunat="server"Text="Option3(ClickMe!)"CssClass="ContextMenuItem"
OnClick="OnSelect"/>
</asp:Panel>
<cc1:DropDownExtenderrunat="server"TargetControlID="TextLabel"
DropDownControlID="DropPanel"/>

9.DropShadow

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

代码示意：

<ajaxToolkit:DropShadowExtenderrunat="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]
stringDynamicPopulateMethod(stringcontextKey)
{}
Noteyoucanreplace"DynamicPopulateMethod"withanamingofyourchoice,butthereturn
typeandparameternameandtypemustexactlymatch,includingcase.

代码示意：

<ajaxToolkit:DynamicPopulateExtenderrunat="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:FilteredTextBoxExtenderrunat="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:HoverMenuExtenderrunat="Server"
TargetControlID="Panel9"
HoverCssClass="popupHover"
PopupControlID="PopupMenu"
PopupPosition="Left"
OffsetX="0"
OffsetY="0"
PopDelay="50"/>

13.ModalPopup

功能：Xp的关机效果，后面全部灰掉，很多邮箱的删除对话框都着种效果
细节： (1)本质上讲这是一个对话框模版，比ConfirmButton有意义有更强的扩展性！
(2)从下面的代码中我们发现点OK的时候可以调用后台方法
(3)同时可以执行一段脚本

代码示意：

<asp:Panelrunat="server"CssClass="modalPopup"style="display:none">
<p>
<asp:Labelrunat="server"BackColor="Blue"ForeColor="White"Style=""
Text="信息提示"></asp:Label>&nbsp;</p>
<p>确定要删除当前下载的任务么？</p>
<pstyle="text-align:center;">
<asp:Buttonrunat="server"Text="OK"></asp:Button>
<asp:Buttonrunat="server"Text="Cancel"></asp:Button>
</p>
</asp:Panel>
<ajaxToolkit:ModalPopupExtenderrunat="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:MutuallyExclusiveCheckboxExtenderrunat="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:NumericUpDownExtenderrunat="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:NumericUpDownExtenderrunat="server"
TargetControlID="TextBox1"Width="120"RefValues=""
ServiceDownMethod=""ServiceUpMethod=""TargetButtonDownID=""TargetButtonUpID=""/>
<ajaxToolkit:NumericUpDownExtenderrunat="server"
TargetControlID="TextBox2"Width="120"RefValues="January;February;March;April;May;June;July;August;September;October;November;December"
ServiceDownMethod=""ServiceUpMethod=""TargetButtonDownID=""TargetButtonUpID=""/>
<ajaxToolkit:NumericUpDownExtenderrunat="server"
TargetControlID="TextBox4"Width="80"TargetButtonDownID="img1"
TargetButtonUpID="img2"RefValues=""ServiceDownMethod=""ServiceUpMethod=""/>

17.PagingBulletedList

功能：扩展BulletedList的分页功能
细节：

(1)可以控制每页最多显示多少条，是否排序
(2)IndexSize表示index headings 的字符数，如果MaxItemPerPage设置了概属性被忽略
(3)MaxItemPerPage分页每页最大条数

代码示意：

<ajaxToolkit:PagingBulletedListExtenderBehaviorID="PagingBulletedListBehavior1"runat="server"
TargetControlID="BulletedList1"
ClientSort="true"
IndexSize="1"
Separator="-"
SelectIndexCssClass="selectIndex"
UnselectIndexCssClass="unselectIndex"/>

18.PasswordStrength

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

代码示意：

<ajaxToolkit:PasswordStrengthrunat="server"DisplayPosition="RightSide"TargetControlID="TextBox1"
StrengthIndicatorType="Text"PreferredPasswordLength="10"PrefixText="Strength:"
HelpStatusLabelID="TextBox1_HelpLabel"TextCssClass="TextIndicator_TextBox1"TextStrengthDescriptions="VeryPoor;Weak;Average;Strong;Excellent"
MinimumNumericCharacters="0"MinimumSymbolCharacters="0"RequiresUpperAndLowerCaseCharacters="false"/>
<ajaxToolkit:PasswordStrengthrunat="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:PasswordStrengthrunat="server"DisplayPosition="BelowLeft"TargetControlID="TextBox3"
StrengthIndicatorType="Text"PreferredPasswordLength="20"PrefixText="MeetsPolicy?"TextCssClass="TextIndicator_TextBox3"
MinimumNumericCharacters="2"MinimumSymbolCharacters="2"RequiresUpperAndLowerCaseCharacters="true"
TextStrengthDescriptions="Notatall;VeryLowcompliance;LowCompliance;AverageCompliance;GoodCompliance;VeryHighCompliance;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:PopupControlExtenderrunat="server"TargetControlID="MessageTextBox"
PopupControlID="Panel2"CommitProperty="value"CommitScript="e.value+='-donotforget!';"Position="Bottom"/>

20.Rating

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

代码示意：

<ajaxToolkit:Ratingrunat="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:ReorderListrunat="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:ResizableControlExtenderrunat="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:RoundedCornersExtenderrunat="server"TargetControlID="Panel1"Radius="6"/>

24.Slider

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

代码示意：

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

25.TextBoxWatermark

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

代码示意：

<asp:TextBoxCssClass="unwatermarked"Width="150"runat="server"></asp:TextBox>
<cc1:TextBoxWatermarkExtenderrunat="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:CheckBoxChecked="true"Text="IlikeASP.NET"runat="server"/>
<cc1:ToggleButtonExtenderrunat="server"TargetControlID="CheckBox1"ImageWidth="19"
ImageHeight="19"UncheckedImageUrl="Image/down.gif"CheckedImageUrl="Image/up.gif"CheckedImageAlternateText="Check"
UncheckedImageAlternateText="UnCheck"/>

28.ValidatorCallout

功能：Windows系统中最常见的气泡提示，比如你磁盘空间不足的时候……
细节：是对数据验证控件的扩展，比较新鲜

代码示意：

<asp:RequiredFieldValidatorrunat="server"ControlToValidate="NameTextBox"Display="None"ErrorMessage="<b>RequiredFieldMissing</b><br/>Anameisrequired."/>
<asp:RequiredFieldValidatorrunat="server"ControlToValidate="PhoneNumberTextBox"Display="None"ErrorMessage="<b>RequiredFieldMissing</b><br/>Aphonenumberisrequired.<divstyle='margin-top:5px;padding:5px;border:1pxsolid#e9e9e9;background-color:white;'><b>OtherOptions:</b><br/><ahref=';quot;notimplementedbutyougettheidea;)&quot;);'>ExtractfromProfile</a></div>"/>
<asp:RegularExpressionValidatorrunat="server"ControlToValidate="PhoneNumberTextBox"Display="None"ErrorMessage="<b>InvalidField</b><br/>Pleaseenteraphonenumberintheformat:<br/>(###)###-####"ValidationExpression="(((d{3})?)|(d{3}-))?d{3}-d{4}"/>
<cc1:ValidatorCalloutExtenderrunat="Server"TargetControlID="NReq"HighlightCssClass="highlight"/>
<cc1:ValidatorCalloutExtenderrunat="Server"TargetControlID="PNReq"HighlightCssClass="highlight"Width="350px"/>
<cc1:ValidatorCalloutExtenderrunat="Server"TargetControlID="PNRegEx"HighlightCssClass="highlight"/>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!