<ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40"
TransitionDuration="250" AutoSize="None">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Header>
<a href="" onclick="return false;" class="accordionLink">1. Accordion</a></Header>
<Content>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
2. AlwaysVisibleControl
功能:最多的应用[ying yong]是在线[zai xian]小说的目录和不胜其烦的浮动小广告
细节: (1)避免控件闪烁[shan shuo],把这个控件要在目标[mu biao]位置[wei zhi]时使用absolutely position
(2) HorizontalSide="Center" VerticalSide="Top" 使用这个方法[fang fa]控制[kong zhi]浮动在什么位置[wei zhi]
代码[dai ma]示意:
<cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" HorizontalSide="Center" VerticalSide="Top" TargetControlID="Panel1" runat="server">
3.Animation
功能:28个控件种效果最酷的!顾名思义实现动画[dong hua]效果
细节: (1)不只是控件:pluggable, extensible framework
(2)用在什么时候:OnLoad OnClick OnMouseOver OnMouseOut OnHoverOver OnHoverOut
(3)具体使用有很多可以谈的,有理由单独写一个Animation Xml 编程[bian cheng]介绍
代码[dai ma]示意:
<ajaxToolkit:AnimationExtender ID="ae"
runat="server" TargetControlID="ctrl">
<Animations>
<OnLoad> </OnLoad>
<OnClick> </OnClick>
<OnMouseOver> </OnMouseOver>
<OnMouseOut> </OnMouseOut>
<OnHoverOver> </OnHoverOver>
<OnHoverOut> </OnHoverOut>
</Animations>
</ajaxToolkit:AnimationExtender>
4.CascadingDropDown
功能:DropDownList联动,调用[tiao yong]Web Service
细节: (1)DropDownList行为扩展[kuo zhan]
(2)如果使用Web service 方法[fang fa]签名必须符合下面的形式:
[WebMethod]
public CascadingDropDownNameValue[] GetDropDownContents(
string knownCategoryValues, string category){…}
代码[dai ma]示意:
<ajaxToolkit:CascadingDropDown ID="CascadingDropDown1" runat="server" TargetControlID="DropDownList1" Category="Make" PromptText="Please select a make" LoadingText="[Loading makes]" ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents"/>
<ajaxToolkit:CascadingDropDown ID="CascadingDropDown2" runat="server" TargetControlID="DropDownList2" Category="Model" PromptText="Please select a model" LoadingText="[Loading models]" ServiceMethod="GetDropDownContentsPageMethod" ParentControlID="DropDownList1"/>
<ajaxToolkit:CascadingDropDown ID="CascadingDropDown3" 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任务[ren wu]栏折叠[zhe die]效果
细节: (1)可以扩展[kuo zhan]任何一个 asp.NET Panel control
(2) CollapsiblePanel 默认[mo ren]认为使用了 标准 CSS box model 早期的浏览[liu lan]器[liu lan qi]要!DOCTYPE 中设置[she zhi]页面为自适应[zi shi ying]方式提交[ti jiao]数据[shu ju]rendered in IE’s standards-compliant mode.
代码[dai ma]示意:
<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"/>
6.ConfirmButton
功能:就是弹出来一个确定对话框[dui hua kuang]
细节: 本人认为不是最简单实现的方法[fang fa],我的方法[fang fa]:
this.Button1.Attributes["onclick"]="javascript:return confirm(‘确定要停止下载[xia zai]么?’);";
不知道是不是我没有发现这个控件的其它优势。
7.DragPanel
功能:页面拖动[tuo dong]
细节: (1)TargetControlID 要拖动[tuo dong]的控件
(2)DragHandleID 拖动[tuo dong]的标题栏所在的ControlID
代码[dai ma]示意
<ajaxToolkit:DragPanelExtender ID="DPE1" runat="server"
TargetControlID="Panel3"
DragHandleID="Panel4" />
8.DropDown
功能:什么都可以以下拉菜单[cai dan]的形式弹出来
细节: (1)TargetControlID要在什么控件上实现扩展[kuo zhan]
(2)DropDownControlID弹出来什么
代码[dai ma]示意:
<asp:Panel ID="DropPanel" runat="server" CssClass="ContextMenuPanel" Style="display: none;
visibility: hidden;">
<asp:LinkButton runat="server" ID="Option1" Text="Option 1" CssClass="ContextMenuItem"
OnClick="OnSelect" />
<asp:LinkButton runat="server" ID="Option2" Text="Option 2" CssClass="ContextMenuItem"
OnClick="OnSelect" />
<asp:LinkButton runat="server" ID="Option3" Text="Option 3 (Click Me!)" CssClass="ContextMenuItem"
OnClick="OnSelect" />
</asp:Panel>
<cc1:DropDownExtender runat="server" ID="DDE" TargetControlID="TextLabel"
DropDownControlID="DropPanel" />
9.DropShadow
功能:阴影[yin ying]效果,其实可以放给美工实现
细节: (1)Width 单位[dan wei]:px 默认[mo ren]5px
(2)Opacity 不透明[tou ming]度[tou ming du][bu tou ming du]0-1.0 默认[mo ren].5
代码[dai ma]示意:
<ajaxToolkit:DropShadowExtender ID="dse" runat="server"
TargetControlID="Panel1"
Opacity=".8"
Rounded="true"
TrackPosition="true" />
10.DynamicPopulate
功能:能实用Web Service或页面方法[fang fa]来替换[ti huan]控件的内容
细节: (1)ClearContentsDuringUpdate 替换[ti huan]之前先清除[qing chu]以前的内容(默认[mo ren]True)
(2)PopulateTriggerControlID 触发器[chu fa qi]绑定[bang ding]的控件 单击[dan ji]时触发
(3)ContextKey传递给Web Service的随机字符[zi fu]串[zi fu chuan]
(4) Web Service方法[fang fa]签名必须符合下面的形式:
[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.
代码[dai ma]示意:
<ajaxToolkit:DynamicPopulateExtender ID="dp" runat="server"
TargetControlID="Panel1"
ClearContentsDuringUpdate="true"
PopulateTriggerControlID="Label1"
ServiceMethod="GetHtml"
UpdatingCssClass="dynamicPopulate_Updating" />
11.FilteredTextBox
功能:文本[wen ben]框数据[shu ju]过滤[guo lv]
细节: (1)过滤[guo lv]条件[tiao jian]Numbers LowercaseLetters UppercaseLetters Custom
(2)过滤[guo lv]条件[tiao jian]也可以是Custom的组合[zu he] FilterType="Custom, Numbers"
(3)ValidChars="+-=/*()." Custom要定义这样的有效[you xiao]字[you xiao zi]符[you xiao zi fu]串
(4) 其实这是个鸡肋:你可以输入[shu ru]中文[zhong wen],聊胜于无,忍了
示意代码[dai ma]:
<ajaxToolkit:FilteredTextBoxExtender ID="ftbe" runat="server"
TargetControlID="TextBox3"
FilterType="Custom, Numbers"
ValidChars="+-=/*()." />
12.HoverMenu
功能:鼠标[shu biao]靠近时显示[xian shi]菜单[cai dan],可以用在在线[zai xian]数据[shu ju]修改[xiu gai]的表格上作为功能菜单[cai dan]
细节: (1)PopupControlID要弹出来什么
(2)PopupPostion 在哪里弹出来Left (Default), Right, Top, Bottom, Center.
(3)OffsetX/OffsetY 弹出项与源控件的距离
(4) PopDelay 弹出延时显示[xian shi] 单位[dan wei]milliseconds. Default is 100.
代码[dai ma]示意:
<ajaxToolkit:HoverMenuExtender ID="hme2" runat="Server"
TargetControlID="Panel9"
HoverCssClass="popupHover"
PopupControlID="PopupMenu"
PopupPosition="Left"
OffsetX="0"
OffsetY="0"
PopDelay="50" />
13.ModalPopup
功能:Xp的关机效果,后面全部灰掉,很多邮箱的删除[shan chu]对话框[dui hua kuang]都着种效果
细节: (1)本质上讲这是一个对话框[dui hua kuang]模版,比ConfirmButton有意义有更强的扩展[kuo zhan]性!
(2)从下面的代码[dai ma]中我们发现 点OK的时候可以调用[tiao yong]后台[hou tai]方法[fang fa]
(3)同时可以执行[zhi hang]一段脚本[jiao ben]
代码[dai ma]示意:
<asp:Panel ID="Panel2" runat="server" CssClass="modalPopup" style="display:none">
<p>
<asp:Label ID="Label1" runat="server" BackColor="Blue" ForeColor="White" Style="position: relative"
Text="信息[xin xi]提示[ti shi]"></asp:Label> </p>
<p >确定要删除[shan chu]当前下载[xia zai]的任务[ren wu]么?</p>
<p style="text-align:center;">
<asp:Button ID="Button1" runat="server" Text="OK" ></asp:Button>
<asp:Button ID="Button2" runat="server" Text="Cancel"></asp:Button>
</p>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="LinkButton1"
PopupControlID="Panel2" BackgroundCssClass="modalBackground" DropShadow="true"
OkControlID="Button1" OnOkScript="onOk()" CancelControlID="CancelButton" />
14.MutuallyExlcusiveCheckBox
功能:互斥复选框就像Radio一样
细节: (1)Key属性[shu xing]用来分组就像RdiolistGroup一样
(2)argetControlID用来绑定[bang ding]已有的CheckBox
代码[dai ma]示意:
<ajaxToolkit:MutuallyExclusiveCheckboxExtender runat="server"
ID="MustHaveGuestBedroomCheckBoxEx"
TargetControlID="MustHaveGuestBedroomCheckBox"
Key="GuestBedroomCheckBoxes" />
15.NoBot
功能:Captcha 图灵[tu ling]测试[tu ling ce shi] 反垃圾信息[xin xi]控件
细节: (1)OnGenerateChallengeAndResponse 这个属性[shu xing]是EventHandler<NoBotEventArgs> 调用[tiao yong]服务器[fu wu qi]端的方法[fang fa],注意方法[fang fa]签名
例如: protected void CustomChallengeResponse(object sender, NoBotEventArgs e) {……} 代码[dai ma]示意:
<ajaxToolkit:NoBot
ID="NoBot2"
runat="server"
OnGenerateChallengeAndResponse="CustomChallengeResponse"
ResponseMinimumDelaySeconds="2"
CutoffWindowSeconds="60"
CutoffMaximumInstances="5" />
16.NumericUpDown
功能:实现Winform里面的Updown
细节: (1)普通整数增减
(2)值列表[lie biao]循环[xun huan]显示[xian shi]比如下面的第二个例子RefValues
(3)调用[tiao yong]Web Service的格式:
<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" />
代码[dai ma]示意:
<ajaxToolkit:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server"
TargetControlID="TextBox1" Width="120" RefValues=""
ServiceDownMethod="" ServiceUpMethod="" TargetButtonDownID="" TargetButtonUpID="" />
<ajaxToolkit:NumericUpDownExtender ID="NumericUpDownExtender2" 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 ID="NumericUpDownExtender4" runat="server"
TargetControlID="TextBox4" Width="80" TargetButtonDownID="img1"
TargetButtonUpID="img2" RefValues="" ServiceDownMethod="" ServiceUpMethod="" />
17.PagingBulletedList
功能:扩展[kuo zhan]BulletedList的分页[fen ye]功能
细节: (1)可以控制[kong zhi]每页最多显示[xian shi]多少条,是否排序[pai xu]
(2)IndexSize表示index headings 的字符[zi fu]数,如果MaxItemPerPage设置[she zhi]了概属性[shu xing]被忽略
(3)MaxItemPerPage分页[fen ye]每页最大条数
代码[dai ma]示意:
<ajaxToolkit:PagingBulletedListExtender ID="PagingBulletedListExtender1" BehaviorID="PagingBulletedListBehavior1" runat="server"
TargetControlID="BulletedList1"
ClientSort="true"
IndexSize="1"
Separator=" – "
SelectIndexCssClass="selectIndex"
UnselectIndexCssClass="unselectIndex" />
18.PasswordStrength
功能:验证[yan zheng]密码[mi ma]强度
细节: StrengthIndicatorType两种显示[xian shi]方式[xian shi fang shi]:文字[wen zi]提示[ti shi],进度条提示[ti shi]
代码[dai ma]示意:
<ajaxToolkit:PasswordStrength ID="PasswordStrength1" 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 ID="PasswordStrength2" 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 ID="PasswordStrength3" 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 -属性[shu xing]来标识[biao shi]返回的值
(4) CommitScript -把返回结果值通过脚本[jiao ben]处理,用到CommitProperty
代码[dai ma]示意:
<ajaxToolkit:PopupControlExtender ID="PopupControlExtender2" runat="server" TargetControlID="MessageTextBox"
PopupControlID="Panel2" CommitProperty="value" CommitScript="e.value += ‘ – do not forget!’;" Position="Bottom" />
20.Rating
功能:级别控件
细节: 又是一个鸡肋,没有太大实用价值,看代码[dai ma]吧
代码[dai ma]示意:
<ajaxToolkit:Rating ID="ThaiRating" runat="server"
CurrentRating="2"
MaxRating="5"
StarCssClass="ratingStar"
WaitingStarCssClass="savedRatingStar"
FilledStarCssClass="filledRatingStar"
EmptyStarCssClass="emptyRatingStar"
OnChanged="ThaiRating_Changed" />
21.ReorderList
功能:这个控件的炫酷程度仅次于Animation ,可以动态[dong tai]移动数据[shu ju]
细节: (1)绑定[bang ding]数据[shu ju],拖动[tuo dong]数据[shu ju]之后数据[shu ju]将被更新到绑定[bang ding]源
(2)它不是已有控件的扩展[kuo zhan]是全新的服务器[fu wu qi]端控件,只是它对Ajax行为是敏感的
(3)重排的实现有两种方式:CallBack PostBack 前者的发生在页面上是没有PostBack的(也就是没有刷新[shua xin]页面)
(4) 而数据[shu ju]添加或者编辑的时候就必须要使用PostBack来同步[tong bu]服务器[fu wu qi]端的数据[shu ju]状态[zhuang tai]
(5)PostbackOnReorder就是针对两种策略进行选[hang xuan]择
(6)可以扩展[kuo zhan]的很多,三言两语难以说尽给出基本框架[kuang jia]吧,回头再说
代码[dai ma]示意:
<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>
22.ResizableControl
功能:就像设计状态[zhuang tai]一样可以拖动[tuo dong]修改[xiu gai]大小,可是有什么实际的意义么,放大字体[zi ti]?没有想到
细节: (1)HandleCssClass – The name of the CSS class to apply to the resize handle 这个属性[shu xing]必须要有!
代码[dai ma]示意:
<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" />
23.RoundedCorners
功能:控件圆角[yuan jiao] 纯粹是控制[kong zhi]外观的了,什么时候审美疲劳了还要改,呵呵
细节: (1)还有一个非常非常坑人的地方:你必须要设置[she zhi] CssClass="roundedPanel"要不然不起作用[zuo yong]
(2) Radius设置[she zhi]弧度,默认[mo ren]是5
(3)好象只适用于[yong yu]容器
代码[dai ma]示意:
<ajaxToolkit:RoundedCornersExtender ID="rce" runat="server" TargetControlID="Panel1" Radius="6" />
24.Slider
功能:实现WinForm中的Slider控件效果
细节: (1)修改[xiu gai]文本[wen ben]框的值也可以影响Slider的状态[zhuang tai]!这个反馈还是有用的!
代码[dai ma]示意:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<cc1:SliderExtender ID="SliderExtender2" runat="server"
BehaviorID="Slider2"
TargetControlID="Slider2"
BoundControlID="TextBox1"
Orientation="Horizontal"
EnableHandleAnimation="true"
Minimum="0"
Maximum="100"
/>
25.TextBoxWatermark
功能:文本[wen ben]水印
细节: 没有什么说的看代码[dai ma]—>
代码[dai ma]示意:
<asp:TextBox ID="TextBox1" CssClass="unwatermarked" Width="150" runat="server"></asp:TextBox>
<cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" TargetControlID="TextBox1" WatermarkText="请输入[shu ru]用户[yong hu]名[yong hu ming]" WatermarkCssClass="watermarked" />
26.UpdatePanelAnimation
功能:更新动画[dong hua]效果
细节:代码[dai ma]结构[jie gou]简单但是要说的东西很多,回头再说写专题吧
代码[dai ma]示意:
<ajaxToolkit:UpdatePanelAnimationExtender ID="ae"
runat="server" TargetControlID="up">
<Animations>
<OnUpdating> </OnUpdating>
<OnUpdated> </OnUpdated>
</Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>
27.ToggleButton
功能:就是把一个CheckBox的逻辑应用[ying yong]到一个按钮上,于是就有了双态按钮这么个玩意,有点意思啊
闲言少叙,看代码[dai ma]:
<asp:CheckBox ID="CheckBox1" Checked="true" Text="I like ASP.NET" runat="server"/>
<cc1:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server" TargetControlID="CheckBox1" ImageWidth="19"
ImageHeight="19" UncheckedImageUrl="Image/down.gif" CheckedImageUrl="Image/up.gif" CheckedImageAlternateText="Check"
UncheckedImageAlternateText="UnCheck" />
28.ValidatorCallout
功能:Windows系统[xi tong]中最常见的气泡提示[ti shi],比如你磁盘[ci pan]空间[kong jian]不足的时候……
细节: 是对数据[shu ju]验证[yan zheng]控件的扩展[kuo zhan],比较新鲜
代码[dai ma]示意:
<asp:RequiredFieldValidator runat="server" ID="NReq" ControlToValidate="NameTextBox" Display="None" ErrorMessage="<b>Required Field Missing</b><br />A name is required." />
<asp:RequiredFieldValidator runat="server" ID="PNReq" 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=’javascript:alert("not implemented but you get the idea;)");’>Extract from Profile</a></div>" />
<asp:RegularExpressionValidator runat="server" ID="PNRegEx" 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" ID="NReqE" TargetControlID="NReq" HighlightCssClass="highlight" />
<cc1:ValidatorCalloutExtender runat="Server" ID="PNReqE" TargetControlID="PNReq" HighlightCssClass="highlight" Width="350px" />
<cc1:ValidatorCalloutExtender runat="Server" ID="PNReqEx" TargetControlID="PNRegEx" HighlightCssClass="highlight" />