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"
/>
代码示意:
<
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
代码示意:
<
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.
代码示意:
<
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
代码示意:
<
ajaxToolkit:MutuallyExclusiveCheckboxExtender
runat
="server"
ID
="MustHaveGuestBedroomCheckBoxEx"
TargetControlID
="MustHaveGuestBedroomCheckBox"
Key
="GuestBedroomCheckBoxes"
/>
代码示意:
<
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"
/>
<
cc1:ValidatorCalloutExtender
runat
="Server"
TargetControlID
="PNReq"
HighlightCssClass
="highlight"
Width
="350px"
/>
<
cc1:ValidatorCalloutExtender
runat
="Server"
TargetControlID
="PNRegEx"
HighlightCssClass
="highlight"
/>