AjaxControlToolkit控件集詳解

轉載：AjaxControlToolkit控件集詳解

AjaxControlToolkit下載
http://ajax.asp.net/downloads/default.aspx?tabid=47
http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=1425

環境設置如下：下載完 ASPAJAXExtSetup.msi 安裝更新后在你的系統盤下的（以C盤為例） 出現這個 文件夾：C:/Program Files/Microsoft asp.NET/ASP.NET 2.0 ajax Extensions/v1.0.61025安裝這個后我們就可以創建Asp.net AJAXEnabledWebSite站點了，這其實就是個ajax.net網站的模板。但是我們現在還不能使用微軟給我們開發好的ajax控件 。要想知道怎么使用ajax.net控件往下看。下載AjaxControlToolkit ，上面兩個一個是帶源代碼的 一個是不帶源代碼的toolkit。建議下載帶源代碼的 toolkit。下載完成后把該文件解壓到：
C:/Program Files/Microsoft asp.NET/ASP.NET 2.0 ajax Extensions/v1.0.61025/AjaxContronlToolkit/

雙擊運行AjaxControlToolkit.sln。用vs2005打開這個sln，編譯TemplateVSI這個項目后，把在C:/Program Files/Microsoft asp.NET/ASP.NET 2.0 AJAX Extensions/SampleWebSite/Bin下面生成的AjaxControlToolkit.dll和 AjaxControlToolkit.pdb復制到C:/Program Files/Microsoft asp.NET/ASP.NET 2.0 AJAX Extensions/Binaries文件夾下面，這樣我們就可以在vs2005中使用ajax.net這些控件了。
新建一個Ajax ControlToolkitWebSite 類型的web項目。在工具欄中新添加一個選項卡起名：AjaxControltoolkit
在這個選項卡上右鍵選擇項-》瀏覽找到剛才復制過去的AjaxControlToolkit.dll，添加進來。這樣我們就ajax.net控件成功引用到vs2005中了 。

1.Accordion
功能：實現了QQ、Msn好友分類的折疊效果，就像包含了多個CollapsiblePanels
細節： (1)不要把Accordion放在Table種同時又把 FadeTransitions 設置為True，這將引起布局混亂
(2)每一個 AccordionPane control 有一個Header 和Content的 template
(3)在Content中可以進行任意擴展，你什么都可以放上^_^
(4)有三種AutoSize modes ：None(推薦) Limit Fill
(5)Accordion表現的更像是一個容器

代碼示意：

 

< ajaxToolkit:Accordion  runat ="server"  SelectedIndex ="0"  HeaderCssClass ="accordionHeader"
ContentCssClass ="accordionContent"  FadeTransitions ="false"  FramesPerSecond ="40"
TransitionDuration ="250"  AutoSize ="None" >
< Panes >
< ajaxToolkit:AccordionPane  runat ="server" >
< Header >
< a  href =""  false;"  > 1. Accordion </ a ></ Header >
< Content >
</ Content >
</ ajaxToolkit:AccordionPane >
</ Panes >
</ ajaxToolkit:Accordion >  

2. AlwaysVisibleControl
功能：最多的應用是在線小說的目錄和不勝其煩的浮動小廣告
細節： (1)避免控件閃爍，把這個控件要在目標位置時使用absolutely position
(2) HorizontalSide="Center" VerticalSide="Top" 使用這個方法控制浮動在什么位置

代碼示意：

< cc1:AlwaysVisibleControlExtender  HorizontalSide ="Center"  VerticalSide ="Top"  TargetControlID ="Panel1"  runat ="server" >

 

3.Animation
功能：28個控件種效果最酷的！顧名思義實現動畫效果
細節： (1)不只是控件：pluggable, extensible framework
(2)用在什么時候：OnLoad OnClick OnMouseOver OnMouseOut OnHoverOver OnHoverOut
(3)具體使用有很多可以談的，有理由單獨寫一個Animation Xml 編程介紹

代碼示意：

< ajaxToolkit:AnimationExtender 
runat ="server"  TargetControlID ="ctrl" >
< Animations >
< OnLoad >   </ OnLoad >
< OnClick >   </ OnClick >
< OnMouseOver >   </ OnMouseOver >
< OnMouseOut >   </ OnMouseOut >
< OnHoverOver >   </ OnHoverOver >
< OnHoverOut >   </ OnHoverOut >
</ Animations >
</ ajaxToolkit:AnimationExtender >

 

4.CascadingDropDown
功能：DropDownList聯動，調用Web Service
細節： (1)DropDownList行為擴展
(2)如果使用Web service 方法簽名必須符合下面的形式：
[WebMethod]
public CascadingDropDownNameValue[] GetDropDownContents(
string knownCategoryValues, string category){...}

代碼示意：

< ajaxToolkit:CascadingDropDown  runat ="server"  TargetControlID ="DropDownList1"  Category ="Make"  PromptText ="Please select a make"  LoadingText ="[Loading makes]"  ServicePath ="CarsService.asmx"  ServiceMethod ="GetDropDownContents" />
< ajaxToolkit:CascadingDropDown  runat ="server"  TargetControlID ="DropDownList2"  Category ="Model"  PromptText ="Please select a model"  LoadingText ="[Loading models]"  ServiceMethod ="GetDropDownContentsPageMethod"  ParentControlID ="DropDownList1" />
< ajaxToolkit:CascadingDropDown  runat ="server"  TargetControlID ="DropDownList3"  Category ="Color"  PromptText ="Please select a color"  LoadingText ="[Loading colors]"  ServicePath ="~/CascadingDropDown/CarsService.asmx"  ServiceMethod ="GetDropDownContents"  ParentControlID ="DropDownList2" />

 

代碼示意：

< ajaxToolkit:CollapsiblePanelExtender  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" />

 

this .Button1.Attributes[ " onclick " ] = "  confirm('確定要停止下載么？'); " ; 

不知道是不是我沒有發現這個控件的其它優勢。

7.DragPanel
功能：頁面拖動
細節： (1)TargetControlID 要拖動的控件
(2)DragHandleID 拖動的標題欄所在的ControlID

代碼示意

< ajaxToolkit:DragPanelExtender  runat ="server"
TargetControlID ="Panel3"
DragHandleID ="Panel4"   />

 

8.DropDown
功能：什么都可以以下拉菜單的形式彈出來
細節： (1)TargetControlID要在什么控件上實現擴展
(2)DropDownControlID彈出來什么

代碼示意：

< asp:Panel  runat ="server"  CssClass ="ContextMenuPanel"  Style ="display: none;
visibility: hidden;" >
< asp:LinkButton  runat ="server"  Text ="Option 1"  CssClass ="ContextMenuItem"
OnClick ="OnSelect"   />
< asp:LinkButton  runat ="server"  Text ="Option 2"  CssClass ="ContextMenuItem"
OnClick ="OnSelect"   />
< asp:LinkButton  runat ="server"  Text ="Option 3 (Click Me!)"  CssClass ="ContextMenuItem"
OnClick ="OnSelect"   />
</ asp:Panel >
< cc1:DropDownExtender  runat ="server"  TargetControlID ="TextLabel"
DropDownControlID ="DropPanel"   />

 

9.DropShadow
功能：陰影效果，其實可以放給美工實現
細節： (1)Width 單位：px 默認5px
(2)Opacity 不透明度0-1.0 默認.5

代碼示意：

< ajaxToolkit:DropShadowExtender  runat ="server"
TargetControlID ="Panel1"  
Opacity =".8"  
Rounded ="true"
TrackPosition ="true"   />

 

[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 . 

 

代碼示意：

< ajaxToolkit:DynamicPopulateExtender  runat ="server"
TargetControlID ="Panel1"  
ClearContentsDuringUpdate ="true"  
PopulateTriggerControlID ="Label1"  
ServiceMethod ="GetHtml"  
UpdatingCssClass ="dynamicPopulate_Updating"   />

 

11.FilteredTextBox
功能：文本框數據過濾
細節： (1)過濾條件Numbers LowercaseLetters UppercaseLetters Custom
(2)過濾條件也可以是Custom的組合 FilterType="Custom, Numbers"
(3)ValidChars="+-=/*()." Custom要定義這樣的有效字符串
(4) 其實這是個雞肋：你可以輸入中文，聊勝於無，忍了

示意代碼：

< ajaxToolkit:FilteredTextBoxExtender  runat ="server"
TargetControlID ="TextBox3"  
FilterType ="Custom, Numbers"
ValidChars ="+-=/*()."   />

 

12.HoverMenu
功能：鼠標靠近時顯示菜單，可以用在在線數據修改的表格上作為功能菜單
細節： (1)PopupControlID要彈出來什么
(2)PopupPostion 在哪里彈出來Left (Default), Right, Top, Bottom, Center.
(3)OffsetX/OffsetY 彈出項與源控件的距離
(4) PopDelay 彈出延時顯示 單位milliseconds. Default is 100.

代碼示意：

< ajaxToolkit:HoverMenuExtender  runat ="Server"
TargetControlID ="Panel9"
HoverCssClass ="popupHover"
PopupControlID ="PopupMenu"
PopupPosition ="Left"
OffsetX ="0"
OffsetY ="0"
PopDelay ="50"   />

 

13.ModalPopupExtender  這個控件就是，對一個按鈕或者Linkbutton等等，進行監控，以達到點擊之后，彈出窗口的效果。而彈出的窗口可以自己定義，定義為panel，或者其他的。而panel中的效果可以自己設置，甚至於這個窗口的操作，操作之后有什么事件。在這個例子中，模仿了Kaixin網中奴隸買賣的例子，進行說明。

1.TargetControlID不用多說，控制那個控件。我這里是在Gridview中，使用函數觸發，而這個屬性又不能空。所以，形同虛設了一個按鈕。不顯示。                      

2.PopupControlID　彈出窗口的ID，我的例子是一個panel

3.BackgroundCssClassCSS，不用多說。

4.OkControlID那個按鈕是確認

5.OnOkScript觸發的腳本

6.DropShadow是否有陰影。

7.CancelControlID彈出窗口退出按鈕

代碼示意：

< asp:Panel  runat ="server"  CssClass ="modalPopup"  style ="display:none" >
< p >
< asp:Label  runat ="server"  BackColor ="Blue"  ForeColor ="White"  Style =""
Text ="信息提示" ></ asp:Label > &nbsp; </ p >
< p  > 確定要刪除當前下載的任務么？ </ p >
< p  style ="text-align:center;" >
< asp:Button  runat ="server"  Text ="OK"   ></ asp:Button >
< asp:Button  runat ="server"  Text ="Cancel" ></ asp:Button >
</ p >
</ asp:Panel >
< ajaxToolkit:ModalPopupExtender  runat ="server"  TargetControlID ="LinkButton1"  
PopupControlID ="Panel2"  BackgroundCssClass ="modalBackground"  DropShadow ="true"  
OkControlID ="Button1"  OnOkScript ="onOk()"  CancelControlID ="CancelButton"   />

 

14.MutuallyExlcusiveCheckBox
功能：互斥復選框就像Radio一樣
細節： (1)Key屬性用來分組就像RdiolistGroup一樣
(2)argetControlID用來綁定已有的CheckBox

代碼示意：

< ajaxToolkit:MutuallyExclusiveCheckboxExtender  runat ="server"
ID ="MustHaveGuestBedroomCheckBoxEx"
TargetControlID ="MustHaveGuestBedroomCheckBox"  
Key ="GuestBedroomCheckBoxes"   />

  15。NoBot 控件可以為頁面中的表單提供類似驗證碼而卻無需任何用戶操作的驗證，以阻止機器人程序自動提交垃圾信息。

1. ResponseMinimumDelaySeconds： 一個合理的客戶端從開始接受頁面到提交表單的時間間隔，單位為秒。在該時間段之內的提交將被認為是機器人所為。
2. CutoffWindowSeconds：指定一個統計同一客戶端提交次數的窗口時間段，單位為秒。在該時間段之內的提交次數超過CutoffMaximumInstances所指定的值將被認為是機器人所為。
3. CutoffMaximumInstances：指定在窗口時間段內同一客戶端最多的提交次數。在CutoffWindowSeconds所指定的時間段之內的提交次數超過該值將被認為是機器人所為。
4. OnGenerateChallengeAndResponse：指定GenerateChallengeAndResponse事件的處理函數。在該事件處理函數中我們可以設定強制瀏覽器執行的一段JavaScript以及其預期的執行結果。若瀏覽器的執行結果和預期結果不符，則本次提交將被認為是機器人所為。

代碼示意：

< ajaxToolkit:NoBot
ID ="NoBot2"
runat ="server"
OnGenerateChallengeAndResponse ="CustomChallengeResponse"
ResponseMinimumDelaySeconds ="2"
CutoffWindowSeconds ="60"
CutoffMaximumInstances ="5"   />

 

16.功能：
    與TextBox控件聯合用於增加或減少TextBox中的Value值。
屬性：
      TargetControlID：該控件的目標作用控件。
      Width：該控件加上目標TextBox控件的寬度，要是不設定將看不到TextBox控件。
      RefValues：該控件中使用的一個字符串列，用於在TextBox中遞增遞減。
      ServiceUpPath：調用增加值的web方法時的路徑。
      ServiceDownPath：調用減少值的web方法時的路徑。
      ServiceUpMethod：調用增加值的web方法。
      ServiceDownMethod：調用減少值的web方法。
      TargetButtonUpID：自定義的增加值的控件按鈕。
      TargetButtonDownID：自定義的減少值的控件按鈕。

代碼示意：

< ajaxToolkit:NumericUpDownExtender  runat ="server"
TargetControlID ="TextBox1"  Width ="120"  RefValues =""
ServiceDownMethod =""  ServiceUpMethod =""  TargetButtonDownID =""  TargetButtonUpID =""   />
< ajaxToolkit:NumericUpDownExtender  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  runat ="server"
TargetControlID ="TextBox4"  Width ="80"  TargetButtonDownID ="img1"
TargetButtonUpID ="img2"  RefValues =""  ServiceDownMethod =""  ServiceUpMethod =""   />

 

17.PagingBulletedList
功能：擴展BulletedList的分頁功能
細節： (1)可以控制每頁最多顯示多少條，是否排序
(2)IndexSize表示index headings 的字符數，如果MaxItemPerPage設置了概屬性被忽略
(3)MaxItemPerPage分頁每頁最大條數

代碼示意：

 

< ajaxToolkit:PagingBulletedListExtender  BehaviorID ="PagingBulletedListBehavior1"  runat ="server"
TargetControlID ="BulletedList1"
ClientSort ="true"
IndexSize ="1"
Separator =" - "
SelectIndexCssClass ="selectIndex"
UnselectIndexCssClass ="unselectIndex"   />  

18.PasswordStrength
功能：驗證密碼強度
細節： StrengthIndicatorType兩種顯示方式：文字提示，進度條提示

代碼示意：

 

< ajaxToolkit:PasswordStrength  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  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  runat ="server"  DisplayPosition ="BelowLeft"  TargetControlID ="TextBox3"
StrengthIndicatorType ="Text"  PreferredPasswordLength ="20"  PrefixText ="Meets Policy? "  TextCssClass ="TextIndicator_TextBox3"
MinimumNumericCharacters ="2"  MinimumSymbolCharacters ="2"  RequiresUpperAndLowerCaseCharacters ="true"
TextStrengthDescriptions ="Not at all;Very Low compliance;Low Compliance;Average Compliance;Good Compliance;Very High Compliance;Yes"
HelpHandleCssClass ="TextIndicator_TextBox3_Handle"  HelpHandlePosition ="LeftSide"   />

19.PopupControl
功能：任何控件上都可以彈出任何內容
細節： (1)TargetControlID - The ID of the control to attach to
(2)PopupControlID - The ID of the control to display
(3)CommitProperty -屬性來標識返回的值
(4) CommitScript -把返回結果值通過腳本處理，用到CommitProperty

代碼示意：

< ajaxToolkit:PopupControlExtender  runat ="server"  TargetControlID ="MessageTextBox"  
PopupControlID ="Panel2"  CommitProperty ="value"  CommitScript ="e.value += ' - do not forget!';"  Position ="Bottom"   />

 

20.Rating
功能：級別控件
細節： 又是一個雞肋，沒有太大實用價值，看代碼吧

代碼示意：

< ajaxToolkit:Rating  runat ="server"
CurrentRating ="2"
MaxRating ="5"
StarCssClass ="ratingStar"
WaitingStarCssClass ="savedRatingStar"
FilledStarCssClass ="filledRatingStar"
EmptyStarCssClass ="emptyRatingStar"
OnChanged ="ThaiRating_Changed"   />  

 

21.ReorderList
功能：這個控件的炫酷程度僅次於Animation ，可以動態移動數據
細節： (1)綁定數據，拖動數據之后數據將被更新到綁定源
(2)它不是已有控件的擴展是全新的服務器端控件，只是它對Ajax行為是敏感的
(3)重排的實現有兩種方式：CallBack PostBack 前者的發生在頁面上是沒有PostBack的（也就是沒有刷新頁面）
(4) 而數據添加或者編輯的時候就必須要使用PostBack來同步服務器端的數據狀態
(5)PostbackOnReorder就是針對兩種策略進行選擇
(6)可以擴展的很多，三言兩語難以說盡給出基本框架吧，回頭再說

代碼示意：

< ajaxToolkit:ReorderList  runat ="server"  
DataSourceID ="ObjectDataSource1"
DragHandleAlignment ="Left"  
ItemInsertLocation ="Beginning"
DataKeyField ="ItemID"  
SortOrderField ="Priority"
AllowReorder ="true" >
< ItemTemplate ></ ItemTemplate >
< ReorderTemplate ></ ReorderTemplate >
< DragHandleTemplate ></ DragHandleTemplate >
< InsertItemTemplate ></ InsertItemTemplate >
</ ajaxToolkit:ReorderList >

 

22.ResizableControl
功能：就像設計狀態一樣可以拖動修改大小，可是有什么實際的意義么，放大字體？沒有想到
細節： (1)HandleCssClass - The name of the CSS class to apply to the resize handle 這個屬性必須要有！

代碼示意：

< ajaxToolkit:ResizableControlExtender  runat ="server"
TargetControlID ="PanelImage"
HandleCssClass ="handleImage"
ResizableCssClass ="resizingImage"
MinimumWidth ="50"
MinimumHeight ="20"
MaximumWidth ="260"
MaximumHeight ="130"
OnClientResize ="OnClientResizeImage"
HandleOffsetX ="3"
HandleOffsetY ="3"   />

 

23.RoundedCorners
功能：控件圓角 純粹是控制外觀的了，什么時候審美疲勞了還要改，呵呵
細節： (1)還有一個非常非常坑人的地方：你必須要設置 CssClass="roundedPanel"要不然不起作用
(2) Radius設置弧度，默認是5
(3)好象只適用於容器

代碼示意：

< ajaxToolkit:RoundedCornersExtender  runat ="server"  TargetControlID ="Panel1"  Radius ="6"   />

 

24.Slider
功能：實現WinForm中的Slider控件效果
細節： (1)修改文本框的值也可以影響Slider的狀態！這個反饋還是有用的！

代碼示意：

< asp:TextBox  runat ="server" ></ asp:TextBox >  
< cc1:SliderExtender  runat ="server"
BehaviorID ="Slider2"
TargetControlID ="Slider2"
BoundControlID ="TextBox1"
Orientation ="Horizontal"  
EnableHandleAnimation ="true"
Minimum ="0"
Maximum ="100" />

 

25.TextBoxWatermark
功能：文本水印
細節： 沒有什么說的看代碼--->

代碼示意：

< asp:TextBox  CssClass ="unwatermarked"  Width ="150"  runat ="server" ></ asp:TextBox >
< cc1:TextBoxWatermarkExtender  runat ="server"  TargetControlID ="TextBox1"  WatermarkText ="請輸入用戶名"  WatermarkCssClass ="watermarked"   />

 

26.UpdatePanelAnimation
功能：更新動畫效果
細節：代碼結構簡單但是要說的東西很多，回頭再說寫專題吧

代碼示意：

< ajaxToolkit:UpdatePanelAnimationExtender 
runat ="server"  TargetControlID ="up" >
< Animations >
< OnUpdating >   </ OnUpdating >
< OnUpdated >   </ OnUpdated >
</ Animations >
</ ajaxToolkit:UpdatePanelAnimationExtender >

 

27.ToggleButton
功能：就是把一個CheckBox的邏輯應用到一個按鈕上，於是就有了雙態按鈕這么個玩意，有點意思啊
閑言少敘，看代碼：

 

 

< asp:CheckBox  Checked ="true"  Text ="I like ASP.NET"  runat ="server" />
< cc1:ToggleButtonExtender  runat ="server"  TargetControlID ="CheckBox1"  ImageWidth ="19"
ImageHeight ="19"  UncheckedImageUrl ="Image/down.gif"  CheckedImageUrl ="Image/up.gif"  CheckedImageAlternateText ="Check"  
UncheckedImageAlternateText ="UnCheck"   />

 

28.ValidatorCallout
功能：Windows系統中最常見的氣泡提示，比如你磁盤空間不足的時候……
細節： 是對數據驗證控件的擴展，比較新鮮

代碼示意：

< asp:RequiredFieldValidator  runat ="server"  ControlToValidate ="NameTextBox"  Display ="None"  ErrorMessage ="<b>Required Field Missing</b><br />A name is required."   />
< asp:RequiredFieldValidator  runat ="server"  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=';quot;not implemented but you get the idea;)&quot;);'>Extract from Profile</a></div>"   />
< asp:RegularExpressionValidator  runat ="server"  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"  TargetControlID ="NReq"  HighlightCssClass ="highlight"   />
< cc1:ValidatorCalloutExtender  runat ="Server"  TargetControlID ="PNReq"  HighlightCssClass ="highlight"  Width ="350px"   />
< cc1:ValidatorCalloutExtender  runat ="Server"  TargetControlID ="PNRegEx"  HighlightCssClass ="highlight"   />