當前位置：
首頁 >
Ajax Control Toolkit 32个服务器端控件
發布時間：2025/5/22
41
豆豆
生活随笔
收集整理的這篇文章主要介紹了
Ajax Control Toolkit 32个服务器端控件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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-family:courier new;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> </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" />
NoBot控件拒絕垃圾發布程序
10.1 NoBot：拒絕機器人程序
NoBot 控件可以為頁面中的表單提供類似CAPTCHA[注釋1]而卻無需任何用戶操作的驗證，以阻止機器人程序自動提交垃圾信息。
10.1.1 應用場景
網 絡上的垃圾信息似乎無處不在，從前是垃圾郵件、廣告等。而現在，這些無孔不入的垃圾信息發布者又盯上了互聯網上的各大網站。各種機器人程序（Bot）應運 而生，它們可以自動在網絡上爬行并尋找帶有評論或留言功能的頁面，隨即自動填寫表單并提交，其提交垃圾信息的數量和質量更是讓傳統的手工發布者自愧不如。管理者往往一夜之間發現自己的網站下已經多了成千上萬條廣告，不但讓真正有用的信息淹沒于其中，更是讓網站在性能上不堪重負。
由此，很 多解決方法同樣應運而生，其中最著名的當屬各種驗證圖片了。這種驗證圖片中的文字由計算機隨機生成，并盡其所能地對其進行扭曲、變形、修飾、模糊，最終要達到的目的是只有聰明的人類才能夠分析出其中的內容（如圖10-1所示），而當前水平的計算機卻只能夠望“圖”興嘆。然后將用戶對這幅圖片的識別文本隨表 單一起發送至服務器。這樣，服務器即可通過檢查客戶端輸入的識別文字的正確與否來判斷這是否是人類所為，也就達到了區分機器人程序和人類的目的。
圖10-1 極其復雜的驗證圖片
目 前為止，這種做法非常有效，因為計算機圖像處理能力的發展還不足以完全正確地識別出如此復雜的圖片中的文字。不過這樣做的缺點也很明顯——麻煩！每次提交 一次表單都需要用戶仔細睜大雙眼分辨驗證圖象中的內容，并且輸入一串毫無意義、沒有任何連貫性的字符，真的是一種痛苦！而且，對于視力不便的殘障人士來說，這種驗證圖片更是將其拒之門外。
于是，某些網站提供了另外一種可選項，即對于視力不便的殘障人士，可以選擇聽一段朗讀，并輸入其中讀過的字母，通過聲音的方式來分辨人類和計算機，例如Hotmail的注冊頁面，如圖10-2所示。
圖10-2 以識別聲音的方式來分辨人類和計算機
這樣似乎考慮得很周全了……不過，如果某個用戶不懂得英文，那豈不還是不能使用么？世界上有這么多種語言，難道要提供每種語言的版本？而且，即使提供了所有語言的版本，對于麻煩這個致命的問題，也仍舊是無法解決啊！
有沒有一種無需用戶操作的，對用戶完全透明的驗證機器人程序的解決方法呢？ASP.NET AJAX Control Toolkit中提供的NoBot控件即提供了這樣一種相對來說比較折衷的解決方案。
10.1.2 聲明語法以及常用屬性
NoBot控件可以通過如下四種方式較為準確地判斷出進行當前操作的是否為人類：
?? 1. 讓 客戶端瀏覽器執行一段JavaScript，并判斷其執行結果。機器人程序一般只是取得HTTP流的內容，對其分析并填寫其中表單之后即提交，這個過程中 并不包含對瀏覽器功能的使用，也就更不會解析并運行頁面中的JavaScript得到正確的運行結果。且這段JavaScript既可以是一段簡單的純數 學運算，例如123*4455=?，也可以是一些非常復雜的DOM操作，例如動態創建一個<div>，并返回它的位置等。這樣即強迫該程序只 能夠在瀏覽器中使用，大多數機器人程序顯然對此等計算無力回天。
?? 2. 判斷客戶端是否保存了本次會話狀態。一般來講，只有瀏覽器才會對會話狀態進行關注并保存，而簡單的機器人程序則會完全忽略會話狀態信息。
?? 3. 判斷客戶端從開始接受頁面到提交表單的時間間隔。機器人程序都比較講究“效率”，加上計算機的強大運算能力，幾乎可以在接收到頁面之后的瞬間就完成表單的填寫并提交回服務器。而對于人類，顯然不可能在如此短暫的幾秒鐘時間之內就完成這樣復雜的一張表單。
?? 4. 判斷某段時間之內某個客戶端的提交次數。同樣，對于人類來說，沒有能力也沒有意義在比如一分鐘之內填寫同樣的表單100次，而對于機器人程序，則這很有可能是它們的一貫作風。
以上的四種方法，雖不能百分之百地完全阻止機器人程序，然而在大多數情況下還是非常有效且相當精確的。且使用這種方法最大的優勢就在于它省去了對用戶交互的需要，讓程序更加友好易用。
NoBot控件在頁面中是完全不可見的，這似乎和我們潛意識中Ajax程序的那些眩目的界面效果沒什么關系。不過從增強用戶體驗的角度來看，NoBot卻的確是一大進步，它也正符合了Ajax的最根本設計目標——提高用戶體驗。
聲明NoBot控件的語法將類似如下所示：
<ajaxToolkit:NoBot
??? ID="noBot"
??? runat="server"
??? ResponseMinimumDelaySeconds="2"
??? CutoffWindowSeconds="60"
??? CutoffMaximumInstances="5"
??? OnGenerateChallengeAndResponse="noBot_GenerateChallengeAndResponse" />
NoBot控件繼承于System.Web.UI.WebControls.CompositeControl，并間接繼承于 System.Web.UI.WebControls.WebControl，也就擁有了這些控件的所有屬性/方法/事件，聲明NoBot控件時所常用的屬性標簽如表10-1所示。
表10-1 聲明NoBot控件時的常用屬性標簽[注釋2]
?? 1. ResponseMinimumDelaySeconds： 一個合理的客戶端從開始接受頁面到提交表單的時間間隔，單位為秒。在該時間段之內的提交將被認為是機器人所為。
?? 2. CutoffWindowSeconds：指定一個統計同一客戶端提交次數的窗口時間段，單位為秒。在該時間段之內的提交次數超過CutoffMaximumInstances所指定的值將被認為是機器人所為。
?? 3. CutoffMaximumInstances：指定在窗口時間段內同一客戶端最多的提交次數。在CutoffWindowSeconds所指定的時間段之內的提交次數超過該值將被認為是機器人所為。
?? 4. OnGenerateChallengeAndResponse：指定GenerateChallengeAndResponse事件的處理函數。在該事件處理函數中我們可以設定強制瀏覽器執行的一段JavaScript以及其預期的執行結果。若瀏覽器的執行結果和預期結果不符，則本次提交將被認為是機器人所為。
10.1.3 示例程序：阻止機器人程序的提交
NoBot控件雖然設置起來比較簡單，但對其進行合理的配置卻并不容易，檢查標準太高或太低均難以達到我們的預期目標。接下來讓我們通過一個示例程序來分析討論該控件的使用方法。
首先在新建的頁面中添加ScriptManager控件，然后添加一個TextBox和一個Button，用來模擬出一個最簡單的輸入表單，再加入一個Label，用來顯示機器人程序檢測是否通過的信息：
<asp:TextBox ID="tbSomething" runat="server"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
<asp:Label ID="lbResult" runat="server"></asp:Label>
接下來是NoBot控件的聲明：
<ajaxToolkit:NoBot ID="noBot" CutoffWindowSeconds="10" CutoffMaximumInstances="2"
? ResponseMinimumDelaySeconds="2"
? OnGenerateChallengeAndResponse="noBot_GenerateChallengeAndResponse"
? runat="server" />
我們先來看ResponseMinimumDelaySeconds屬性，在該示例程序中，因為表單非常簡單，只有一個域，我們將其設置為較短的2 （秒）。在實際開發中，我們應該根據表單的復雜程度估計用戶填寫需要的時間，并相應地配置該屬性。例如，對于如Hotmail中復雜的用戶注冊表單來講， 將該屬性值設置為100秒都不足為過——在100秒之內能夠將該注冊頁面填寫完成的，除了機器人程序也只有天才了。
對于CutoffWindowSeconds屬性，這里我們設置為10（秒）。該屬性值越大，則統計的時間段也就越長，判斷結果也就愈加有信服力，但同時這樣也會造成服務器端更大的開銷。一般情況下，將該屬性設置為10-100是一個比較合理的選擇。
對于CutoffMaximumInstances屬性，這里我們設置為2（次），配合CutoffWindowSeconds屬性，其含 義即為在10秒鐘之內同一個客戶端最多可以提交2次，超過該次數的提交均被認為是機器人程序。在考慮設置該屬性時，我們也要考慮表單的復雜程度并相應地估 計用戶填寫所需要的時間。
而對于OnGenerateChallengeAndResponse屬性，即 GenerateChallengeAndResponse事件的處理函數，我們將在其中設定強制瀏覽器執行的JavaScript以及預期的結果，這里將其指定為noBot_GenerateChallengeAndResponse()，函數的名稱無關緊要，讓開發人員能夠理解就好。該事件處理函數的簽名如下：
protected void noBot_GenerateChallengeAndResponse(object sender, NoBotEventArgs e)
注意其中的類型為NoBotEventArgs的參數e，將在稍后用到。在該函數中，我們將動態生成一個隨機大小的<div>并添加到 頁面的DOM樹中，且將該<div>的長寬乘積作為預期值保存起來。同時將向頁面中寫入一段JavaScript，該JavaScript用 來在客戶端運行時找到該<div>并取得其長寬的乘積。這樣在頁面回送之后，NoBot控件就可以通過比較預期值與從客戶端得到的實際值是否 相等來判斷客戶端是否為真正的瀏覽器，進而判斷客戶端是否為機器人。
在noBot_GenerateChallengeAndResponse()方法中，首先新建一個ASP.NET Panel，選擇Panel是因為該控件將被呈現為HTML <div>元素，方便得到其長寬屬性：
Panel noBotPanel = new Panel();
接下來，生成兩個隨機數，將分別設置到該Panel的長和寬屬性上：
Random rand = new Random();
int width = rand.Next(80);
int height = rand.Next(120);
隨后，為這個Panel指定一個隨機的ID，指定ID是為了讓之后的JavaScript中可以在客戶端取到其生成的<div>，而選用隨機的ID是為了讓程序更加具有不確定性，進一步迷惑機器人程序：
noBotPanel.ID = string.Format("noBotPanel{0}", rand.Next(1000));
然后將上面生成的長、寬應用到該Panel上：
noBotPanel.Width = width;
noBotPanel.Height = height;
為了不干擾頁面的現有布局，我們還要設置一下該Panel的樣式，將其隱藏起來：
noBotPanel.Style.Add(HtmlTextWriterStyle.Visibility, "hidden");
noBotPanel.Style.Add(HtmlTextWriterStyle.Position, "absolute");
注意第一句實際上是設置了visibility: hidden;，而并沒有選擇我們常用的display: none;。因為若選用后者，則瀏覽器將認為其大小為0。
然后將該Panel添加為NoBot的子控件，同樣是為了避免可能出現的對頁面結構的影響：
(sender as NoBot).Controls.Add(noBotPanel);
然后設置將在瀏覽器中執行的這一段檢驗的JavaScript：
e.ChallengeScript = string.Format("var noBotPanel = document.getElementById('{0}'); noBotPanel.offsetWidth * noBotPanel.offsetHeight;", noBotPanel.ClientID);
注意到這段JavaScript在運行時將首先通過該Panel的客戶端ID得到其實際<div>元素的引用，然后使用 offsetWidth和offsetHeight得到其實際大小，并將其乘積返回。這段JavaScript賦值給了 e.ChallengeScript，即NoBotEventArgs類型對象的ChallengeScript屬性上。
最后設置上面這段JavaScript的預期運行結果，非常簡單：
e.RequiredResponse = (width * height).ToString();
需要注意的是要將預期運行結果賦值給e.RequiredResponse，即NoBotEventArgs類型對象的RequiredResponse屬性。
這樣，若客戶端為真正的瀏覽器的話，則設置于e.ChallengeScript中的這段JavaScript將正常執行，并如我們所料地返回和e.RequiredResponse中完全一樣的預期結果。若是二者不匹配，則即可認為該客戶端為忽略了JavaScript的機器人程序。
完整的noBot_GenerateChallengeAndResponse()代碼如下：
protected void noBot_GenerateChallengeAndResponse(object sender, NoBotEventArgs e)
{
??? Panel noBotPanel = new Panel();
??? Random rand = new Random();
??? int width = rand.Next(80);
??? int height = rand.Next(120);
??? noBotPanel.ID = string.Format("noBotPanel{0}", rand.Next(1000));
??? noBotPanel.Width = width;
??? noBotPanel.Height = height;
??? noBotPanel.Style.Add(HtmlTextWriterStyle.Visibility, "hidden");
??? noBotPanel.Style.Add(HtmlTextWriterStyle.Position, "absolute");
??? (sender as NoBot).Controls.Add(noBotPanel);
??? e.ChallengeScript = string.Format("var noBotPanel = document.getElementById('{0}'); noBotPanel.offsetWidth * noBotPanel.offsetHeight;", noBotPanel.ClientID);
??? e.RequiredResponse = (width * height).ToString();
}
接下來同樣需要編寫的還有Page_Load()函數，其中我們將使用NoBot控件進行驗證。因為只有在回送時才有驗證的必要，所以我們忽略掉頁面第一次加載的情況：
protected void Page_Load(object sender, EventArgs e)
{
??? if (IsPostBack)
??? {
??????? ……
??? }
}
我們將在上述代碼中滿足IsPostBack的條件下編寫我們的驗證代碼。在其中新建一個NoBotState類型的枚舉，NoBot控件的驗證結果就將存放于該枚舉中：
NoBotState state;
NoBotState枚舉的可選值有如下幾種：
?? 1. Valid：表示驗證通過。
?? 2. InvalidBadResponse：表示前面自定義的JavaScript腳本（即e.ChallengeScript）的運行結果和預期結果（即e.RequiredResponse）不符，驗證失敗。
?? 3. InvalidResponseTooSoon：表示客戶端完成表單的時間小于ResponseMinimumDelaySeconds所指定的時間，驗證失敗。
?? 4. InvalidAddressTooActive：表示客戶端在CutoffWindowSeconds指定的窗口時間內的請求超過了CutoffMaximumInstances所指定的數量，驗證失敗。
?? 5. InvalidBadSession：表示會話狀態驗證失敗，可能是客戶端并沒有保存會話狀態，驗證失敗。
?? 6. InvalidUnknown：未知錯誤，驗證失敗。
然后將該NoBotState枚舉的引用傳遞到NoBot控件的IsValid()方法中，該方法將返回一個布爾值，代表驗證是否成功。同時，傳遞 進入的NoBotState也將被設定為相應的枚舉值。這樣，我們即可通過分辨IsValid()方法的返回值判斷驗證是否成功，并作以相應操作：
if (noBot.IsValid(out state))
{
??? ……
}
else
{
??? ……
}
在驗證通過時，我們將給出一個示例性的提示：
lbResult.Text = "您的信息已經被提交！";
若驗證失敗，則將同樣給出詳細的錯誤提示：
string errorMessage = string.Empty;
switch (state)
{
??? case NoBotState.InvalidAddressTooActive :
??????? errorMessage = "該IP地址在短時間內提交了過多的請求。";
??????? break;
??? case NoBotState.InvalidBadResponse :
??????? errorMessage = "瀏覽器中檢測腳本未被運行或運行結果不正確。";
??????? break;
??? case NoBotState.InvalidBadSession :
??????? errorMessage = "ASP.NET會話狀態不可用。";
??????? break;
??? case NoBotState.InvalidResponseTooSoon :
??????? errorMessage = "兩次回送時間間隔過短。";
??????? break;
??? case NoBotState.InvalidUnknown :
??????? errorMessage = "未知錯誤。";
??????? break;
}
lbResult.Text = string.Format("請求被拒絕，原因：{0}", errorMessage);
出于演示的目的，上述代碼才如此耐心地對原因一一解釋。在實際的應用程序中，我們完全沒有必要如此的“友善”，簡單地提示“懷疑為機器人程序”即 可，或是更加干脆地用Response.End()結束本次HTTP會話，給機器人程序以顏色，也免得讓其了解我們程序中更多的NoBot實現細節。
作為參考，下面列出Page_Load()函數的完整代碼：
protected void Page_Load(object sender, EventArgs e)
{
??? if (IsPostBack)
??? {
??????? NoBotState state;
??????? if (noBot.IsValid(out state))
??????? {
??????????? lbResult.Text = "您的信息已經被提交！";
??????? }
??????? else
??????? {
??????????? string errorMessage = string.Empty;
??????????? switch (state)
??????????? {
??????????????? case NoBotState.InvalidAddressTooActive :
??????????????????? errorMessage = "該IP地址在短時間內提交了過多的請求。";
??????????????????? break;
??????????????? case NoBotState.InvalidBadResponse :
??????????????????? errorMessage = "瀏覽器中檢測腳本未被運行或運行結果不正確。";
??????????????????? break;
??????????????? case NoBotState.InvalidBadSession :
??????????????????? errorMessage = "ASP.NET會話狀態不可用。";
??????????????????? break;
??????????????? case NoBotState.InvalidResponseTooSoon :
??????????????????? errorMessage = "兩次回送時間間隔過短。";
??????????????????? break;
??????????????? case NoBotState.InvalidUnknown :
??????????????????? errorMessage = "未知錯誤。";
??????????????????? break;
??????????? }
??????????? lbResult.Text = string.Format("請求被拒絕，原因：{0}", errorMessage);
??????? }
??? }
}
這樣即完成了本示例程序，編譯并在瀏覽器中查看該頁面，將如圖10-3所示。
圖10-3 初始化的表單
在文本框中輸入一些文字，確保等待了2秒鐘之后再提交頁面，將看到“您的信息已經被提交！”驗證通過信息，如圖10-4所示。
圖10-4 驗證通過
迅速再點一下提交（2秒鐘之內），將看到如圖10-5所示的“請求被拒絕，原因：兩次回送時間間隔過短。”驗證失敗信息。
圖10-5 兩次回送時間間隔過短，驗證失敗
若是在10秒鐘之內提交次數超過兩次，將看到如圖10-6所示的“請求被拒絕，原因：該IP地址在短時間內提交了過多的請求。”驗證失敗信息。
圖10-6 同一IP地址在短時間內提交了過多的請求，驗證失敗
若是在瀏覽器中禁用了的JavaScript，則將看到如圖10-7所示的“請求被拒絕，原因：瀏覽器中檢測腳本未被運行或運行結果不正確。”驗證失敗信息。
圖10-7 瀏覽器中檢測腳本未被運行或運行結果不正確，驗證失敗
10.1.4 常見問題以及使用技巧
NoBot可以完全代替傳統的驗證圖片么？
不可以。按照當前的計算機技術來看，驗證圖片將始終是最為精確的、無可替代的辨別機器人程序和真正用戶的最佳方法。對于NoBot控件所采用的判斷 規則，機器人程序均能夠通過某種方式進行模擬并巧妙地繞開。且由于NoBot控件需要統計過多的信息，例如某個時間段內每個IP的提交次數、每個頁面的提交時間間隔等，也會在某種程度上影響服務器端的執行效率。同時，若NoBot控件配置不當，或是用戶使用某些不支持JavaScript的瀏覽器（例如移 動設備中的瀏覽器），則極易導致較高的誤判斷率乃至根本無法通過驗證，反而影響了用戶體驗。
而若是配置得當且服務器端資源充沛，則NoBot控件的優勢也非常明顯。所以，在選擇合適的驗證方法時，上述問題均要結合實際應用場景考慮周全，并做出恰當的決定。
如何選擇強制瀏覽器執行的JavaScript，即ChallengeScript？
由于這段JavaScript難以調試，所以應該盡可能的簡單。同時，為了避免機器人程序的成功預測，其中也要包含相當的不確定性。由此，前面示例程序中演示的創建<div>并檢測其高度和寬度的乘積的方法非常適合：既足夠簡單，也有著相當的隨機性，足夠讓機器人程序難以捉摸。
[1]CAPTCHA即Completely Automated Public Turing Test to Tell Computers and Humans Apart（全自動的公開圖靈測試），其目的是讓計算機生成區分計算機和人類的程序算法，這種程序必須能夠生成并評價出人類能很容易通過但計算機卻難以通過的測試。目前常見的驗證圖片等都屬于CAPTCHA。若想了解更多，請訪問“The CAPTCHA Project”網站：http://www.captcha.net/。
[2] ID屬性起到控件標志符的作用，我們都很熟悉，限于篇幅這里不贅。下同。
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系統中最常見的氣泡提示，比如你磁盤空間不足的時候。是對數據驗證控件的擴展，比較實用，頁面效果的確是比以前那
【功能概述】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-family:courier new;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> </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" />
NoBot控件拒絕垃圾發布程序
10.1 NoBot：拒絕機器人程序
NoBot 控件可以為頁面中的表單提供類似CAPTCHA[注釋1]而卻無需任何用戶操作的驗證，以阻止機器人程序自動提交垃圾信息。
10.1.1 應用場景
網 絡上的垃圾信息似乎無處不在，從前是垃圾郵件、廣告等。而現在，這些無孔不入的垃圾信息發布者又盯上了互聯網上的各大網站。各種機器人程序（Bot）應運 而生，它們可以自動在網絡上爬行并尋找帶有評論或留言功能的頁面，隨即自動填寫表單并提交，其提交垃圾信息的數量和質量更是讓傳統的手工發布者自愧不如。管理者往往一夜之間發現自己的網站下已經多了成千上萬條廣告，不但讓真正有用的信息淹沒于其中，更是讓網站在性能上不堪重負。
由此，很 多解決方法同樣應運而生，其中最著名的當屬各種驗證圖片了。這種驗證圖片中的文字由計算機隨機生成，并盡其所能地對其進行扭曲、變形、修飾、模糊，最終要達到的目的是只有聰明的人類才能夠分析出其中的內容（如圖10-1所示），而當前水平的計算機卻只能夠望“圖”興嘆。然后將用戶對這幅圖片的識別文本隨表 單一起發送至服務器。這樣，服務器即可通過檢查客戶端輸入的識別文字的正確與否來判斷這是否是人類所為，也就達到了區分機器人程序和人類的目的。
圖10-1 極其復雜的驗證圖片
目 前為止，這種做法非常有效，因為計算機圖像處理能力的發展還不足以完全正確地識別出如此復雜的圖片中的文字。不過這樣做的缺點也很明顯——麻煩！每次提交 一次表單都需要用戶仔細睜大雙眼分辨驗證圖象中的內容，并且輸入一串毫無意義、沒有任何連貫性的字符，真的是一種痛苦！而且，對于視力不便的殘障人士來說，這種驗證圖片更是將其拒之門外。
于是，某些網站提供了另外一種可選項，即對于視力不便的殘障人士，可以選擇聽一段朗讀，并輸入其中讀過的字母，通過聲音的方式來分辨人類和計算機，例如Hotmail的注冊頁面，如圖10-2所示。
圖10-2 以識別聲音的方式來分辨人類和計算機
這樣似乎考慮得很周全了……不過，如果某個用戶不懂得英文，那豈不還是不能使用么？世界上有這么多種語言，難道要提供每種語言的版本？而且，即使提供了所有語言的版本，對于麻煩這個致命的問題，也仍舊是無法解決啊！
有沒有一種無需用戶操作的，對用戶完全透明的驗證機器人程序的解決方法呢？ASP.NET AJAX Control Toolkit中提供的NoBot控件即提供了這樣一種相對來說比較折衷的解決方案。
10.1.2 聲明語法以及常用屬性
NoBot控件可以通過如下四種方式較為準確地判斷出進行當前操作的是否為人類：
?? 1. 讓 客戶端瀏覽器執行一段JavaScript，并判斷其執行結果。機器人程序一般只是取得HTTP流的內容，對其分析并填寫其中表單之后即提交，這個過程中 并不包含對瀏覽器功能的使用，也就更不會解析并運行頁面中的JavaScript得到正確的運行結果。且這段JavaScript既可以是一段簡單的純數 學運算，例如123*4455=?，也可以是一些非常復雜的DOM操作，例如動態創建一個<div>，并返回它的位置等。這樣即強迫該程序只 能夠在瀏覽器中使用，大多數機器人程序顯然對此等計算無力回天。
?? 2. 判斷客戶端是否保存了本次會話狀態。一般來講，只有瀏覽器才會對會話狀態進行關注并保存，而簡單的機器人程序則會完全忽略會話狀態信息。
?? 3. 判斷客戶端從開始接受頁面到提交表單的時間間隔。機器人程序都比較講究“效率”，加上計算機的強大運算能力，幾乎可以在接收到頁面之后的瞬間就完成表單的填寫并提交回服務器。而對于人類，顯然不可能在如此短暫的幾秒鐘時間之內就完成這樣復雜的一張表單。
?? 4. 判斷某段時間之內某個客戶端的提交次數。同樣，對于人類來說，沒有能力也沒有意義在比如一分鐘之內填寫同樣的表單100次，而對于機器人程序，則這很有可能是它們的一貫作風。
以上的四種方法，雖不能百分之百地完全阻止機器人程序，然而在大多數情況下還是非常有效且相當精確的。且使用這種方法最大的優勢就在于它省去了對用戶交互的需要，讓程序更加友好易用。
NoBot控件在頁面中是完全不可見的，這似乎和我們潛意識中Ajax程序的那些眩目的界面效果沒什么關系。不過從增強用戶體驗的角度來看，NoBot卻的確是一大進步，它也正符合了Ajax的最根本設計目標——提高用戶體驗。
聲明NoBot控件的語法將類似如下所示：
<ajaxToolkit:NoBot
??? ID="noBot"
??? runat="server"
??? ResponseMinimumDelaySeconds="2"
??? CutoffWindowSeconds="60"
??? CutoffMaximumInstances="5"
??? OnGenerateChallengeAndResponse="noBot_GenerateChallengeAndResponse" />
NoBot控件繼承于System.Web.UI.WebControls.CompositeControl，并間接繼承于 System.Web.UI.WebControls.WebControl，也就擁有了這些控件的所有屬性/方法/事件，聲明NoBot控件時所常用的屬性標簽如表10-1所示。
表10-1 聲明NoBot控件時的常用屬性標簽[注釋2]
?? 1. ResponseMinimumDelaySeconds： 一個合理的客戶端從開始接受頁面到提交表單的時間間隔，單位為秒。在該時間段之內的提交將被認為是機器人所為。
?? 2. CutoffWindowSeconds：指定一個統計同一客戶端提交次數的窗口時間段，單位為秒。在該時間段之內的提交次數超過CutoffMaximumInstances所指定的值將被認為是機器人所為。
?? 3. CutoffMaximumInstances：指定在窗口時間段內同一客戶端最多的提交次數。在CutoffWindowSeconds所指定的時間段之內的提交次數超過該值將被認為是機器人所為。
?? 4. OnGenerateChallengeAndResponse：指定GenerateChallengeAndResponse事件的處理函數。在該事件處理函數中我們可以設定強制瀏覽器執行的一段JavaScript以及其預期的執行結果。若瀏覽器的執行結果和預期結果不符，則本次提交將被認為是機器人所為。
10.1.3 示例程序：阻止機器人程序的提交
NoBot控件雖然設置起來比較簡單，但對其進行合理的配置卻并不容易，檢查標準太高或太低均難以達到我們的預期目標。接下來讓我們通過一個示例程序來分析討論該控件的使用方法。
首先在新建的頁面中添加ScriptManager控件，然后添加一個TextBox和一個Button，用來模擬出一個最簡單的輸入表單，再加入一個Label，用來顯示機器人程序檢測是否通過的信息：
<asp:TextBox ID="tbSomething" runat="server"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
<asp:Label ID="lbResult" runat="server"></asp:Label>
接下來是NoBot控件的聲明：
<ajaxToolkit:NoBot ID="noBot" CutoffWindowSeconds="10" CutoffMaximumInstances="2"
? ResponseMinimumDelaySeconds="2"
? OnGenerateChallengeAndResponse="noBot_GenerateChallengeAndResponse"
? runat="server" />
我們先來看ResponseMinimumDelaySeconds屬性，在該示例程序中，因為表單非常簡單，只有一個域，我們將其設置為較短的2 （秒）。在實際開發中，我們應該根據表單的復雜程度估計用戶填寫需要的時間，并相應地配置該屬性。例如，對于如Hotmail中復雜的用戶注冊表單來講， 將該屬性值設置為100秒都不足為過——在100秒之內能夠將該注冊頁面填寫完成的，除了機器人程序也只有天才了。
對于CutoffWindowSeconds屬性，這里我們設置為10（秒）。該屬性值越大，則統計的時間段也就越長，判斷結果也就愈加有信服力，但同時這樣也會造成服務器端更大的開銷。一般情況下，將該屬性設置為10-100是一個比較合理的選擇。
對于CutoffMaximumInstances屬性，這里我們設置為2（次），配合CutoffWindowSeconds屬性，其含 義即為在10秒鐘之內同一個客戶端最多可以提交2次，超過該次數的提交均被認為是機器人程序。在考慮設置該屬性時，我們也要考慮表單的復雜程度并相應地估 計用戶填寫所需要的時間。
而對于OnGenerateChallengeAndResponse屬性，即 GenerateChallengeAndResponse事件的處理函數，我們將在其中設定強制瀏覽器執行的JavaScript以及預期的結果，這里將其指定為noBot_GenerateChallengeAndResponse()，函數的名稱無關緊要，讓開發人員能夠理解就好。該事件處理函數的簽名如下：
protected void noBot_GenerateChallengeAndResponse(object sender, NoBotEventArgs e)
注意其中的類型為NoBotEventArgs的參數e，將在稍后用到。在該函數中，我們將動態生成一個隨機大小的<div>并添加到 頁面的DOM樹中，且將該<div>的長寬乘積作為預期值保存起來。同時將向頁面中寫入一段JavaScript，該JavaScript用 來在客戶端運行時找到該<div>并取得其長寬的乘積。這樣在頁面回送之后，NoBot控件就可以通過比較預期值與從客戶端得到的實際值是否 相等來判斷客戶端是否為真正的瀏覽器，進而判斷客戶端是否為機器人。
在noBot_GenerateChallengeAndResponse()方法中，首先新建一個ASP.NET Panel，選擇Panel是因為該控件將被呈現為HTML <div>元素，方便得到其長寬屬性：
Panel noBotPanel = new Panel();
接下來，生成兩個隨機數，將分別設置到該Panel的長和寬屬性上：
Random rand = new Random();
int width = rand.Next(80);
int height = rand.Next(120);
隨后，為這個Panel指定一個隨機的ID，指定ID是為了讓之后的JavaScript中可以在客戶端取到其生成的<div>，而選用隨機的ID是為了讓程序更加具有不確定性，進一步迷惑機器人程序：
noBotPanel.ID = string.Format("noBotPanel{0}", rand.Next(1000));
然后將上面生成的長、寬應用到該Panel上：
noBotPanel.Width = width;
noBotPanel.Height = height;
為了不干擾頁面的現有布局，我們還要設置一下該Panel的樣式，將其隱藏起來：
noBotPanel.Style.Add(HtmlTextWriterStyle.Visibility, "hidden");
noBotPanel.Style.Add(HtmlTextWriterStyle.Position, "absolute");
注意第一句實際上是設置了visibility: hidden;，而并沒有選擇我們常用的display: none;。因為若選用后者，則瀏覽器將認為其大小為0。
然后將該Panel添加為NoBot的子控件，同樣是為了避免可能出現的對頁面結構的影響：
(sender as NoBot).Controls.Add(noBotPanel);
然后設置將在瀏覽器中執行的這一段檢驗的JavaScript：
e.ChallengeScript = string.Format("var noBotPanel = document.getElementById('{0}'); noBotPanel.offsetWidth * noBotPanel.offsetHeight;", noBotPanel.ClientID);
注意到這段JavaScript在運行時將首先通過該Panel的客戶端ID得到其實際<div>元素的引用，然后使用 offsetWidth和offsetHeight得到其實際大小，并將其乘積返回。這段JavaScript賦值給了 e.ChallengeScript，即NoBotEventArgs類型對象的ChallengeScript屬性上。
最后設置上面這段JavaScript的預期運行結果，非常簡單：
e.RequiredResponse = (width * height).ToString();
需要注意的是要將預期運行結果賦值給e.RequiredResponse，即NoBotEventArgs類型對象的RequiredResponse屬性。
這樣，若客戶端為真正的瀏覽器的話，則設置于e.ChallengeScript中的這段JavaScript將正常執行，并如我們所料地返回和e.RequiredResponse中完全一樣的預期結果。若是二者不匹配，則即可認為該客戶端為忽略了JavaScript的機器人程序。
完整的noBot_GenerateChallengeAndResponse()代碼如下：
protected void noBot_GenerateChallengeAndResponse(object sender, NoBotEventArgs e)
{
??? Panel noBotPanel = new Panel();
??? Random rand = new Random();
??? int width = rand.Next(80);
??? int height = rand.Next(120);
??? noBotPanel.ID = string.Format("noBotPanel{0}", rand.Next(1000));
??? noBotPanel.Width = width;
??? noBotPanel.Height = height;
??? noBotPanel.Style.Add(HtmlTextWriterStyle.Visibility, "hidden");
??? noBotPanel.Style.Add(HtmlTextWriterStyle.Position, "absolute");
??? (sender as NoBot).Controls.Add(noBotPanel);
??? e.ChallengeScript = string.Format("var noBotPanel = document.getElementById('{0}'); noBotPanel.offsetWidth * noBotPanel.offsetHeight;", noBotPanel.ClientID);
??? e.RequiredResponse = (width * height).ToString();
}
接下來同樣需要編寫的還有Page_Load()函數，其中我們將使用NoBot控件進行驗證。因為只有在回送時才有驗證的必要，所以我們忽略掉頁面第一次加載的情況：
protected void Page_Load(object sender, EventArgs e)
{
??? if (IsPostBack)
??? {
??????? ……
??? }
}
我們將在上述代碼中滿足IsPostBack的條件下編寫我們的驗證代碼。在其中新建一個NoBotState類型的枚舉，NoBot控件的驗證結果就將存放于該枚舉中：
NoBotState state;
NoBotState枚舉的可選值有如下幾種：
?? 1. Valid：表示驗證通過。
?? 2. InvalidBadResponse：表示前面自定義的JavaScript腳本（即e.ChallengeScript）的運行結果和預期結果（即e.RequiredResponse）不符，驗證失敗。
?? 3. InvalidResponseTooSoon：表示客戶端完成表單的時間小于ResponseMinimumDelaySeconds所指定的時間，驗證失敗。
?? 4. InvalidAddressTooActive：表示客戶端在CutoffWindowSeconds指定的窗口時間內的請求超過了CutoffMaximumInstances所指定的數量，驗證失敗。
?? 5. InvalidBadSession：表示會話狀態驗證失敗，可能是客戶端并沒有保存會話狀態，驗證失敗。
?? 6. InvalidUnknown：未知錯誤，驗證失敗。
然后將該NoBotState枚舉的引用傳遞到NoBot控件的IsValid()方法中，該方法將返回一個布爾值，代表驗證是否成功。同時，傳遞 進入的NoBotState也將被設定為相應的枚舉值。這樣，我們即可通過分辨IsValid()方法的返回值判斷驗證是否成功，并作以相應操作：
if (noBot.IsValid(out state))
{
??? ……
}
else
{
??? ……
}
在驗證通過時，我們將給出一個示例性的提示：
lbResult.Text = "您的信息已經被提交！";
若驗證失敗，則將同樣給出詳細的錯誤提示：
string errorMessage = string.Empty;
switch (state)
{
??? case NoBotState.InvalidAddressTooActive :
??????? errorMessage = "該IP地址在短時間內提交了過多的請求。";
??????? break;
??? case NoBotState.InvalidBadResponse :
??????? errorMessage = "瀏覽器中檢測腳本未被運行或運行結果不正確。";
??????? break;
??? case NoBotState.InvalidBadSession :
??????? errorMessage = "ASP.NET會話狀態不可用。";
??????? break;
??? case NoBotState.InvalidResponseTooSoon :
??????? errorMessage = "兩次回送時間間隔過短。";
??????? break;
??? case NoBotState.InvalidUnknown :
??????? errorMessage = "未知錯誤。";
??????? break;
}
lbResult.Text = string.Format("請求被拒絕，原因：{0}", errorMessage);
出于演示的目的，上述代碼才如此耐心地對原因一一解釋。在實際的應用程序中，我們完全沒有必要如此的“友善”，簡單地提示“懷疑為機器人程序”即 可，或是更加干脆地用Response.End()結束本次HTTP會話，給機器人程序以顏色，也免得讓其了解我們程序中更多的NoBot實現細節。
作為參考，下面列出Page_Load()函數的完整代碼：
protected void Page_Load(object sender, EventArgs e)
{
??? if (IsPostBack)
??? {
??????? NoBotState state;
??????? if (noBot.IsValid(out state))
??????? {
??????????? lbResult.Text = "您的信息已經被提交！";
??????? }
??????? else
??????? {
??????????? string errorMessage = string.Empty;
??????????? switch (state)
??????????? {
??????????????? case NoBotState.InvalidAddressTooActive :
??????????????????? errorMessage = "該IP地址在短時間內提交了過多的請求。";
??????????????????? break;
??????????????? case NoBotState.InvalidBadResponse :
??????????????????? errorMessage = "瀏覽器中檢測腳本未被運行或運行結果不正確。";
??????????????????? break;
??????????????? case NoBotState.InvalidBadSession :
??????????????????? errorMessage = "ASP.NET會話狀態不可用。";
??????????????????? break;
??????????????? case NoBotState.InvalidResponseTooSoon :
??????????????????? errorMessage = "兩次回送時間間隔過短。";
??????????????????? break;
??????????????? case NoBotState.InvalidUnknown :
??????????????????? errorMessage = "未知錯誤。";
??????????????????? break;
??????????? }
??????????? lbResult.Text = string.Format("請求被拒絕，原因：{0}", errorMessage);
??????? }
??? }
}
這樣即完成了本示例程序，編譯并在瀏覽器中查看該頁面，將如圖10-3所示。
圖10-3 初始化的表單
在文本框中輸入一些文字，確保等待了2秒鐘之后再提交頁面，將看到“您的信息已經被提交！”驗證通過信息，如圖10-4所示。
圖10-4 驗證通過
迅速再點一下提交（2秒鐘之內），將看到如圖10-5所示的“請求被拒絕，原因：兩次回送時間間隔過短。”驗證失敗信息。
圖10-5 兩次回送時間間隔過短，驗證失敗
若是在10秒鐘之內提交次數超過兩次，將看到如圖10-6所示的“請求被拒絕，原因：該IP地址在短時間內提交了過多的請求。”驗證失敗信息。
圖10-6 同一IP地址在短時間內提交了過多的請求，驗證失敗
若是在瀏覽器中禁用了的JavaScript，則將看到如圖10-7所示的“請求被拒絕，原因：瀏覽器中檢測腳本未被運行或運行結果不正確。”驗證失敗信息。
圖10-7 瀏覽器中檢測腳本未被運行或運行結果不正確，驗證失敗
10.1.4 常見問題以及使用技巧
NoBot可以完全代替傳統的驗證圖片么？
不可以。按照當前的計算機技術來看，驗證圖片將始終是最為精確的、無可替代的辨別機器人程序和真正用戶的最佳方法。對于NoBot控件所采用的判斷 規則，機器人程序均能夠通過某種方式進行模擬并巧妙地繞開。且由于NoBot控件需要統計過多的信息，例如某個時間段內每個IP的提交次數、每個頁面的提交時間間隔等，也會在某種程度上影響服務器端的執行效率。同時，若NoBot控件配置不當，或是用戶使用某些不支持JavaScript的瀏覽器（例如移 動設備中的瀏覽器），則極易導致較高的誤判斷率乃至根本無法通過驗證，反而影響了用戶體驗。
而若是配置得當且服務器端資源充沛，則NoBot控件的優勢也非常明顯。所以，在選擇合適的驗證方法時，上述問題均要結合實際應用場景考慮周全，并做出恰當的決定。
如何選擇強制瀏覽器執行的JavaScript，即ChallengeScript？
由于這段JavaScript難以調試，所以應該盡可能的簡單。同時，為了避免機器人程序的成功預測，其中也要包含相當的不確定性。由此，前面示例程序中演示的創建<div>并檢測其高度和寬度的乘積的方法非常適合：既足夠簡單，也有著相當的隨機性，足夠讓機器人程序難以捉摸。
[1]CAPTCHA即Completely Automated Public Turing Test to Tell Computers and Humans Apart（全自動的公開圖靈測試），其目的是讓計算機生成區分計算機和人類的程序算法，這種程序必須能夠生成并評價出人類能很容易通過但計算機卻難以通過的測試。目前常見的驗證圖片等都屬于CAPTCHA。若想了解更多，請訪問“The CAPTCHA Project”網站：http://www.captcha.net/。
[2] ID屬性起到控件標志符的作用，我們都很熟悉，限于篇幅這里不贅。下同。
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系統中最常見的氣泡提示，比如你磁盤空間不足的時候。是對數據驗證控件的擴展，比較實用，頁面效果的確是比以前那
轉載于:https://www.cnblogs.com/liangsetian/archive/2011/06/02/2068707.html
總結
以上是生活随笔為你收集整理的Ajax Control Toolkit 32个服务器端控件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： App_GlobalResources、
- 下一篇： Use DynamicXElement