AJAX控件2

来源:互联网 发布:淘宝视频空间地址 编辑:程序博客网 时间:2024/06/05 10:09
AJAX控件2

17. MutuallyExclusiveCheckBox
【功能概述】
互斥复选框就像RadioButton一样,应用的场景是:“a number of choices are available but only one can be chosen”
【细节】
(1)Key属性用来分组就像RdiolistGroup一样
(2)argetControlID用来绑定已有的CheckBox
【代码示意】
<ajaxToolkit:MutuallyExclusiveCheckboxExtender runat="server"
    ID="MustHaveGuestBedroomCheckBoxEx"
    TargetControlID="MustHaveGuestBedroomCheckBox"
    Key="GuestBedroomCheckBoxes" />
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" />

原创粉丝点击