Asp.Net Ajax Control Toolkit 服务器端控件

 

细数 Ajax Control Toolkit 34 个服务器端控件

 

1. Accordion
【功能概述】
Accordion 可以让你设计多个 panel 并且一次只显示一个 Panel . 在页面上的显示效果就像是使用了多个 CollapsiblePanels 只不过每一次只展开其中一个 CollapsiblePanel.Accordion 控件内部包含了若干个 AccordionPane ，每一个 AccordionPane 的 template 里包括了对其 Header 和 Content 的定义。我们可以在后台代码中通过 SelectedIndex 属性取得当前展开的哪一个 Panel ，还可以控制哪一个 Panel 展开。

经常可以见到类似的效果，比如 QQ 、 Msn 好友分类的折叠效果。

【细节】

(1) 不要把 Accordion 放在 Table 中而又把 FadeTransitions 设置为 True ，这将引起布局混乱
(2) 在 AccordionPane 模板中的 Content 中可以定义任何 Web 元素，表现的就像一个容器

(3) AccordionPane 内容模板自动改变大小有三种 AutoSize modes ： None( 推荐 ) Limit  Fill

(4) $find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender') 这里找到的是 Behavior. 什么是 Behavior 呢？在 Asp.net Ajax 框架中包含一组动作并完成一个功能 . Accordion 的一个 Behavior 就是淡入淡出 .

找到 Behavior 的引用， behavior.set_FadeTransitions()  behavior.get_FadeTransitions() 的方式来实现具体某一个 Behavior 的访问和修改 .

var behavior = $find('ctl00_SampleContent_MyAccordion_AccordionExtender'); 这种写法是不好的，我们在自动测试的页面中发现了更好的写法： var behavior=$find("<%= MyAccordion.ClientID %>_AccordionExtender");

 

【代码示意】

      <script language="javascript" type="text/javascript">
            function toggleFade()  {
                var behavior = $find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender');
                if (behavior)  {       
                    behavior.set_FadeTransitions(!behavior.get_FadeTransitions());
                }
            }
            function changeAutoSize()  {
                var behavior = $find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender');
                var ctrl = $get('autosize');    // 这里找的是下拉列表控件 , 不是 Behavior
                if (behavior)  {
                    var size = 'None';   // 这里顺便看看怎么使用 Select
                    switch (ctrl.selectedIndex)  {
                        case 0 :
                            behavior.get_element().style.height = 'auto';
                            size = AjaxControlToolkit.AutoSize.None;
                            break;

                        case 1 :
                            behavior.get_element().style.height = '400px';
                            size = AjaxControlToolkit.AutoSize.Fill;
                            break;
                        case 2 :
                            behavior.get_element().style.height = '400px';
                            size = AjaxControlToolkit.AutoSize.Limit;
                            break;
                    }
                    behavior.set_AutoSize(size);
                }
                if (document.focus)  {
                    document.focus();
                }
            }
        </script>

 

 <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="" οnclick="return false;" class="accordionLink">1. Accordion</a></Header>
                    <Content>
                    </Content>
                </ajaxToolkit:AccordionPane>
            </Panes>
        </ajaxToolkit:Accordion>

 

2. AlwaysVisibleControl
【功能概述】
 AlwaysVisibleControl 是一个简单的扩展控件可以让一部分内容浮动在页面上，当滚动页面或者改变浏览器大小时总是可见的。它可以扩展任意一个 Asp.net 控件，并可按照要求设置水平 竖直方向上的相对距离 .

最多的应用是在线阅读的目录和不胜其烦的浮动小广告。

 

【细节】

(1)   避免控件闪烁，要扩展的控件要使用 absolutely position

(2)   HorizontalSide="Center" VerticalSide="Top" 使用这个方式控制浮动的位置

(3)   Var label = ocument.getElementById('ctl00_SampleContent_currentTime'); 这行代码我们可以使用更简单的方法：
     var label = $get('ctl00_SampleContent_currentTime');

【代码示意】

  代码示意：
    <cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" HorizontalSide="Center" VerticalSide="Top"  TargetControlID="Panel1" runat="server">

 

 

3. Animation
【功能概述】

28 个控件种效果最酷的！顾名思义实现动画效果。它是一个插入式，可扩展的框架可以方便的为你的页面添加动画效果。

【细节】

请参考页面代码阅读下面的细节内容 :

   (1)Sys.UI.DomElement.getLocation(b) 取得控件位置的函数，常用！！！
   (2) 动画分为两种： Animation Action 后者的强大让我很兴奋
   (3)<Sequence>  </Sequence> 顺序执行的动画脚本
   (4)<Parallel>  <Parallel >  并发执行的动画脚本
   (5) 【 Action 】 <StyleAction AnimationTarget="btnCloseParent" Attribute="opacity" value="0" /> 控制目标元素外观样式，属性 -- 值的格式修改，一个元素可以应用多个 StyleAction
  (6) 【 Action 】 <EnableAction AnimationTarget="ctl00_ContentPlaceHolder1_btnInfo" Enabled="true" /> 控件是否可用使用的方式跟上面是一样的，当前控件可省略 AnimationTarget
  (7) 【 Action 】 <ScriptAction Script="Cover($get('ctl00_ContentPlaceHolder1_btnInfo'), $get('flyout'));" /> 执行一段脚本的 Action          
   (8) 【 Action 】 <HideAction /> 隐藏目标的控件
   (9) 【 Action 】 <OpacityAction AnimationTarget="info" Opacity="0" /> 设置透明度的 Action
  (10) 【 Animation 】 <FadeIn AnimationTarget="info" Duration=".2"/>       <FadeOut /> 淡入淡出    
  (11) 【 Animation 】 <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />    控制目标元素的大小但是注意： If scaleFont is true, the size of the font will also scale with the element.  If center is true, then the element's center will not move as it is scaled. It is important to note that the target must be positioned (i.e. absolutely) so that settings its top/left properties will change its location in order for center to have an effect.
   (12) 【 Animation 】     <Pulse Duration=".1" /> 脉搏跳动效果          
   (13) 【 Animation 】 <Color Duration=".2" StartValue="#FFFFFF" EndValue="#FF0000" Property="style" PropertyKey="color" />  颜色渐变效果，设置起始结束颜色就可以
  (14)  【 Animation 】 <Resize Width="260" Height="280" /> 改变元素的大小 Action

(15) 动画效果是在用户某一个动作发生的时候触发，触发的时机包括： OnLoad  OnClick  OnMouseOver OnMouseOut OnHoverOver OnHoverOut

正式版的页面文件为动画脚本添加了注释更加清晰易懂 . 上面列出的是常用的一些动画效果，全部资料参见 Anmation Reference 。

仔细阅读 Animation 的页面代码，其实我们已经提前触摸到了 Xaml 的编程风格。 Asp.net Ajax 之后的下一代 WEB 界面是 WPF/E,WPF/E 现在支持的是 ”javascript+Xaml” 还不支持 ”C# + Xaml” 。

下一代的 WEB UI 会是怎样的？下一个版本的 Asp.net 会怎样安排 Ajax 的位置？ WPF/E 会不会被整合在新版本的 Asp.net 中呢？期待中 ……

 

【示意代码】

代码示意：
   <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. AutoComplete  NEW!!!
【功能概述】

AutoComplete 控件是对 Asp.net 文本框控件的扩展，当用户词汇前面的字母时以弹出区域的形式给出备选词。这个功能的完成依赖于特定的 Web Service 。

在正式版的 Ajax Control Toolkit 中看到自动完成扩展控件有一种感觉：它终于出现在了它应该出现的地方。之前 AutoComplete 控件是在 CTP 版本中以核心组件的形式出现的，这个功能极为明确的控件被归类到核心组件，我还是比较迷惑。正式版中它终于成为了一个扩展控件。

Google 的自动完成功能，新浪 网易等信箱的收件人自动完成功能是这个功能的成功应用。

【细节】
    从 Atlas 的版本开始， AutoComplete 的使用方法就没有太大的改变，只要注意：

(1) 调用的 Web Service 方法签名有要求：
           [WebMethod]
           public string[] GetCompletionList(string prefixText, int count) { ... }
     (2)MinimumPrefixLength 最短前缀字符数，就是说你至少要键入几个字符才会出现提示

 

5. Calendar NEW!!!
【功能概述】

Calendar 同样是对文本框的扩展，当点击文本框的时候弹出日期选择选项。现在的版本提供的功能已经和 WinForm 中的日期控件一样，可以通过点击日期选择，点击箭头在年月之间切换。

【细节】
         (1) 同样是对文本框的扩展，文本框获得焦点就会出现日期选择，样式是可以自定义的
         (2) 虽然一定是对文本框的扩展但是我们还是可以指定弹出按钮 PopupButtonID ，一旦这个值设定了，文本框获得焦点也不会弹出日期选择
         (3) 不需要把它放在 UpdatePanel 中

 

6. CascadingDropDown
【功能概述】

CascadingDropDown 控件是对 ASP.NET DropDownList control 的扩展，实现对一个 DropDownList 操作时其它 DropDownList 发生相应的变化。这个功能的实现依赖于 Web Service 。

【细节】

(1) 如果使用 Web service 方法签名必须符合下面的形式：
                [WebMethod]
                public CascadingDropDownNameValue[] GetDropDownContents(
                string knownCategoryValues, string category){...}

(2) 在阅读代码的时候请关注： Category 属性。官方说法 The name of the category this DropDownList represents 实打开 ~/App_Data/CarsService.xml 你就发现这是 Xml 的元素标签。从这个角度我们就解决了为什么联动，即联动的本质；同时也明白了调用 Service 的参数约定。
【示意代码】

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

另外页面上还有一段定义 UpdatePanel 的代码很典型，可以作为参考：

  <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" RenderMode="inline">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="[No response provided yet]" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="DropDownList3" EventName="SelectedIndexChanged" />
            </Triggers>
        </asp:UpdatePanel>

7. CollapsiblePanel
【功能概述】

这个控件几乎在每一个页面上都出现了。它是非常灵活的一个控件，可以扩展任何 ASP.NET Panel control 。在页面上轻松实现展开收缩效果。这种效果我们最熟悉的恐怕就是 XP 的文件任务栏了。

【细节】

(1)    CollapsiblePanel 默认认为使用了 标准 CSS box model 早期的浏览器要 !DOCTYPE 中设置页面为自适应方式提交数据 rendered in IE's standards-compliant mode.

(2)    可以自动展开 自动收缩 Autoexpand="true" AutoCollapse="true" 但是这两个本身是互斥的不能同时为 True; 如果设置了这两个属性其中一个为 True 就不要在设置 Collapsed="True" ，这样就没有意义了。

(3)    TextLabelID="Label1" 这个属性有什么深意 / 高级的操作么？我还在研究。。。

  代码示意：
   <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"/>

 

8. ConfirmButton

【功能概述】

这个控件是对 Button 和继承了 Button 的控件的扩展，它可以捕捉到用户点击了对话框中的 “ 是 ”“ 否 ” ；如果是 “ 是 ” 就继续执行后面的代码，反之就停止执行它默认的提交行为。

【细节】

(1) 要扩展的 LinkButton Button 以及 ConfirmButtonExtender 都要放在 updatepanel 里面
       如果是放在外面，点击 “ 确定 ” 或者 “ 取消 ” 之后还是会导致页面刷新！

(2) 更简单的方法：

  this.Button1.Attributes["onclick"]="javascript:return confirm(' 确定要停止下载么？ ');";

(3) 如果是需要服务器端获取用户选择，还是使用模式弹出吧

9.DragPanel
  【功能概述】

DragPanel extender 可以轻松的让控件 "draggability".DragPanel 扩展的目标是任意 ASP.NET Panel . 你可以设置拖动行为的细节，比如哪里是类似于标题栏一样的区域。

【细节】

(1)   TargetControlID 要拖动的控件

(2)    DragHandleID   拖动的标题栏所在的 ControlID 示例代码中： panel6 包含 panel7 （标题） panel8 （内容）扩展的对象是 panel6

(3)   是不是发现这段 JS 代码了呢？如果去掉这段代码，图到页面边缘的时候是不正常的，它自己跑回原来位置了 :)
        <script type="text/javascript">
        // The following snippet works around a problem where FloatingBehavior
        // doesn't allow drops outside the "content area" of the page - where "content
        // area" is a little unusual for our sample web pages due to their use of CSS
        // for layout.
        function setBodyHeightToContentHeight() {
            document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)+"px";
        }
        setBodyHeightToContentHeight();
        $addHandler(window, "resize", setBodyHeightToContentHeight);   
    </script>

 

【示意代码】

代码示意
 <ajaxToolkit:DragPanelExtender ID="DPE1" runat="server"
    TargetControlID="Panel3"
    DragHandleID="Panel4" />

 

10. DropDown
【功能概述】

  DropDown 同样是一个 ASP.NET AJAX extender 可以对任何 ASP.NET control 进行扩展实现 SharePoint-style drop-down menu 效果。弹出的只不过是其它的 panel 或者控件而已。     在 IE 浏览器中下拉列表总是在最前面的，的确是影响页面效果，这个控件的出现可以解决这一问题 . 这随时随地的弹出窗口成为 WEB 2.0 网站的标志性建筑，弹出的东西也越来越丰富。

【细节】

(1)TargetControlID 要在什么控件上实现扩展
    (2)DropDownControlID 弹出来什么

(3) 示例中是对一个 Label 进行的扩展，我试着扩展 TextBox 效果更好！
【示意代码】

  代码示意：
  <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" />

还有一段代码有很多可以学习的地方：

代码示意：
  <asp:UpdatePanel id="Update" runat="server">
            <ContentTemplate>
                <asp:Label id="lblSelection" runat="server" Style="padding: 5px;" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Option1" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="Option2" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="Option3" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
        <ajaxToolkit:UpdatePanelAnimationExtender ID="UpdateAnimation" runat="server" TargetControlID="Update" BehaviorID="Highlight">
            <Animations>
                <OnUpdated>
                    <Sequence>
                        <ScriptAction Script="$find('Highlight')._onUpdated._animation._animations[1].set_target($get('ctl00_ContentPlaceHolder1_lblSelection'));" />
                        <Color Duration=".5" StartValue="#FFFF90" EndValue="#FFFFFF" Property="style" PropertyKey="backgroundColor" />
                    </Sequence>
                </OnUpdated>
            </Animations>
        </ajaxToolkit:UpdatePanelAnimationExtender>

 

11. DropShadow
【功能概述】

阴影效果
  【 细节】

(1)   Width 单位： px  默认 5px

(2)   Opacity  不透明度 0-1.0 默认 .5

【示意代码】

  代码示意：
    <ajaxToolkit:DropShadowExtender ID="dse" runat="server"
        TargetControlID="Panel1"
        Opacity=".8"
        Rounded="true"
        TrackPosition="true" />

 

12. DynamicPopulate
【功能概述】

能实用 Web Service 或页面方法来动态的替换控件的内容。调用的方法返回的是一个 Html 的字符串，作为目标元素的子节点插入其中。
【 细节】

 (1)ClearContentsDuringUpdate  替换之前先清除以前的内容（默认 True ）
  (2)PopulateTriggerControlID 触发器绑定的控件 单击时触发
  (3)ContextKey 传递给 Web Service 的随机字符串
  (4) Web Service 方法签名必须符合下面的形式：
                [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.

(5) 我们非常欣慰的一点就是 BehaviorID="dp1", 这种用法是我所期望的。

(6) CustomScript 怎么用呢？？ This script must evaluate to a string value. ??

【示意代码】

代码示意：
<ajaxToolkit:DynamicPopulateExtender ID="dp" runat="server"
    TargetControlID="Panel1"
    ClearContentsDuringUpdate="true"
    PopulateTriggerControlID="Label1"
    ServiceMethod="GetHtml"
    UpdatingCssClass="dynamicPopulate_Updating" />
             

代码示意 2 ：
<asp:Panel ID="Panel1" runat="server" CssClass="dynamicPopulate_Normal">
        </asp:Panel>  // 要扩展的 panel
<ajaxToolkit:DynamicPopulateExtender ID="dp" BehaviorID="dp1" runat="server"
          ClearContentsDuringUpdate="true"
          PopulateTriggerControlID="Label1"
          TargetControlID="Panel1"
          ServiceMethod="GetHtml"
          UpdatingCssClass="dynamicPopulate_Updating">
    </ajaxToolkit:DynamicPopulateExtender>
    <script runat="server">

    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public static string GetHtml(string contextKey)  {
        // a little pause to mimic a latent call.
        //
        System.Threading.Thread.Sleep(250);

        string value = "";
        if (contextKey == "U")  {
            value = DateTime.UtcNow.ToString();
        } else  {
            value = String.Format("{0:" + contextKey + "}", DateTime.Now);
        }

        return String.Format("<span style='font-weight:bold;'>{0}</span>", value);
    }

</script>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script  type="text/javascript">

    function updateDateKey(value)  {

        var behavior = $find('dp1'); // 这样使用 BehaviorID 可是方便多了
        if (behavior)  {
            behavior.populate(value);// 内部实现调用了 Service
        }

    }

    Sys.Application.add_load(function() {updateDateKey('G');});  // 页面加载时要执行的脚本！

</script>

13. FilteredTextBox

【功能概述】

FilteredTextBox 扩展控件用来阻止用户在文本框输入无效字符 。由于这种效果的实现是依赖于 deactivating JavaScript （怎么翻译呢？） , 所以不要期望数据会发送到服务器端进行校验。

【细节】

(1) 过滤条件 Numbers LowercaseLetters UppercaseLetters   Custom

 (2) 过滤条件也可以是 Custom 的组合 FilterType="Custom, Numbers"
    (3)ValidChars="+-=/*()." Custom 要定义这样的有效字符串

(4) 这个控件我认为是聊胜于无，我们要把允许输入的数据进行枚举，太难了。事实上，这个控件在任何状态下都是接受中文的。如果使用正则表达式情形或许好些。看它的实现代码还有进一步改进的可能，学习研究中 ……

【示意代码】

示意代码：
<ajaxToolkit:FilteredTextBoxExtender ID="ftbe" runat="server"
        TargetControlID="TextBox3"        
        FilterType="Custom, Numbers"
        ValidChars="+-=/*()." />

在该控件的实现代码中我发现了这样一段 , 这可能是一个突破口：

特殊键排除代码：
<   var scanCode;
                        if (evt.rawEvent.keyIdentifier) {
           
            // Safari
            // Note (Garbin): used the underlying rawEvent insted of the DomEvent instance.
            if (evt.rawEvent.ctrlKey || evt.rawEvent.altKey || evt.rawEvent.metaKey) {
                return;
            }
           
            if (evt.rawEvent.keyIdentifier.substring(0,2) != "U+") {
                return;
            }
           
            scanCode = evt.rawEvent.charCode;
           
            if (scanCode == 63272 /* Delete */) {
                return;
            }
        } 
        else {
            scanCode = evt.charCode;
        } 
           
        if (scanCode && scanCode >= 0x20 /* space */) {               
            var c = String.fromCharCode(scanCode);                       
           
            if(!this._processKey(c)) {
                evt.preventDefault();
            }
        }
    }
   

 

14. HoverMenu
【功能概述】

HoverMenu 控件可以扩展任何 ASP.NET WebControl, 同时将把附加的显示内容关联到该控件上，当用户移动鼠标到该控件的时候附加的内容将显示出来。

【细节】

(1)   PopupControlID 要弹出来什么
 (2)PopupPostion 在哪里弹出来 Left (Default), Right, Top, Bottom, Center.
 (3)OffsetX/OffsetY 弹出项与源控件的距离
(4) PopDelay 弹出延时显示 单位 milliseconds. Default is 100.

【代码示意】

代码示意：
<ajaxToolkit:HoverMenuExtender ID="hme2" runat="Server"
    TargetControlID="Panel9"
    HoverCssClass="popupHover"
    PopupControlID="PopupMenu"
    PopupPosition="Left"
    OffsetX="0"
    OffsetY="0"
    PopDelay="50" />

示例页面上还有一个小细节：

HttpUtility.HtmlEncode() 使用 HttpUtility.HtmlEncode 将危险的符号转换为它们的 HTML 表示形式。

代码示意：
      <asp:Label Font-Bold="true" ID="Label1" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Title"))) %>'></asp:Label></td>
     <asp:Label ID="Label2" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Description"))) %>'></asp:Label></td>
                 <asp:Label ID="Label3" runat="server" Text='<%# Eval("Priority") %>'></asp:Label>

 

15. MaskedEdit NEW ！！！
【功能概述】

MaskedEdit 控件是对 TextBox control 的扩展 . 用户输入会在客户端进行验证。在示例页面中，我感觉实际效果并不是太好所以没有深入学习，不多说了。

16. ModalPopup
【功能概述】

 ModalPopup 扩展控件允许在页面上模式弹出内容并阻止用户和页面上其他区域的交互。模式弹出区域的样式都是可以自定义的。 用户可以在模式弹出框选择 OK/Cancel ，对用户选择的处理方式有两种：使用客户端脚本或者 PostBack 到服务器端。这样我们就得到了用户的选择结果！

【细节】

(1)   看下面的代码可以看到执行客户端脚本的方法。

(2)   应该说这个控件是提供了一个模式弹出对话框的模板

(3)   在正式版以前的所有版本，这个控件在 Opear 浏览器中都是不正常的。正式版已经修正这个 BUG ，现在正在比较学习两个版本的源代码，看看问题的原因和解决方法是什么。

【示意代码】

代码示意：
  <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=" 信息提示 "></asp:Label>&nbsp;</p>
        <p > 确定要删除当前下载的任务么？ </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" />

 

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