第17章 ASPNET AJAX程序设计-2012050719493788

1、第17章 ASP.NET AJAX程序设计第17章 ASP.NET AJAX程序设计 本章主要内容包括：17.1 认识ASP.NET AJAX控件17.2 ScriptManager和UpdatePanel17.3 定时控件Timer17.4 页面进程控件UpdateProgress17.5 ASP.NET AJAX控件工具集17.1 认识ASP.NET AJAX控件AJAX技术是利用JavaScript，直接在浏览器里对Web服务器发出异步（Asynchronous）调用，服务器上的程序可响应JavaScript的请求，将所需的数据传回。 工具箱中的AJAX Extensions有:Scri

2、ptManager脚本管理员、UpdatePanel更新面板、Timer计时器、UpdateProgress页面进程控件。除了这些控件，也可以使用ASP.NET AJAX 控件工具集中的控件。17.2 ScriptManager和UpdatePanelScriptManager控件又称为脚本管理控件，它和局部更新控件UpdatePanel能够共同实现无刷新的Web环境。每个ASP.NET AJAX网页都必须使用ScriptManager控件，必须出现在所有AJAX控件之前。ScriptManager控件有以下几个重要属性： EnablePartialRendering：这个网页是否允许部分网页

3、更新的功能。AsyncPostBackTimeout：对Web服务器进行异步调用时，服务器多久没有响应将视为过期。AsyncPostBackErrorMessage：对Web服务器进行异步调用失败时传回的报错信息。UpdatePanel控件是一个面板，充当一个容器。可以把要更新的内容放置在UpdatePanel控件中，从而实现不需要更新整个Web窗体页就能够更新其部分或局部的内容。示例:该控件能够指定一个时间间隔和Tick事件，在每次时间间隔到达之后，将触发其Tick事件。该控件能够定时执行事先指定的一些操作。 Timer控件的Interval属性，它决定Timer定时器多久发出一个Tick事

4、件，单位为ms。示例:17.3 定时控件Timer17.4 页面进程控件UpdateProgress页面和服务器交互操作需要较长的时间时，为了让用户知道目前正在交互，可通过UpdateProgress控件显示该交互操作的过程。实现步骤 ：1创建AjaxProgress.aspx页面，页面代码如下： 正在提交到服务器，请等待. 2设计AjaxProgress.aspx页面事件双击AjaxProgress.aspx页面中的“提交”按钮，会在AjaxProgress.aspx.cs文件中加入Click事件，程序代码如下：protected void btnCommit_Click(object se

5、nder, EventArgs e) System.Threading.Thread.Sleep(5000); lbOK.Text = 提交成功！; System.Threading.Thread.Sleep(5000)，让线程延时5s，模拟服务器操作所需的时间。 17.5 ASP.NET AJAX控件工具集它建立在ASP.NET AJAX扩展之上，具有很多可用于Web客户端的组件。 17.5.1 下载和安装/Release/ProjectReleases.aspx?ReleaseId=16488 下载AjaxControlToolkit-Framework3.5- SP1.zip，解压，运行

6、AjaxControlExtender文件夹下的AjaxControlExtender.vsi文件 17.5.2 弹出式日历选择控件CalendarExtender当用户需要在文本框等控件中输入时间时，在日历控件中单击日历，可以保证用户输入日历格式的有效性。 可以在ScriptManager控件的属性窗口中设置EnableScriptGlobalization=“true” ，使日历控件显示中文；CalendarExtender控件时间的格式设置：Format=yyyy-MM-dd。 17.5.3 密码强度智能提示控件PasswordStrength告诉用户自己所输入密码的安全性的强弱，在用户

7、注册时，提醒用户密码的安全级别。设置PasswordStrength控件的TextStrengthDescriptions属性为“很差;差;一般;好;很好”，PrefixText属性为“强度:”。代码：TextStrengthDescriptions=很差;差;一般;好;很好 PrefixText=强度： 17.5.4 文本框水印控件TextBoxWatermarkExtender为TextBox控件加上提示信息，以水印的效果显示 。设置控件的WatermarkText属性值为“请输入用户名称” 17.5.5 突出显示验证控件ValidatorCalloutExtender控件能够通过一个突出

8、的层，以非常友好的方式显示验证的提示信息。 代码： 17.5.6 确认提示按钮控件ConfirmButtonExtender用于：用户单击删除数据按钮，会跳出一个对话框提醒用户是否真的要执行该操作，如果单击“是”按钮，就执行该按钮的事件处理函数；如果单击“否”按钮，就取消该操作。设定控件ConfirmText属性为：“你真的要执行该操作吗？” 在按钮上创建的Click事件 ：17.5.7 弹出控件PopupControlExtender可以为页面上的任意控件创建弹出窗口。例如，创建一个弹出窗口，在该弹出窗口中包含一组单选按钮，给文本框提供数据。作用：是控制弹出窗口控件（panel、div）的显

9、示、消失并获得弹出窗口中控件的返回值，返回到目标控件中去。 在页面上拖放一个ScriptManager控件、一个UpdatePanel控件、一个Panel控件、一个TextBox控件、一个RadioButtonList控件和一个PopupControlExtender控件，代码如下所示： UpdatePanel一定要放在Panel里面，一定要将RadioButtonList的AutoPostBack属性设为True。还需要在标记中建立一个CSS样式，控制弹出窗口的显示和消失，样式文件如下： .popupbox visibility: hidden; border-color: #000000;

10、 background: #ff9900; font-size: 12px; height:100px; width:100px; visibility:hidden，弹出的窗口隐藏。PopupControlExtender的属性配置如下所示：TargetControlID是指PopupControlExtender的目标控件ID，这里是文本框，把RadioButtonList中被选择项的值显示在文本框中。PopupControlID指弹出控件的ID，这里是Panel1。CommitScript指选择完成后调用的JS脚本，这里用e.value，是返回选择项的value值。Position指弹出

11、控件出现在目标控件的哪个位置。CommitProperty指弹出窗口中控件的返回值属性，这里指RadioButtonList的值的属性名称，可以改成Text。在页面上双击RadioButtonList1控件切换到CS代码窗口，编写代码，如下所示： protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e) if (RadioButtonList1.SelectedValue != null) TextBox1_PopupControlExtender.Commit(RadioButtonLis

12、t1.SelectedValue); RadioButtonList1.ClearSelection();/将所有选项Selected属性设置为false 在CS文件中指定RadioButtonList控件的返回值。 17.5.8 自动完成控件AutoCompleteExtender根据用户输入的部分或全部关键字显示一个在线提示列表。以在文本框中查找新闻标题为例:该功能使用AjaxService Web服务的GetCompleteTextList(string prefixText,int count)方法在后台绑定数据库中相应新闻标题的数据，输入拼音或输入简称后即可自动查找全称，鼠标单击实现快速录入。 设计步骤如下：（1）在Web窗体中添加一个TextBox控件，在文本框的“添加扩展程序”中选取AutoCompleteExtender控件，代码如下所示： （2）建立Web服务（WebService）在“解决方案资源管理器”的项目名称上右击，在弹出的快捷菜单上选择“添加