Ajax(asp.net)技术实现异步刷新和控件功能示例流程

Ajax(asp.net)技术实现异步刷新和控件功能示例流程
实验环境工具:VS2008, AjaxControlToolkit.dll3.5,sql2005等
一， 在项目中添加新项新建一个AJAX Web窗体，命名Default.aspx



二， 从工具箱中AJAX Extensions中拖选一个UpdatePanel做局部刷新容器（如图）

下面所有的源视图代码都在<asp:UpdatePanelID="UpdatePanel1" runat="server">
<ContentTemplate> <ContentTemplate/>中写



三， 在当前页面插入一个表格，8行3列，仿一个注册页面（如图）



四， 这里我们定义一些css(样式表)以及加一些图片，外部链接式代码如下:
body {
}
.Table
{
border-style:double;

color:Green;
font-size:large;
}
.Top
{
height: 48px;
background-image: url('image/Table_Top.jpg' );
}
.Bottom
{
background-image:url('image/Table_bottom.jpg');
background-repeat:repeat-x;
height:50px;
}
头部链接式：
<style type="text/css">
.style9
{
width: 134px;
}
.style10
{
width: 134px;
height: 17px;
}
.style12
{
width: 135px;
}
.style13
{
width: 135px;
height: 17px;
}
.style14
{
width: 169px;
}
.style15
{
width: 169px;
height: 17px;
}
</style>
五,通过引用这些样式和图片，效果如图



六， 在SQl SERVER下我们新建一张表如Custom表，表中有Cname,Cpassword,Cage,Csex,CphoneNmu,Cbirth
七， 当用户输入姓名后及时异步刷新，是否已被注册，首先我们要写一个对“姓名”文本框的textchanged事件去遍历数据库是否已有这条数据(如图)



Code:
try
{
SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["SeletctCourseConnectionString"].ConnectionString);
conn.Open();
string Sno = this.Sno_Txt.Text.ToString().Trim();
string sql = "select * from Student where S_No='" + Sno + "'";
SqlCommand comm = new SqlCommand(sql, conn);
SqlDataReader dr = comm.ExecuteReader();
if (dr.HasRows)
{
this.Label1.Visible = true;
this.Label1.Text = "该学号已存在";
this.Image1.Visible = false;
}
else
{
this.Image1.Visible = true;
this.Label1.Visible = false;
}
conn.Close();
}
catch (Exception ex)
{
Response.Write(ex.ToString());
}
八,因为我们所有的控件都在UpdatePanel中，所以要对它进行设置UpdateMode为Conditional,triggers





九，测试局部刷新(这时一个学生注册系统，方便大家看到效果)





十一，对密码文本框加以说明密码强度（控件功能性）
从工具箱中Ajax ToolKti中拖选PasswordStrenth控件到密码文本框上，这时可以看见密码文本框多了属性，如图





相关属性
StrengthIndicatorType 指示密码强度的方式：Text，BarIndicator（状态条）
DisplayPosition 显示位置
HelpStatusLabelID 提示信息Label控件的ID
TextStrengthDescription 用分号隔开的密码强度文本描述
PrefixText 强度级别的前缀
PreferredPasswordLength 强度级别达到最高需要的密码长度
MinimumNumericCharacters 强度级别达到最高需要的最少数字个数
MinimumSymbolCharacters 强度级别达到最高需要的最少特殊字符个数
CalculationWeightings 计算密码强度的权重：25；25；25；25/L；N；C；S
在这里我们分别设置Prefix:密码强度；
PreferredPasswordLength：12
TextStrengthDescription：不安全;弱; 中等;强
效果如下:

十二，其他相关客户端控件属性如下,这里不在一一阐述
Ajax各个控件常用属性：
1.AlwaysVisibleControlExtender（固定悬浮面板）
HorizontalOffset 水平偏移量（像素为单位）
HorizontalSide 水平对齐（Left,Center,Right）
VerticalOffset 垂直偏移量（像素为单位）
VerticalSide 垂直对齐（Top,Middle,Bottom）
ScrollEffectDuration 目标(Panel面板)响应时间

2.CollapsiblePanelExtender（可折叠面板）
CollapsedSize 折叠后的大小（像素为单位）
ExpandedSize 扩展后的大小
Collapsed 初始化状态是否折叠
AutoCollapse 是否自动折叠
AutoExpand 是否自动扩展
ExpandControlID 扩展控件
CollapseControlID 折叠控件
ExpandDirection 折叠方向（Virtical，Horizantal）

3.DropShadowExtender（面板投射阴影）
Opacity 不透明度
Width 阴影偏移量
Rounded 是否现实圆角
Radius 圆角的半径
TrackPosition 阴影跟随效果

4.HoverMenuExtender（实现附加信息的面板）
PopupControlID 弹出的面板ID
PopupPosition 弹出位置（Left,Right,Top,Bottom）
OffsetX 水平偏移量
OffsetY 垂直偏移量
PopDelay 弹出延时

5.ModalPopupExtender（模式对话框）
DropShadow 对话框现实阴影效果
OkControlID 面板确认按钮
CancelControlID 面板取消按钮

6.RoundedCornersExtender（面板的圆角效果）
Radius 圆角半径
Color 圆角颜色
Corners 指定面板的哪个角实现效果

7.TextBoxWatermark（带有水印效果的文本框）
WatermarkText 水印文字

8.ToggleButtonExtender（用图片代替CheckBox）
ImageWidth 用来替换CheckBox的图片宽度
ImageHeight 用来替换CheckBox的图片高度
UncheckedImageUrl 用来替换为选中状态的图片
CheckedImageUrl 用来替换选中状态的图片

9.SliderExtender（网页滑动条）
Minimun 滑动范围最小值
Maxmum 滑动范围最大值
Decimals 能够选择值得小数位数
Steps 滑动条最小增量
Length 滑动条长度
Orientation 滑动条方向
BoundControlID 显示滑动条值的控件

10.DropDownExtender（下拉菜单效果）
DropDownControlID 触发下拉菜单的控件

11.ValidatorCallouExtender（验证信息显示控件）
Width 弹出错误面板的宽度
WarningIconImageUrl 警告图标的Url
CloseImageUrl 关闭图标的Url

12. CascadingDropDownExtender（联动下拉框）
Category 目标DropDownList的逻辑分类，WebService的参数之一
PromptText 目标DropDownList的默认第一项文本
LoadingText 目标DropDownList加载时显示的文本
ServicePath 调用的WebService的Url
ServiceMethod 调用的WebService方法
ParentControlID 上一级DropDownLis控件ID
SelectedValue 目标DropDownList当前选中的条目值

13.ConfirmButtonExtender（带确认功能的按钮）
ConfirmText 弹出的确认对话框文本

14.DragPanelExtender（页面拖动面板）
DragHandleID 作为拖放区域的Panel面板ID
Location 目标Panel面板的位置

15.DynamicPopulateExtender（分布展开List项）
PopulateTriggerControlID 触发目标控件更新的控件ID
ServicePath 调用的WebService的Url
ServiceMethod 调用的WebService方法
ClearContentsDuringUpdate 是否在更新过程中清除目标控件原有内容
ContextKey 传递给WebService的上下文参数

16.FilterTextBoxExtender（用户输入限制的文本框）
FilterType 过滤类型：Numbers，LowercaseLetter，UppercaseLetter，Custom
ValidChars 附加的合法字符串

17.NumericUpDownExtender（上下箭头调整TextBox值）
Width 箭头宽度
RefValues 枚举引用
TargetButtonDownID 自定义向下按钮的ID
TargetButtonUpID 自定义向上按钮的ID
ServiceDownPath 调用WebService获取下一个值得Url
ServiceDownMethod 调用WebService获取下一个值得方法
ServiceUpPath 调用WebService获取上一个值得Url
ServiceUpMethod 调用WebService获取上一个值得方法
Tag 传递给WebService的参数

18.PagingBulletedListExtender（索引，分页，排序BulletedList）
ClientSort 是否自动排序
Height 控件加索引链接的总高度
IndexSize 索引的长度
MaxItemPerPage 每页最大条目数
Separator 索引中项目的分隔符

19.PasswordStrengt（密码强度检测）
StrengthIndicatorType 指示密码强度的方式：Text，BarIndicator（状态条）
DisplayPosition 显示位置
HelpStatusLabelID 提示信息Label控件的ID
TextStrengthDescription 用分号隔开的密码强度文本描述
PrefixText 强度级别的前缀
PreferredPasswordLength 强度级别达到最高需要的密码长度
MinimumNumericCharacters 强度级别达到最高需要的最少数字个数
MinimumSymbolCharacters 强度级别达到最高需要的最少特殊字符个数
CalculationWeightings 计算密码强度的权重：25；25；25；25/L；N；C；S

20.PopupControlExtender（帮助用户输入的弹出面板）
PopupControlID 弹出面板的ID
Position 弹出面板的位置
OffsetX 水平偏移量
OffsetY 垂直偏移量
CommitProperty 目标控件的HTML属性

21.ResizableControlExtender（拖放边框改变大小的面板）
HandleOffsetX 可拖放控件在水平方向上的偏移量
HandleOffsetY 可拖放控件在垂直方向上的偏移量
MinimumWidth 允许最小宽度
MinimumHeight 允许最小高度
MaximumWidth 允许最大宽度
MaximumHeight 允许最大高度

22.Accordion（可折叠导航面板容器控件）
SelectedIndex 初次展开时的索引
AutoSize 展开高度设置
FadeTransitions 淡入淡出效果
FramesPerSecond 展开速度
AccordionPane 容器子控件

23.Rating（评级控件）
CurrentRating 当前级别
MaxRating 最大级别
RatingAlign 星型图排列方向
RatingDirection 星型图起始方向
ReadOnly 是否只读
StarCssClass 星型图样式
WaitingStarCssClass 改变过程中星型图样式
FilledStarCssClass 选中状态星型图样式
EmptyStarCssClass 未选中状态星型图样式

24. CalendarExtender（日历控件）
PopupButtonID 弹出日历的按钮ID
Format 日期格式