Ajax Control Toolkit 34个服务器端控件第2/2页

18. NoBot
【功能概述】
提供了简单的Captcha 图灵测试 用来屏蔽bot/spam 垃圾信息。是一个反垃圾信息控件。我查了一下资料，我的理解是：比如你点击一个按钮需要一秒钟的时间，而这一秒钟的时间你不可能再做其他的操作比如再点一次；这样区分出了人和机器。避免机器人自动点击 注册 暴力破解之类的事情
【 细节】
(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" />
19. NumericUpDown
【功能概述】
实现Winform里面的Updown控件，可以自定义最大值最小值增减步长，同时还可以使用值列表或者调用Web Service来决定下一个值是什么。上下按钮的图片同样是可以自定义的。
【细节】
(1)普通整数增减
(2)值列表循环显示比如下面的第二个例子RefValues
(3)调用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" />
(4)上下按钮如果不需美化就这样使用：TargetButtonDownID=" " TargetButtonUpID=" "
【示意代码】
代码示意：
<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="" />
20. PagingBulletedList
【功能概述】
PagingBulletedList 扩展BulletedList的分页功能并实现客户端的排序分页。这里提供的分页是相当灵活的有各种分页方法供选择。
【细节】
(1)可以控制每页最多显示多少条，是否排序
(2)IndexSize表示index headings 的字符数，如果MaxItemPerPage设置了概属性被忽略
(3)MaxItemPerPage分页每页最大条数
【示意代码】
代码示意：
<AjaxToolkit:PagingBulletedListExtender ID="PagingBulletedListExtender1" BehaviorID="PagingBulletedListBehavior1" runat="server"
TargetControlID="BulletedList1"
ClientSort="true"
IndexSize="1"
Separator=" - "
SelectIndexCssClass="selectIndex"
UnselectIndexCssClass="unselectIndex" />
21. PasswordStrength
【功能】
验证密码强度，微软Live注册的时候就是用的这个效果。
【细节】
StrengthIndicatorType两种显示方式：文字提示，进度条提示。
示例中Textbox1 Textbox3都没有添加TextMode="Password" 所以在界面上我们可以输入中文；而且输入中文很快就达到较高安全度，当然这没有什么用处。
【示意代码】
代码示意：
<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" />
22．PopupControl
【功能概述】
PopupControl任何控件上都可以弹出任何内容，跟HoverMenu功能类似。Popup 窗口一般是放在ASP.NET Ajax UpdatePanel中, 因此它能够完成服务器端的处理之后更能新数据
显示. Popup Window 可以包含任何内容包括 ASP.NET server controls, HTML elements, etc.
【细节】
(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 ID="PopupControlExtender2" runat="server" TargetControlID="MessageTextBox"
PopupControlID="Panel2" CommitProperty="value" CommitScript="e.value += ' - do not forget!';" Position="Bottom" />
23.Rating
【功能概述】
使用星级表示等级，鼠标操作；
【细节】
鼠标移动等级也会变，而你真正要修改还要点击一下；这是延续了WP10里面等级评定控件的传统，也许这样设计是真的有道理，我不清除。
【示意代码】
代码示意：
<AjaxToolkit:Rating ID="ThaiRating" runat="server"
CurrentRating="2"
MaxRating="5"
StarCssClass="ratingStar"
WaitingStarCssClass="savedRatingStar"
FilledStarCssClass="filledRatingStar"
EmptyStarCssClass="emptyRatingStar"
OnChanged="ThaiRating_Changed" />

24．ReorderList
【功能概述】
ReorderList是一个全新的控件。它可以实现逐条列出数据并实现交互。用户简单的拖拽就可以改变数据的排列顺序并更新到数据源。在本控件中如果SortOrderField 属性设置之后排序将自动完成。
【细节】
(1)绑定数据，拖动数据之后数据将被更新到绑定源
(2)它不是已有控件的扩展是全新的服务器端控件，只是它对Ajax行为是敏感的
(3)重排的实现有两种方式：CallBack PostBack 前者的发生在页面上是没有PostBack的（也就是没有刷新页面）
(4) 而数据添加或者编辑的时候就必须要使用PostBack来同步服务器端的数据状态
(5)PostbackOnReorder就是针对两种策略进行选择
【示意代码】
代码示意：
<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>
这个控件是非常独立，并且还是适用于表现Buleted的数据，二维数据就无能为例了
DataSourceID="ObjectDataSource1" 这是必须要有的！下面是它的Template框架：
<AjaxToolkit:ReorderList ID="ReorderList1" PostBackOnReorder="false" runat="server" DataSourceID="ObjectDataSource1" CallbackCssStyle="callbackStyle"
DragHandleAlignment="Left" ItemInsertLocation="Beginning" DataKeyField="ItemID" SortOrderField="Priority">
<ItemTemplate></ItemTemplate>
<EditItemTemplate></EditItemTemplate>
<ReorderTemplate></ReorderTemplate>
<DragHandleTemplate> </DragHandleTemplate>
<InsertItemTemplate> </InsertItemTemplate>
</AjaxToolkit:ReorderList>
25. ResizableControl
【功能概述】
就像设计状态一样可以拖动修改大小，可是有什么实际的意义么，放大字体？没有想到
【 细节】
(1) HandleCssClass - The name of the CSS class to apply to the resize handle 这个属性必须要有！
(2) WEB2.0时代用户什么都是可以自定义的？？难道是这个原则下的产物么？？不理解
(3) 在前卫的飞鸽网站上我都一直没有看到关于ResizableControl的应用，期待一个成功的应用
【示意代码】
代码示意：
<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" />
26. RoundedCorners
【功能】
控件圆角 纯粹是控制外观的了，什么时候审美疲劳了还要改。据说GUI风格也是N年一轮回，这让我想起来了一个27KB的QQ，命令行界面，真的是这样么？穿孔纸带据说是第一代GUI，不会有一天真的回到那个时代吧?
【细节】
(1)还有一个非常非常细节的地方：你必须要设置 CssClass="roundedPanel"要不然不起作用
(2) Radius设置弧度，默认是5
(3)只适用于容器 WebControl
【示意代码】
代码示意：
<AjaxToolkit:RoundedCornersExtender ID="rce" runat="server" TargetControlID="Panel1" Radius="6" />
27. Slider
【功能概述】
实现WinForm中的Slider控件效果，新浪论坛用来分页了，还有的用来调整“时间----------|----热度”，创意！
【细节】
(1) 修改文本框的值也可以影响Slider的状态
【示意代码】
代码示意：
<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"
/>
28. Tabs NEW！！！
Tabs是我认为这一次新增控件中最实用的好东东， 在编码风格上与所有嵌套式的控件一样：
<AjaxToolkit:TabContainer runat="server"
OnClientActiveTabChanged="ClientFunction"
Height="150px">
<AjaxToolkit:TabPanel runat="server"
HeaderText="Signature and Bio"
<ContentTemplate>
...
</ContentTemplate>
/>
</AjaxToolkit:TabContainer>
Demo效果让我们很容易想到最近改版之后的网页主页和新浪主页 和Accordion比较一下各有千秋，是对经典WinForm的一种继承。
29 .TextBoxWatermark
【功能概述】
对文本框进行扩展，文本水印效果。
看了几十个WEB2.0的网站，没想到，见到最多的就是这种水印效果，看来很受欢迎。
【示意代码】
代码示意：
<asp:TextBox ID="TextBox1" CssClass="unwatermarked" Width="150" runat="server"></asp:TextBox>
<cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" TargetControlID="TextBox1" WatermarkText="请输入用户名" WatermarkCssClass="watermarked" />
30. ToggleButton
【功能概述】
就是把一个CheckBox的逻辑应用到一个按钮上，于是就有了双态按钮这么个玩意，有点意思啊
实际上示例页面并没有突出这个控件功能上的优势，对这个控件的操作引起页面上数据的更新，这才是CheckBox控件封装成Button的最终原因。
【示意代码】
<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" />
31．UpdatePanelAnimation
【功能概述】
更新动画效果，个人认为应用于时间较短的场合，时间长了这个动画就有点不合适了，毕竟这是一个过渡效果；时间长还是UpdateProgress比较好。
【细节】
代码结构简单但是要说的东西很多，回头再说写专题吧
代码示意：
<AjaxToolkit:UpdatePanelAnimationExtender ID="ae"
runat="server" TargetControlID="up">
<Animations>
<OnUpdating> </OnUpdating>
<OnUpdated> </OnUpdated>
</Animations>
</AjaxToolkit:UpdatePanelAnimationExtender>
32. ValidatorCallout
【功能概述】
Windows系统中最常见的气泡提示，比如你磁盘空间不足的时候。是对数据验证控件的扩展，比较实用，页面效果的确是比以前那个红色的星号醒目多了！
【细节】
Errormessage是一个开放的属性，我们可以进行丰富的扩展，大胆的想象，让显示出来的气泡更有意义
代码示意：
<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(&quot;No phone number available in profile.&quot;);'>Extract from Profile</a></div>" />
<AjaxToolkit:ValidatorCalloutExtender runat="Server" ID="PNReqE" TargetControlID="PNReq" HighlightCssClass="highlight" Width="350px" />
还有一段：
代码示意：
<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(&quot;not implemented but you get the idea;)&quot;);'>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" />
33. ListSearchExtender
【功能概述】
支持对ListBox or DropDownList的扩展通过用户键入的字符对列表中的数据进行过滤，在WinForm中做的更好一些。顺便说一下在winform里面以前在VS6.0的时代我们是怎么实现这个功能的呢？还记得吗？Sendmessage函数向ListBox或者Combox发送Find_Text消息，很怀旧了
【细节】
1. PromptText属性的作用有两个，一是显示提示信息，省的用户不知道还有这个功能。再者就是即时的显示用户输入的数据。
2. 在Safari中DropDownList扩展失效；Opera中后退键会被认为要后退一页！！！
3. 显然这个控件如果还有什么要说的就是可以设置Prompt信息的外观（样式+位置）
看代码：
<AjaxToolkit:ListSearchExtender id="LSE" runat="server"
TargetControlID="ListBox1"
PromptText="Type to search"
PromptCssClass="ListSearchExtenderPrompt"
PromptPosition="Top" />
34. Slider Show
【功能概述】
在Web2.0时代，博客是一个标志，在博客上挂着的图片幻灯片同样成为一个标记。
【细节】
1.首先它是对图片控件的扩展，之后的问题就是：我们要把图片取出来；下面是方法：SlideShowServiceMethod - The webservice method that will be called to supply images. The signature of the method must match this:
· [System.Web.Services.WebMethod]
· [System.Web.Script.Services.ScriptMethod]
public AjaxControlToolkit.Slide[] GetSlides() { ... }
1. 还要设置的就是Web Service 去图片的路径SlideShowServicePath
2. NextButtonID PlayButtonID PreviousButtonID PlayButtonText StopButtonText
PlayInterval ImageDescriptionLabelID Loop AutoPlay头脑中想象着任何一个播放器，这些属性就很容易理解了。
<AjaxToolkit:SlideShowExtender ID="SlideShowExtender1" runat="server"
TargetControlID="Image1"
SlideShowServiceMethod="GetSlides"
AutoPlay="true"
ImageDescriptionLabelID="imageLabel1"
NextButtonID="nextButton"
PlayButtonText="Play"
StopButtonText="Stop"
PreviousButtonID="prevButton"
PlayButtonID="playButton"
Loop="true" />

最新评论