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
TargetControlID :该扩展器目标 TextBox 控件的 ID ,即将要被 “ 升级 ” 模拟为 NumericUpDown 的 TextBox 的 ID 爱好者博墅 &pu
n)SyK5UB
Width :扩展后的目标 TextBox 控件加上默认的上下箭头的总宽度。即模拟出的 NumericUpDown 控件的宽度,单位为像素 (px)
[1]jO&`YX'B0 RefValues :由分号 (;) 作为分隔符的一个列表,将被 NumericUpDown 控件枚举并依次显示到其中爱好者博墅 z-u3KBjx|^
TargetButtonDownID :自定义的向上 ( 即增加 ) 按钮的 ID
Gl[1]f8K-s#?6M%b0 TargetButtonUpID :自定义的向下 ( 即减少 ) 按钮的 ID
M{2U'}K
zz Y0 ServiceDownPath :用来取得该 NumericUpDown 的下一个值的 Web Service 的 URL
Xy‑`9zEc s0 ServiceDownMethod : ServiceDownPath 所指定的 Web Service 中某个 Web Method 名称,或页面中某个 Page Method 的名称,
:l v@7z6s lX_
m0 用来取得 NumericUpDown 的下一个值爱好者博墅 4R'KmW%Nf
R9a
ServiceUpPath :用来取得该 NumericUpDown 的上一个值的 Web Service 的 URL 爱好者博墅 @ fZHA
\8l0ND:K8a
ServiceUpMethod : ServiceUpPath 所指定的 Web Service 中某个 Web Method 名称,或页面中某个 Page Method 的名称,
} xy#K-P"d0 用来取得 NumericUpDown 的上一个值
Z[1]M:yA$W+NC"vz0 Tag :传递给 ServiceDownMethod 或 ServiceUpMethod 所指定的 Web Method 的参数,可用于传递给服务器当前的上下文信息
v(hw\
BMxh0 -->
NumericUpDownExtender以及相关的textbox和其它控件都放在UpdatePanel控件的ContentTemplate模板里,否则得到的总是textbox的初始值。
)L;[9k VX04使用AutoCompleteExtender自动扩展
本章介绍AutoCompleteExtender的使用方法。用过Google的朋友都会发现,当我们在搜索框输入关键字的时候,Google会自动列出相关关键字提示。那么用Ajax.net也能做到么?答案是:Of course!
第一步:建立AJAX Control Toolkit Website
本例子只需要一个TextBox控件和一个AutoCompleteExtender组件。拖进设计界面后代码如下所示:
<asp:TextBoxID="TextBox1"runat="server"></asp:TextBox>
<ajaxToolkit:AutoCompleteExtenderID="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]
publicclassWebService : System.Web.Services.WebService {
public WebService () {
//如果使用设计的组件,请取消注释以下行
//InitializeComponent();
}
[WebMethod]
publicstring[] GetCompleteList(string prefixText, int count) {
char c1, c2, c3;
if (count == 0)
count = 10;
List<String> list = newList<string>(count);
Random rnd = newRandom();
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:AutoCompleteExtenderID="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:PanelID="Panel1"CssClass="popupbox"runat="server"Height="50px"Width="125px">
<asp:UpdatePanelID="UpdatePanel1"runat="server">
<ContentTemplate>
<asp:RadioButtonListAutoPostBack="true"ID="RadioButtonList1"runat="server"OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
<asp:ListItemText="广州市"></asp:ListItem>
<asp:ListItemText="佛山市"></asp:ListItem>
<asp:ListItemText="深圳市"></asp:ListItem>
<asp:ListItemText="东莞市"></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:PopupControlExtenderID="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代码窗口,编写代码,如下所示:
protectedvoid 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="8pt"
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="7pt" />
<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>