UpdateMode
指明内容模板的更新模式:
Always每次Postback后更新,Conditon特定时更新
ChildrenAsTriggers
指明在UpdatePanel控件的子控件的回发中是否导致UpdatePanel控件的更新,默认值为true
EnableViewState
指明是否自动保存其往返过程
3.ContentTemplate标签
作用:
在异步页面回送过程中,将需要修改的控件包含在此标签中,就能够实现这些控件的页面无刷新的更新操作。
任务一计算机系统时间的更新
要求:
利用ScriptManager控件和ContentTemplate标签实现时间的更新;
步骤:
①新建网站
建一个ASP.NET空网站“UpdatePanel”,新建页面为default.aspx;
②添加控件
在页面中先添加一个Scriptmanager控件,再添加一个UpdatePanel控件,并在UpdatePanel中添加一个Label控件(lbTime)和一个Button控件(btTime)。
③后台代码
在按钮事件中添加代码:
this.lbTime.Text=DateTime.Now.ToString();
④测试:
按F5测试default.aspx,查看运行效果。
;
⑤控件移动
将Label控件(lbTime)和一个Button控件(btTime)剪切移动到UpdatePanel控件外进行测试;
⑥测试:
按F5测试default.aspx,查看运行效果。
4.Trigger标签
①作用
指定引发异步页面回送的各种触发器;
若按钮放在UpdatePanel控件的外,则必需使用标签;
②AsyncPostBackTrigger触发器控件
用来指定某个服务器控件,以及将其触发的服务器事件作为UpdatePanel异步更新的一种触发器;它包含ControlID和EventName两个属性,用于把按钮控件与触发器关联起来,进行异步回送。
ControlID属性:
用作异步页面回送的触发器的控件ID;
EventName属性:
是ControlID指定的控件的事件名,该事件要在客户端的异步请求中调用。
③PostBackTrigger触发器控件
用来指定在UpdatePanel中的某个控件,并指定其控件产生的事件将使用传统的回发方式进行回发。
当使用PostBackTrigger控件进行控件描述时,该控件产生了一个事件,此时页面并不会异步更新,只会使用传统的方法进行页面刷新
任务二 无刷新用户名验证
要求:
利用Ajax框架技术实现无刷新用户名验证;
步骤:
①网站的创建
建一个ASP.NET空网站“AjaxNoRefresh”,导入数据库文件AjaxDB.accdb,并新建页面UserCheck.aspx,进行页面布局,插入14行3列、宽420px的表格;
②添加控件及文字
在页面中添加相应的文字信息及控件,注意ID名称的调用;
在最后一行添加“错误信息显示控件”ValidationSummary,设置其属性ShowMessageBox为True,ShowSummary为False,显示的错误消息是由每个验证控件的ErrorMessage属性规定的。
③控件属性设置(第3列)
用户名、密码、确认密码设置验证必填控件RequireEieldValidator;
确认密码设置比较验证控件CompareValidator;
年龄文本框设置范围验证控件RangeValidator
手机号码设置手机的格式模式匹配RegularExpressionValidator,并设置ValidationExpression的正则表达式[1][3,5,8]\d{9}
Email设置符合格式的模式匹配控件RegularExpressionValidator,并设置ValidationExpression的正则表达式\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*";
④添加Ajax的控件
在“用户名”文本框控件右边添加ScriptManager控件和UpdatePanel控件,并在UpdatePanel的标签中添加Label控件,注意修改相应的ID及ControlID的值;
⑤检测用户是否在存CheckUName()
⑥添加TextChanged事件
添加用户名文本框的方法ontextchanged的事件名txtUName_TextChanged,其后台代码为:
⑦测试:
按F5测试default.aspx,查看运行效果。
(四)Timer控件
1.作用
可以使应用程序方便有效地对系统时间进行控制。
用于一定的时间间隔后触发某个事件,自动完成任务的一种特殊控件;
2.事件与属性
Tick事件:
当达到指定的时间间隔时被触发,用于设计要完成的任务;
Enabled:
是否启用了Tick事件引发;
Interval:
设置Tick事件之间的连续时间,单位为毫秒;
注:
要实现时钟的无刷新变化,还需要将该控件放置于有ScriptManage控件进行页面全局管理的页中,并使用UpdatePanel控件,实现时钟的局部更新。
任务三页面中时钟无刷新显示
要求:
利用Timer控件的属性和事件实现页面中时钟无刷新显示;
步骤:
①新建网站
建一个ASP.NET空网站“TimerDemo”,新建Web窗体,命名为default.aspx;
②添加控件
添加Ajax的管理控件ScriptManager及局部更新控件UpdatePanel,并在UpdatePanel中添加一个Label控件,以及Timer控件,设置其属性Interval为1000;
③后台时间更新代码
在Page_Load()事件中添加加载页面显示系统时间代码;
或者在Timer控件的ontick事件编写代码:
④测试:
按F5测试default.aspx,查看运行效果。
(五)脚本管理代理控件(ScriptManageProxy控件)
在Web应用的开发过程中,常常通过母版页来为应用程序中的页创建一致布局。
母版页与内容页一同组合成一个新页面呈现在客户端浏览器中。
若在母版页中使用了ScriptManager控件,而在内容页中再使用ScriptManager控件,整合在一起的页面就会出现异常。
任务四 在母版页和内容页中均无刷新地显示系统时钟
要求:
利用ScriptManageProxy控件在母版页和内容页中均无刷新页面的显示系统时钟;
步骤:
①新建网站
建一个ASP.NET空网站“ScriptManagerProxy”,新建母版页文件MasterPage.master;
②控件的添加与设置
在占位符ContentPlaceHolder上方添加Ajax的管理控件ScriptManager及局部更新控件UpdatePanel,并在UpdatePanel的标签中添加相关控件:
TextBox控件、Button控件、Label控件,以及Timer控件,即上图的上半部分;
Button1控件的属性Text设置为“母版页时间”,Timer1控件属性Interval设置为1000;
设置占位符编辑区域的
标签的格式,以对映射内容页的格式设置:
③母版页控件事件的设置
单击“Button1”按钮设置TextBox1控件中显示当前系统时间:
TextBox1.Text=DateTime.Now.ToString();
单击Timer1控件设置Label1控件中显示当前系统时间;
④内容页的设置
新建页面Default.aspx,并应用母版页,在占位符ContentPlaceHolder1中添加相关控件:
添加Ajax的脚本管理代理控件ScriptManagerProxy及局部更新控件UpdatePanel;
在UpdatePanel的标签中分别添加相关控件:
TextBox控件、Button控件、Label控件;
Button2控件的属性Text设置为“内容页时间”;
⑤内容页控件事件的设置
单击“Button2”按钮设置TextBox2控件中显示当前系统时间;
在Page_Load()事件中设置Label2控件中显示当前系统时间;
⑥测试:
按F5测试default.aspx,查看运行效果。
(六)Ajax扩展控件工具
1.Ajax扩展控件工具包的安装
添加扩展控件工具包AjaxControlToolkit.dll,若不出现相应工具,则设置:
在“解决方案资源管理器”中右击→属性页→生成→目标Framework→修改成.netFramework4.0
若工具箱中不在出现,则(按ctrl强制拖到工具箱中)在工具箱添加选项,选择相应的浏览dll文件,但在NET组件中取消选择,确定后,再次添加相应的dll文件;
2.密码强度提示控件(PasswordStrength控件)
(1)用途
动态的去检测密码的强度,并友好的提示
(2)属性
TargetControlID:
该扩展器目标TextBox控件的ID,即将要添加密码强度指示的TextBox的ID;
StrengthIndicatorType:
指示密码强度的方式,可选Text和Barindicator,代表文本方式和指示条方式;
DisplayPosition:
强度指示元素与目标TextBox之间的相对位置,AboveLeft(左上角)、AboveRight(右上角)、BelowLeft(左下角)、BelowRight(右下角)、LeftSide(左边)以及RightSide(右边)六种;
HelpStatusLabelID:
用来帮助用户填写合乎要求的密码而设置的Label的ID。
用户在输入密码时,该Label中的文字将不断更新,以提示用户还应该输入何种类型的字符;
TextStrengthDescriptions:
用分号(;)链接起来的用来描述不同强度级别的字符串,例如“很弱;弱;中等;强;极强”,必须满足从弱到强的顺序,且强度级别的数目要在2~10个之间;
PrefixText:
强度级别的前缀文字;
TextCssClass:
强度指示文本将应用的CSSClass;
BarBorderCssClass:
强度指示条的边框将应用的CSSClass;
BarIndicatorCssClass:
强度指示条将应用的CSSClass;
HelpHandlePosition:
帮助按钮与目标TextBox间的相对位置,AboveLeft(左上角)、AboveRight(右上角)、BelowLeft(左下角)、BelowRight(右下角)、LeftSide(左边)以及RightSide(右边)六种;
HelpHandleCssClass:
帮助按钮将应用的CSSClass;
PreferredPasswordLength:
强度级别要达到最高所需要的最少密码长度;
MinimumNumericCharacters:
强度级别要达到最高所需要的最少数字字符的个数;
MinimumSymbolCharacters:
强度级别要达到最高所需要的最少特殊字符(例如!
@#$%等)的个数;
RequiresUpperAndLowerCaseCharacters:
密码中是否需要混合出现大小写字母才能够使强度级别达到最高
CalculationWeightings:
用分号(;)连接起来的4个数值,用来设置计算密码强度时各种类型字符所占的权重,该属性的默认值为50;15;15;20。
由分号隔开的这4个数值的和必须为100,其格式为L;N;C;S:
L代表Length,即密码的长度在强度计算中的权重
N代表Number,即密码中数字的个数的强度计算中的权重
C代表Case,即密码中混杂的大小写字符的强度计算中的权重
S代表Symbol,即密码中的特殊字符(例如!
@#$%)在强度计算中的权重
任务五 密码强度的提示
要求:
利用Ajax扩展工具包实现密码强度的提示;
步骤:
(1)新建网站
建一个ASP.NET空网站“PasswordStrength”,新建页面文件default.aspx,插入宽460、5行2列的表格,并应用css09.css样式;
(2)添加控件及属性设置
①管理控件的添加
添加Ajax的管理控件ScriptManager,输入两行文字,两个TextBox控件,分别对两个TextBox控件添加扩展应用程序PasswordStrength控件;
②使用“文本”显示密码强度
设置TextBox1的密码强度属性:
MinimumNumericCharacters为"1",MinimumSymbolCharacters为"1";
PrefixText为"密码强度:
",TargetControlID为"TextBox1";
TextStrengthDescriptions为"很差;差;一般;好;很好"
StrengthStyles为"textIndicator_1;textIndicator_2;textIndicator_3;textIndicator_4;textIndicator_5";
③使用“进度条”显示强度
设置TextBox2的密码强度属性:
(4)测试:
按F5测试default.aspx,查看运行效果。
3.添加水印提示(TextBoxWatermark控件)
(1)功能
可以让TextBox控件初始化的时候拥有水印提示文字。
当单击水印文字时将立即消失,即空白文本框;
(2)属性
TargetControlID:
要使用具有水印效果的TextBox控件ID。
WatermarkCssClass:
指定水印文字的CSS样式表。
WatermarkText:
显示在TextBox控件的水印文字内容
二.学生课堂任务实践
任务六 文本框水印文字提示的设置
要求:
利用ScripManager控件及TextBoxWatermark控件实现文本框水印文字提示的设置;
步骤:
(1)新建网站
建一个ASP.NET空网站“TextBoxWatermark”,新建Web窗体,命名为default.aspx,定义CSS样式:
.txt
{
border-style:
solid;
border-color:
#666666;
border-width:
1px2px2px1px;
margin:
2px;
}
.watermark
{
color:
#666666;
}
(2)添加控件及属性设置
添加Ajax的管理控件ScriptManager,两行文字,两个TextBox控件、TextBox、TextBox2的CssClass属性均为txt,BackColor属性值为#daeeee,TextBox2的TextMode为MultiLine,设置4行,以及确定按钮;
分别对两个TextBox控件添加扩展应用程序TextBoxWatermark控件(TextBoxWatermarkExtender);
在源视图下,对两个WatermarkText分别设置“请输入标题”和“请输入备注”,并设置WatermarkCssClass为watermark;
(3)测试:
按F5测试default.aspx,查看运行效果。
三.课堂小结
1.本课的纪律评价。
2.典型学生习作点评。
3.提出要求:
课后积极参与完善相关代码功能,增加主动性,才能有所收获。
四.作业
要求:
课程完成教材中所涉及的示例?
展开阅读全文