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

5.CollapsiblePanel
功能：Xp任務欄摺疊效果
細節： (1)可以擴展任何一個 ASP.NET Panel control
(2) CollapsiblePanel 默認認爲使用了 標準 CSS box model 早期的瀏覽器要!DOCTYPE 中設置頁面爲自適應方式提交數據rendered in IE’s standards-compliant mode.

代碼示意：

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

6.ConfirmButton
功能：就是彈出來一個確定對話框
細節： 本人認爲不是最簡單實現的方法，我的方法：

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

10.DynamicPopulate
功能：能實用Web Service或頁面方法來替換控件的內容
細節： (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.

 

代碼示意：

<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.ModalPopup
功能：Xp的關機效果，後面全部灰掉，很多郵箱的刪除對話框都着種效果
細節： (1)本質上講這是一個對話框模版，比ConfirmButton有意義有更強的擴展性！
(2)從下面的代碼中我們發現 點OK的時候可以調用後臺方法
(3)同時可以執行一段腳本

代碼示意：

<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
功能：Captcha 圖靈測試 反垃圾信息控件
細節： (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″ />

16.NumericUpDown
功能：實現Winform裏面的Updown
細節： (1)普通整數增減
(2)值列表循環顯示比如下面的第二個例子RefValues
(3)調用Web Service的格式：

 

<ajaxToolkit:NumericUpDownExtender 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″ />

 

代碼示意：

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