AjaxControlToolkit的安装与使用详解_添加完ajaxcontroltoolkit.dll后控件还是报错-CSDN博客

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){...}

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

< 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" />

代码示意： 6.ConfirmButton
功能：就是弹出来一个确定对话框
细节：本人认为不是最简单实现的方法，我的方法：

< 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" />

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

代码示意：10.DynamicPopulate
功能：能实用Web Service或页面方法来替换控件的内容
细节： (1)ClearContentsDuringUpdate 替换之前先清除以前的内容（默认True）
(2)PopulateTriggerControlID 触发器绑定的控件单击时触发
(3)ContextKey传递给Web Service的随机字符串
(4) Web Service方法签名必须符合下面的形式：

< ajaxToolkit:DropShadowExtender runat ="server"

TargetControlID ="Panel1"

Opacity =".8"

Rounded ="true"

TrackPosition ="true" />

[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.

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

< ajaxToolkit:HoverMenuExtender runat ="Server"

TargetControlID ="Panel9"

HoverCssClass ="popupHover"

PopupControlID ="PopupMenu"

PopupPosition ="Left"

OffsetX ="0"

OffsetY ="0"

PopDelay ="50" />

代码示意：

< asp:Panel runat ="server" CssClass ="modalPopup" style ="display:none" >

< p >

< asp:Label runat ="server" BackColor ="Blue" ForeColor ="White" Style =""

Text ="信息提示" ></ asp:Label >   </ 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

代码示意：15.NoBot
功能：Captcha 图灵测试反垃圾信息控件
细节： (1)OnGenerateChallengeAndResponse 这个属性是EventHandler<NoBotEventArgs> 调用服务器端的方法，注意方法签名
例如： protected void CustomChallengeResponse(object sender, NoBotEventArgs e) {……}

< ajaxToolkit:MutuallyExclusiveCheckboxExtender runat ="server"

ID ="MustHaveGuestBedroomCheckBoxEx"

TargetControlID ="MustHaveGuestBedroomCheckBox"

Key ="GuestBedroomCheckBoxes" />

代码示意： 16.NumericUpDown
功能：实现Winform里面的Updown
细节： (1)普通整数增减
(2)值列表循环显示比如下面的第二个例子RefValues
(3)调用Web Service的格式：

< ajaxToolkit:NoBot

ID ="NoBot2"

runat ="server"

OnGenerateChallengeAndResponse ="CustomChallengeResponse"

ResponseMinimumDelaySeconds ="2"

CutoffWindowSeconds ="60"

CutoffMaximumInstances ="5" />

< 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;)");'>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" />