Asp.Net Ajax控件示例
<asp:ScriptManager ID="ScriptManager2" runat="server">
</asp:ScriptManager> <div>
<br />
<asp:TextBox ID="TextBox1" runat="server" Width="67px"></asp:TextBox><br />
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
<br />
<cc1:SliderExtender ID="SliderExtender1" runat="server" BoundControlID="TextBox1"
Steps="10" TargetControlID="TextBox2">
</cc1:SliderExtender>
</div>
2. TabContainer控件和TabPanel控件的使用方法
<div>
<br />
<cc1:TabContainer ID="TabContainer1" runat="server" Width="260px" Height="150px">
<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Tab1">
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="确定" />
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="Tab2">
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label><br />
<br />
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="确定" />
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="Tab3">
<ContentTemplate>
<br /><br />视频在线<br /><br />
http://www.cnblogs.com/hubcarl
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer> <br />
</div>
3. NumericUpDownExtender控件
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div style="text-align: center">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table style="width: 291px; height: 151px">
<tr>
<td style="width: 316px">
数字一：</td>
<td style="width: 271px">
<asp:TextBox ID="TextBox1" runat="server" Width="100px">5</asp:TextBox></td>
<td style="width: 184px">
</td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td style="width: 316px">
数字二：</td>
<td style="width: 271px">
<asp:TextBox ID="TextBox2" runat="server" Width="100px">10</asp:TextBox></td>
<td style="width: 184px">
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/down.gif" /></td>
<td style="width: 100px">
<asp:Image ID="Image2" runat="server" ImageUrl="~/images/up.gif" /></td>
</tr>
<tr>
<td style="width: 316px">
自定义：</td>
<td style="width: 271px">
<asp:TextBox ID="TextBox3" runat="server" Width="100px">周一</asp:TextBox></td>
<td style="width: 184px">
</td>
<td style="width: 100px">
</td>
</tr>
</table>
<cc1:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server" RefValues="周一;周二;周三;周四;周五;周六;周日"
TargetControlID="TextBox3" Width="70">
</cc1:NumericUpDownExtender>
<cc1:NumericUpDownExtender ID="NumericUpDownExtender2" runat="server" TargetButtonDownID="Image1"
TargetButtonUpID="Image2" TargetControlID="TextBox2" Width="100">
</cc1:NumericUpDownExtender>
<cc1:NumericUpDownExtender ID="NumericUpDownExtender3" runat="server" TargetControlID="TextBox1"
Width="100">
</cc1:NumericUpDownExtender>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<!--
yW t[‑]{9V Uz
a W
NumericUpDownExtender以及相关的textbox和其它控件都放在UpdatePanel控件的ContentTemplate模板里，否则得到的总是textbox的初始值。
4 使用AutoCompleteExtender自动扩展
本章介绍AutoCompleteExtender的使用方法。用过Google的朋友都会发现，当我们在搜索框输入关键字的时候，Google会自动列出相关关键字提示。那么用Ajax.net也能做到么？答案是：Of course!
第一步：建立AJAX Control Toolkit Website
本例子只需要一个TextBox控件和一个AutoCompleteExtender组件。拖进设计界面后代码如下所示：
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server">
</ajaxToolkit:AutoCompleteExtender>
第二步：建立WebService
要使用AutoCompleteExtender，我们要通过WebService传递数据。在解决方案资源管理器单击项目-〉添加新项-〉Web服务。我在这里使用了默认的名称，大家有需要自己改吧。
WebService.asmx的代码如下：
using System;
using System.Web.Services;
using System.Collections.Generic;
///<summary>
/// WebService 的摘要说明
///</summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {
public WebService () {
//如果使用设计的组件，请取消注释以下行
//InitializeComponent();
}
[WebMethod]
public string[] GetCompleteList(string prefixText, int count) {
char c1, c2, c3;
if (count == 0)
count = 10;
List<String> list = new List<string>(count);
Random rnd = new Random();
for (int i = 1; i <= count; i++)
{
c1 = (char)rnd.Next(65, 90);
c2 = (char)rnd.Next(97, 122);
c3 = (char)rnd.Next(97, 122);
list.Add(prefixText + c1 + c2 + c3);
}
return list.ToArray();
}
}
注意：加亮部分大家要自行添加。[System.Web.Script.Services.ScriptService]一定要加，它告诉.net runtime这个WebService被允许从客户端调用。另外System.Collections.Generic是List的命名空间，List可以理解成物件或类别的集合，我们可以根据特殊条件在List里找到我们所需要的值，是.net 2.0新增加的类。该函数的意思是产生三个随机字母，自动添加在输入字符串的后面。另外prefixText和count这两个参数名称要严格遵守拼写格式，原因以前已经介绍过了。
第三步：设置AutoCompleteExtender
具体设置代码如下：
<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
TargetControlID="TextBox1"
CompletionSetCount="12"
EnableCaching="true"
MinimumPrefixLength="3"
ServicePath="WebService.asmx"
ServiceMethod="GetCompleteList">
</ajaxToolkit:AutoCompleteExtender>
TargetControlID是目标控件ID，这里是TextBox1。CompletionSetCount是指列表列出输入提示的数量。EnableCaching指是否启用缓存，建议启动。MinimumPrefixLength是指输入多少个字符后开始列出输入提示列表。ServicePath是指Web服务的文件名，这里是WebService.asmx。ServiceMethod是指调用Web服务的函数名，这里是GetCompleteList。
5. AlwaysVisibleControlExtender控件
使用它你能快速做出自己的浮动面板，而且还可以通过后台代码控制它的相关属性。
<asp:Panel BackColor="#666666" ForeColor="#ffffff" ID="Panel1" runat="server" Height="120px" Width="210px">
这个Panel用了AlwaysVisibleControlExtender，因此它总会漂浮在一个地方……</asp:Panel>
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server"
TargetControlID="Panel1" VerticalSide="top" HorizontalSide="right" VerticalOffset="50" HorizontalOffset="50"
ScrollEffectDuration="1">
</ajaxToolkit:AlwaysVisibleControlExtender>
首先设置TargetControlID，当然是Panel1了。VerticalSide指垂直停靠位置，大家可以选择Top、Middel或Bottom。HorizontalSide指水平停靠位置，可以选择Left、Center或Right。VerticalOffset是指垂直边距，该属性根据VerticalSide的选择而不同。例如当VerticalSide=Top时，VerticalOffset=50即离浏览器上部边缘50像素；当VerticalSide=Bottom时，VerticalOffset=50即离浏览器底部边缘50像素，大家自己试验一下。HorizontalOffset和VerticalOffset类似，这里不再重复解释了。ScrollEffectDuration指滑动的延迟时间，数值越大滑动得越慢但越平滑，单位是秒。
6. ConfirmButtonExtender弹出确认框
该控件是用于在用户在客户端浏览器中点击一下按钮后，跳出一个对话框提醒用户是否真的要执行该操作，如果点"是"，那么就执行该按钮的事件处理函数；如果点"否"，那么就取消该操作。本控件使用很简单，但关于ConfirmButtonExtender的使用需要注意：
1)ConfirmButtonExtender和它关联的Button控件必须一起放到UpdatePanel中
或者
2)ConfirmButtonExtender和它关联的Button控件一起放到UpdatePanel外面，并在UpdatePanel的Triggers的AsyncPostBackTrigger中设定ControlID为该Button按钮。
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /><br />
<cc1:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server" ConfirmText="请记住我们的域名"
TargetControlID="Button1">
</cc1:ConfirmButtonExtender>
</ContentTemplate>
</asp:UpdatePanel>
</div>
7 MutuallyExclusiveCheckBox控件
MutuallyExclusiveCheckBox 是一个可以使得 CheckBox 具有类似 RadioButton 一样，在一系列的选项中只能选择一个的功能。
但是和 RadioButton 不同，MutuallyExclusiveCheckBox 除了在一系列选项中选择一个的功能外，MutuallyExclusiveCheckBox 还可以呈现“不选任何一个”的状态。
<div style="text-align: center">
<br />
<asp:CheckBox ID="CheckBox1" runat="server" Text="A" /><br/>
<asp:CheckBox ID="CheckBox2" runat="server" Text="B" /><br />
<br />
<cc1:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender1" runat="server"
Key="QQ" TargetControlID="CheckBox1">
</cc1:MutuallyExclusiveCheckBoxExtender>
</div>
<cc1:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender2" runat="server"
Key="QQ" TargetControlID="CheckBox2">
</cc1:MutuallyExclusiveCheckBoxExtender>
8. DropShadowExtender控件
1.Shadow就是陰影，這是一個讓panal有陰影的控制項，單純美觀用而已。
2.Rounded設定陰影是否要圓角
3.TrackPosition，要設成true，否則陰影不會跟著panal跑，底下範例結合拖拉panal，大家可以試試，若TrackPosition沒有設成true，在拖拉panal時，陰影是不會跟著動的。
<div style="height:350px;width:600px;">
<asp:Panel ID="Panel1" runat="server" BackColor="Yellow" Height="96px" Width="288px">
測試用</asp:Panel>
</div>
<cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" Rounded="True" TargetControlID="Panel1">
</cc1:DropShadowExtender>
<cc1:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="Panel1">
</cc1:DragPanelExtender>
9. TextBoxWatermarkExtender用于对TextBox添加水印效果。当焦点置于textbox中时文字消失 焦点离开时又出现(效果如下)
<div>
<br />
网址：<asp:TextBox ID="TextBox1" runat="server" CssClass="unwatermarded"></asp:TextBox><br />
<br />
<cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" TargetControlID="TextBox1"
WatermarkText="请输入网址" WatermarkCssClass="watermarked">
</cc1:TextBoxWatermarkExtender>
</div>
10. PopupControlExtender控件
例子1
PopupControlExtender是一个可以控制Popup载体的组件，它本身并不会产生Popup控件，它的作用是控制Popup载体，例如panel，div等的显示、消失并获得Popup载体中控件的返回值，返回到目标控件中去。下面我们一齐来学习一下PopupControlExtender的使用方法。
第一步：建立AJAX Control Toolkit Web Site
要使用PopupControlExtender我们要使用AJAX Control Toolkit Web Site模板。建立好网站后我们需要以下控件：一个UpdatePanel、一个Panel控件、一个TextBox控件、一个RadioButtonList控件和一个PopupControlExtender组件，如下图所示：
注意：UpdatePannel一定要放在Panel里面，否则运行一次之后会发生JS异常。另外一定要将RadioButtonList的AutoPostBack属性设为True，否则就没有响应了。如下所示：
<asp:Panel ID="Panel1" CssClass="popupbox" runat="server" Height="50px" Width="125px">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:RadioButtonList AutoPostBack="true" ID="RadioButtonList1" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
<asp:ListItem Text="广州市"></asp:ListItem>
<asp:ListItem Text="佛山市"></asp:ListItem>
<asp:ListItem Text="深圳市"></asp:ListItem>
<asp:ListItem Text="东莞市"></asp:ListItem>
</asp:RadioButtonList>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
准备好所有代码之后我们还需要建立一个CSS样式，否则不能控制Popup载体的显示和消失了，样式文件如下：
.popupbox
{
visibility:hidden;
border-color:#000;
background:#ff9900;
font-size:12px;
}
注意：一定要加visibility:hidden，否则Popup就不能隐藏了，这也是CSS样式的关键作用。
第二步：配置PopupControlExtender
由于PopupControlExtender需要配置的属性太多，我们切换到源代码窗口进行设置，如下所示：
<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" TargetControlID="TextBox1" PopupControlID="Panel1" CommitScript="e.value;" Position="Bottom" CommitProperty="value" runat="server">
</ajaxToolkit:PopupControlExtender>
TargetControlID是指PopupControlExtender的目标控件ID，即获取返回值的控件ID，这里应该是TextBox1，因为我们从RadioButtonList选择好的项需要在TextBox1中显示。PopupControlID是指Popup载体控件的ID，关于Popup载体的解析在文章的开始部分已有说明，这里应该是Panel1。CommitScript是指选择完成后调用的Js脚本，这里写e.value意思是返回选择项的value值。大家可以适当扩充一下，例如"'你已选择了' + e.value; "，注意：这里的语法一定要严格遵守Js的书写格式，别忘了最后要写分号。Position指Popup载体出现在目标控件的位置，大家根据喜好选择。CommitProperty是指Popup载体中控件的返回值属性，这里就是指RadioButtonList的值的属性名称，大家可以改成Text试试。
第三步：编写常规代码
到了这一步就离完成不远了，我们只需要在cs文件中指定一下RadioButtonList的返回值。双击RadioButtonList1切换到CS代码窗口，编写代码，如下所示：
protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
if(RadioButtonList1.SelectedValue != null)
{
PopupControlExtender.GetProxyForCurrentPopup(this.Page).Commit(RadioButtonList1.SelectedValue);
}
RadioButtonList1.ClearSelection();
}
代码很简单，这里就不作解析了。注意：写这段代码之前一定要先using AjaxControlToolkit
OK！运行，效果如下所示：
结束：
本章主要介绍了PopupControlExtender的使用方法。从这个例子可以看出PopupControlExtender还有很多使用方法，而Popup载体也是多样的，大家可以根据这个例子的思路发散出去，发掘出PopupControlExtender更多的用法。
例子2(日历)
<div style="text-align: center">
日历：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
<asp:Panel ID="Panel1" runat="server" Height="184px" Width="171px">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#999999"
CellPadding="4" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="
ForeColor="Black" Height="180px" OnSelectionChanged="Calendar1_SelectionChanged"
Width="200px">
<SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
<TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
<SelectorStyle BackColor="#CCCCCC" />
<WeekendDayStyle BackColor="#FFFFCC" />
<OtherMonthDayStyle ForeColor="#808080" />
<NextPrevStyle VerticalAlign="Bottom" />
<DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="
<TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
</asp:Calendar>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<br />
<cc1:PopupControlExtender ID="PopupControlExtender1" runat="server" PopupControlID="Panel1"
Position="Bottom" TargetControlID="TextBox1">
</cc1:PopupControlExtender> </div>
11. PasswordStrength的用法:密码强度显示
PasswordStrength控件是用来提示用户输入密码的情况,用户在密码框中输入密码时,在文本框的后面会有一个提示,显示密码的强度,这种提示有两种方式:文本和进度条,提示信息的位置也可以由我们来自己设置,样式可以写CSS来定义。当密码框失去焦点时提示信息会自动消失。此控件还有 preFixTexts属性（用来显示提示信息的前缀）和TextStrengthDescriptions（密码强度的提示信息的内容，如弱，强）属性，但是这两个控件的设置只有在StrengthIndicatorType属性设置成Text时才有效，设置成进度条样式时看不见前缀和强度提示消息
重要属性
TargetControlID:密码框的ID
DisplayPosition:提示信息显示的位置，一共有6个值分别是：RightSide AboveRight AboveLeft LeftSide BelowRight BelowLeft
StrengthIndicatorType:设置显示的方式,文本或是进度条
Text:文本方式显示
BarIndicator:以进度条方式显示
PreferredPasswordLength:最合适的密码长度
TextCssClass:提示信息的样式
MinimumNumericCharacters:密码中至少要包含的数字的个数
MinimumSymbolCharacters:密码中至少要包含特殊字符的个数
BarBorderCssClass:提示进度条的边框样式
BarIndicatorCssClass:提示进度条的样式
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
<cc1:PasswordStrength ID="PasswordStrength1" runat="server" HelpStatusLabelID="Label1"
PreferredPasswordLength="12" PrefixText="密码强度：" TargetControlID="TextBox1" TextCssClass="StyleTextBox1"
TextStrengthDescriptions="弱;一般;中;强">
</cc1:PasswordStrength>
</div>
12. FilterTextBoxExtender控件
FilterTextBoxExtender控件是用来对文本框进行过滤的，让文本框只能对设定的值进行输入。输入类型有Numbers，LowerCaseLetters，UpperCaseLetters和Customer。
13. PagingBulletedListExtender控件
用于对BulletedList服务端控件进行扩展，使其具有排序的功能。
--------------------------------------------------------------------------------------
BehaviorID：该控件在客户端的标识号。
TargetControlID：该控件要关联的BulletedList控件。
ClientSort：该控件是否允许BulletedList在客户端进行排序。
IndexSize：在BulletedList中索引项的字符个数。
MaxItemPerPage：BulletedList中显示的每页的最大项数。
<div>
<div style="width: 288px; height: 150px; border-right: #99ff99 thin solid; border-top: #99ff99 thin solid; border-left: #99ff99 thin solid; border-bottom: #99ff99 thin solid;">
<asp:BulletedList ID="BulletedList1" runat="server">
<asp:ListItem>阿杜</asp:ListItem>
<asp:ListItem>安七炫</asp:ListItem>
<asp:ListItem>安在旭</asp:ListItem>
<asp:ListItem>刘德华</asp:ListItem>
<asp:ListItem>刘嘉玲</asp:ListItem>
<asp:ListItem>罗嘉良</asp:ListItem>
<asp:ListItem>罗大佑</asp:ListItem>
<asp:ListItem>林忆莲</asp:ListItem>
<asp:ListItem>林志颖</asp:ListItem>
</asp:BulletedList>
<br />
<cc1:PagingBulletedListExtender ID="PagingBulletedListExtender1" runat="server" TargetControlID="BulletedList1">
</cc1:PagingBulletedListExtender>
</div>
</div>
