通過這兩天的研究，發現了AJAXToolKit中許多比較實用的控件，在這里就和大家分享一下個人認為比較實用的控件，希望能對大家有所幫助。
一、圓角控件（RoundedCornersExtender）
該控件的最大的優勢在於很簡單的就可以做到圓角效果如圖，這種效果我們在很多網站中都有見到過，是不是感覺做起來很費事呢？放心，有了AJAXToolKit控件集讓你很快的實現這個圓角效果。
在開始實現之前，大家需要下載一下AXAXToolKit.dll,（點擊下載AjaxControlToolkit.zip，或直接在AJAXToolkit官網下載）然后在工具欄中右擊選擇項如圖：
然后在選擇瀏覽，找到你所下載的控件集，點擊確認，然后你就會發現你的AJAX Extends選項中多了好多的控件，這些都是AJAXToolKit中帶的擴展控件。
下面我們新建一個RoundCorners.aspx頁
在頁中我們首先需要將ToolkitScriptManager控件添加進來，我們在使用所有的AJAXToolKit控件集中的控件時都需要在頁面中添加ToolKitScriptManager控件。
頁面布局代碼如下：
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Panel ID="Panel1" runat="server" Width="200" Height="150" BackColor="LightBlue">
</asp:Panel>
<asp:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="Panel1" Corners="All" Radius="20" >
</asp:RoundedCornersExtender>
</div>
我們看到RoundedCornersExtender控件有幾個特別的屬性需要進行注意。
第一個為TargetControlID所有的AJAXToolKit控件都會有這樣的一個屬性，該屬性用來指示圓角控件所作用的對象的ID，即：Panel的ID。
第二個屬性為Corners即要進行圓角化的對象的四個角，All為對所有的角都進行圓角化，同時這里我們可以選擇left 、right 、top、bottom、topleft、topright、bottomleft、bottomright等選項
第三個屬性為Radius主要用來設置圓角化的程度，該數值越大圓角化的程度也越大，可以根據需要自行設置。
是不是有點迫不及待呢？快點來試試吧，相信你也可以做出很漂亮的頁面效果。
二、拖拽面板控件（DragPanelExtender）（點擊即可拖動）
現在有很多的網站已經有了讓用戶對自己的個人空間進行自定義的布局的功能，就好像qq空間的自定義裝扮一樣，但是又跟那個不太一樣，個人空間的模塊可以自由的拖動、放置。下面我們通過這個拖拽面板的控件可以很自如的實現這種效果。
首先第一步還是和示例一中講的一個樣將在頁中將ToolkitScriptManager控件添加進來，我們在使用所有的AJAXToolKit控件集中的控件時都需要在頁面中添加ToolKitScriptManager控件（在下面的例子中就不再重復了，希望大家自己記得加上）。
頁面布局代碼如下：
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div style="height: 300px; width: 250px; float: left; padding: 5px;" >
<asp:Panel ID="Panel6" runat="server" Width="200px" Height="270px" style="z-index: 20;">
<asp:Panel ID="Panel7" runat="server" Width="180" BackColor="LightBlue" Height="20px" style="cursor:pointer">
請拖動我O(∩_∩)O
</asp:Panel>
<asp:Panel ID="Panel8" runat="server" Width="180" Height="120"
BackColor="YellowGreen" >
</asp:Panel>
</asp:Panel>
</div>
<asp:RoundedCornersExtender ID="RoundedCornersExtender2" runat="server" TargetControlID="Panel7" Corners="All" Radius="20">
</asp:RoundedCornersExtender>
<asp:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="Panel8" Corners="All" Radius="20">
</asp:RoundedCornersExtender>
<asp:DragPanelExtender ID="DragPanelExtender2" runat="server" TargetControlID="Panel6" DragHandleID="Panel7">
</asp:DragPanelExtender>
</div>
該頁面中使用了3個Panel控件2個圓角控件和一個拖拽控件。圓角控件上一例子中我們已經講過了。這里主要講一下DragPanelExtender控件，該控件使用很簡單，只需要設定一下器TargetControlID即可，這里設置的是Panel6，然后DragHandleID設置為：Panel7，這兩個屬性的意思分別為DragPanelExtender所作用的Panel，Panel7為托動的Panel，所以如果你在下邊自己練習的時候會發現，只有托用Panel7時面板才會移動。
三、下面再給大家介紹一個比較實用的控件，我把它理解為可伸縮面板（CollapsiblePanelExtender），JQueryUI的布局中就有很多這樣的效果。如圖：
好了，下面先看下頁面的布局，這里我們還是利用上一示例的頁面進行如下布局：
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div style="height: 600px; width: 500px; float: left; padding: 5px;" >
<asp:Panel ID="Panel6" runat="server" Width="400px" Height="540px" >
<asp:Panel ID="Panel7" runat="server" Width="390" BackColor="LightBlue" Height="60px" style="cursor:pointer">
請拖動我O(∩_∩)O <br />
<asp:Panel ID="Panel2" runat="server">
<asp:Label ID="Label1" runat="server" Text="Let me Show"></asp:Label>
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/expand_blue.jpg"/></asp:Panel></asp:Panel>
<asp:Panel ID="Panel8" runat="server" Width="390" Height="300"
BackColor="YellowGreen" >
<asp:Panel ID="Panel1" runat="server" BackColor="LightBlue">
O(∩_∩)O哈哈~你好啊！生如夏花----朴樹<br />
不知在黑暗中究竟沉睡了多久，<br />
也不只要有多難才能睜開雙眼<br />
我從遠方趕來<br />
痴迷留戀人間<br />
我為你來看我不顧一切<br />
我將熄滅不能再回來<br />
我在這里啊<br />
就在這里啊<br />
驚鴻一般短暫<br />
像夏花一樣絢爛<br />
</asp:Panel> </asp:Panel></asp:Panel></div>
<asp:RoundedCornersExtender ID="RoundedCornersExtender2" runat="server" TargetControlID="Panel7" Corners="All" Radius="20">
</asp:RoundedCornersExtender>
<asp:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="Panel8" Corners="All" Radius="20">
</asp:RoundedCornersExtender>
<asp:DragPanelExtender ID="DragPanelExtender2" runat="server" TargetControlID="Panel6" DragHandleID="Panel7">
</asp:DragPanelExtender>
<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" ExpandControlID="Panel2" CollapseControlID="Panel2"
Collapsed="true"
TargetControlID="Panel1" AutoCollapse="False" ImageControlID="ImageButton1" CollapsedImage="~/images/expand_blue.jpg"
ExpandedImage="~/images/collapse_blue.jpg" ExpandedText="Hide This" CollapsedText="Show This" SuppressPostBack="True">
</asp:CollapsiblePanelExtender>
</div>
這里邊用到了DragPanelExtender、RoundedCornersExtender和CollapsiblePanelExtender，這里主要講下伸縮面板控件。我們一個一個分析其屬性。
1、看CollapseControlID和ExpandControlID這兩個屬性，我們發現這兩個屬性的值均為Panel2，我們可以理解為控制目標面板伸縮的面板，然后Panel2面板里包含了兩項一個是Label顯示”Let me Show"字樣，一個是ImageButton即用戶點擊該按鈕則目標面板顯示或者隱藏
2、TargetControlID，即目標面板的ID，也就是我們的伸縮面板，這里為了方便演示，我將其背景色設為淺藍色以示區別
3、Collapsed：該屬性為讓目標面板默認隱藏
4、AutoCollapse：設置是否自動隱藏
5、ImageControlID；即在panel2中的Image控件，即：用戶點擊顯示隱藏的imagebutton
6、CollapsedImage、ExpandedImage：用來在用戶點擊Imagebutton時顯示不同圖片，來表示伸展或者收縮狀態
7、ExpandedText、CollapsedText：在伸展或隱藏時顯示的提示
四、彈出窗口控件ModalPopupExtender
我想大家都可能遇到過這樣一種情況，在我們瀏覽某個頁面時，如果需要進行某些操作，比如留言之類的，就會在當前頁彈出一個登錄窗體、並且將整個頁面用一個比較淺的透明色遮蓋。今天就通過ModalPopupExtender來實現這樣的效果。
首先頁面布局代碼如下：
<style type="text/css">
.backClass{ background:#A1A1A1;}
</style>
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server">
<asp:Panel ID="Panel3" runat="server" BackColor="LightBlue" Height="20" Width="80" style="cursor:pointer;">
</asp:Panel>
<table>
<tr><td>賬號：</td><td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td></tr>
<tr><td>密碼：</td><td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td></tr>
<tr><td>
<asp:Button ID="Button1" runat="server" Text="登錄" /></td><td>
<asp:Button ID="Button2" runat="server" Text="取消" /></td></tr></table>
</asp:Panel>
<asp:Button ID="Button3" runat="server" Text="顯示" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button3" BackgroundCssClass="backClass"
CancelControlID="Button2" OkControlID="Button1" PopupControlID="Panel1" PopupDragHandleControlID="Panel3">
</asp:ModalPopupExtender>
<asp:Panel ID="Panel2" runat="server">
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
在開始介紹ModalPopupExtender的用法、屬性之前，需要強調的一點是，該控件的使用必須放置在 <asp:UpdatePanel> <ContentTemplate> 之中 </ContentTemplate></asp:UpdatePanel>
下面開始講述其屬性：
1、TargetControlID：這里設置的目標ID屬性為Button3，即用戶點擊ID為Button3的按鈕時才可彈出登陸窗口
2、PopupControlID：即用戶點擊Button3之后要顯示的控件的ID這里是Panel1
3、OkControlID和CancelID：點擊此屬性指定的控件時，會隱藏彈出窗口，並可以運行由OnOKScript和OnCancelScript腳本
4、BackgroundCssClass：，設置彈出窗口時，瀏覽器背景窗口的顏色
5、PopupDragHandleControlID：設置Popup彈出窗口中可以拖動的控件的ID，這里設置為Panel3（也可以不設置，非必須的）
好了，這樣你也就很容易的做出一個帶遮蓋效果的登錄窗體了快來試一下吧。
五、定位廣告控件（AlwaysVisibleControlExtender）
我們在瀏覽很多網頁的時候，都會遇到有些網頁的邊角處都有一些廣告，如果你下拉瀏覽網頁廣告似乎永遠都處在那個位置。下面就給大家演示下如何實現這樣的效果。
頁面布局代碼如下：
<asp:Panel ID="Panel3" runat="server" Width="120" Height="200" >
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/紫色.jpg" Width="110" Height="190"/>
</asp:Panel>
<asp:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server" TargetControlID="Panel3" VerticalSide="Bottom"
HorizontalSide="Right" HorizontalOffset="0" VerticalOffset="0">
</asp:AlwaysVisibleControlExtender>
這個控件的 使用也很簡單
1、TargetControlID：設置要固定的控件的ID這里是Panel3
2、VerticalSide：設置其垂直固定位置有top ，middle ，bottom三個選項可選
3、HorizontalSide：設置其水平固定位置：有left，middle，bottom三個選項可選
4、HorizontalOffset、和VerticalOffset設置其水平、垂直、停靠的距離
通過這樣簡單的設置，你就可以實現固定廣告的效果了。
六、滑動瀏覽圖片控件（SlideShowExtender）
這個效果在很多網站都有用到，可以自動的顯示圖片，也可以上一頁或者下一頁顯示圖片。
好了，直接進入主題。頁面布局代碼如下：
<head runat="server">
<title></title>
<style type="text/css">
#show{ width:500px;
height:400px;
background:blue;
text-align:center;
}
</style>
<script type="text/C#" runat="server">
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static AjaxControlToolkit.Slide[] GetSildes()
{
return new AjaxControlToolkit.Slide[]
{
new AjaxControlToolkit.Slide("img/460.jpg","Beautiful flower","Beautiful"),
new AjaxControlToolkit.Slide("img/都在.jpg","都在","All here"),
new AjaxControlToolkit.Slide("img/明艷.jpg","明艷","Shine"),
new AjaxControlToolkit.Slide("img/蒲公英.jpg","蒲公英","英子"),
new AjaxControlToolkit.Slide("img/泣露.jpg","沉霜","泣露"),
new AjaxControlToolkit.Slide("img/向日葵.jpg","向日葵","向日葵花"),
new AjaxControlToolkit.Slide("img/紫色.jpg","紫色","紫色的絢爛")
};
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div id="show">
<asp:Label ID="imageTitle" runat="server"></asp:Label><br />
<asp:Image ID="Image1" runat="server" Height="300px" Style="border:1px solid black;width:auto" ImageUrl="~/SilderShow/img/460.jpg"
AlternateText="Beautiful flower" /><br />
<asp:Label ID="imageDescription" runat="server" ></asp:Label><br />
<asp:Button ID="preybtn" runat="server" Text="《《" />
<asp:Button ID="playbtn" runat="server" Text="Play" />
<asp:Button ID="nextbtn" runat="server" Text="》》" />
<asp:SlideShowExtender ID="SlideShowExtender1" runat="server" TargetControlID="Image1" SlideShowServiceMethod="GetSildes"
AutoPlay="true" ImageTitleLabelID="iamgeTitle" ImageDescriptionLabelID="imageDescription" NextButtonID="nextbtn" PlayButtonID="playbtn"
PreviousButtonID="preybtn" PlayButtonText="Play" StopButtonText="Stop" Loop="true">
</asp:SlideShowExtender>
</div>
</div>
顯示效果：
下面來分析下SlideShowExtender的屬性：
1、TargetControlID：即我們要顯示的Image控件的ID
2、AutoPlay：設置是否自動播放
3、ImageTitleLabelID：設置用來描述圖片標題的控件ID
4、ImageDescriptionLabelID：設置用來描述圖片內容的控件ID
5、NextButtonID:設置用來進行下一頁瀏覽的控件 ID
6、PreviousButtonID：用來進行上一頁瀏覽的控件ID
SlideShowServiceMethod：通過該方法用來獲取所要瀏覽展示的slide數組，也就是要瀏覽的圖片，具體方法如向高亮標注部分。此方法返回一個Slide的數組，相當於對Slide數組的初始化，在寫此方法的時候不要忘了將<script>標簽的類型寫為“text/C#”，同時還要添加 [System.Web.Services.WebMethod]、 [System.Web.Script.Services.ScriptMethod]這兩個特性
七、個性化彈出提示控件（BalloonPopupExtender）
現在做web開發都比較注重用戶體驗，如果老是單調的用alert（）彈出提示框，用戶體驗會大打折扣，今天就給大家帶來一個個性化的提示控件。
首先頁面布局代碼如下：
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:BalloonPopupExtender ID="BalloonPopupExtender1" runat="server" TargetControlID="btnshow" BalloonPopupControlID="Panel1"
BalloonStyle="Cloud" DisplayOnFocus="True" UseShadow="False" BalloonSize="Small" DisplayOnClick="True" DisplayOnMouseOver="True">
</asp:BalloonPopupExtender>
<asp:Panel ID="Panel1" runat="server" >
O(∩_∩)O哈哈~真心喜歡這個東西！快來看看！
</asp:Panel>
<br />
<asp:Button ID="btnshow" runat="server" Text="ShowBall" />
</div>
BalloonPopupExtender控件的主要屬性如下：
1、TargetControlID：即要引發提示信息的控件ID
2、BalloonPopupControlID：要向用戶顯示的控件ID
3、BalloonStyle:要顯示的提示信息的風格這里有Cloud 、custom、Rectangle等三種形式
4、UseShadow：是否使用陰影效果
5、BalloonSize：設置要顯示的提示信息的大小，根據信息的內容自行設定有small big medium三個選項可選
6、DisplayOnFocus、DisplayOnMouseOver、DisplayOnClick：分別為鼠標聚焦顯示、覆蓋顯示和點擊顯示，可以通過設置其不同的顯示方式來進行顯示
顯示效果：
當點擊或者鼠標覆蓋時都會顯示這樣的提示，同時還可以通過設置相關的css樣式顯示不同的樣式。這里只是掩飾使用方法，望大家諒解。
到這里，本文已經基本結束了，這里只是講了幾種比較實用的AJAX擴展控件，通過這些控件我們可以很容易的就做出一些比較常見且實用的效果，當然了AJAXToolKit控件集里邊還有很多的比較實用的控件，這里就不再一一介紹了，有興趣的朋友可以自己去了解。
希望能給大家帶來一些幫助。