ASPNET程序设计教程第6章--ASPNET-AJAX课件

1、第6章 使用ASP.NET AJAX本章讲述的主要内容6.1 Ajax和ASP.NET AJAX概述6.2 ASP.NET AJAX基本控件6.3 ASP.NET AJAX控件工具包6.4 实训 设计一个限时在线考试系统6.1 Ajax和ASP.NET AJAX概述6.1.1 Ajax的概念Ajax主要包括以下一些内容：1) 使用HTML+CSS来表示信息。2) 使用JavaScript操作（文档对象模型）。3) 使用XML和XSLT（EXtensible Stylesheet Language Transformations，扩展样式表转换）进行数据交换及操作。4) 使用XmlHttpReq

2、uest对象与Web服务器进行异步数据交换。5) 使用JavaScript将各部分内容绑定在一起。6.1 Ajax和ASP.NET AJAX概述6.1.1 Ajax的概念 Ajax的实现基本原理是，当用户与浏览器中的页面进行交互时，将触发页面元素对象的相应事件，客户端捕获这些事件后，如果需要将交互动作引起的逻辑实现提交给服务器进行处理，则将要处理的数据（包括状态描述）转换为XML格式的字符串，并使用异步传输方式提交给服务器。服务器处理结束后，同样使用XML格式和异步传输方式将处理结果送回。客户端从返回结果中提取需要的部分，交由JavaScript对网页进行“局部更新”，而不是刷新整个页面。6.

3、1 Ajax和ASP.NET AJAX概述6.1.2 ASP.NET AJAX 2007年微软公司真正推出了具有Ajax风格的，方便的异步编程模型，这就是ASP.NET AJAX。 注意，为了与其他Ajax技术区分，微软将其全部使用大写，并在前面加上了“ASP.NET”。ASP.NET AJAX的正式命名为“ASP.NET AJAX Extensions”和“Microsoft AJAX Library”。 ASP.NET AJAX Extensions提供了与ASP.NET高度集成的服务器端功能，包括客户端数据绑定、DHTML动画和行为等，同时使用ScriptManager控件和Update

4、Panel控件实现客户端脚本管理和对客户端回传（post）的拦截，这样一来开发人员就可以在现有ASP.NET应用程序中方便的使用ASP.NET AJAX了。6.2 ASP.NET AJAX控件6.2.1 ScriptManager和ScriptManagerProxy控件 1. ScriptManager的常用属性和方法 ScriptManager控件常用属性见下表。 6.2 ASP.NET AJAX控件6.2.1 ScriptManager和ScriptManagerProxy控件 1. ScriptManager的常用属性和方法 ScriptManager控件常用方法见下表。 6.2 AS

5、P.NET AJAX控件6.2.1 ScriptManager和ScriptManagerProxy控件 2. 使用ScriptManager控件注册客户端脚本 (1) 使用RegisterClientScriptBlock方法 RegisterClientScriptBlock方法是一个静态方法，用于动态地向网页中添加客户端脚本块。该方法的重载形式有以下两种：6.2 常用ASP.NET AJAX控件6.2.1 ScriptManager和ScriptManagerProxy控件 2. 使用ScriptManager控件注册客户端脚本 (2) 使用RegisterStartupScript方法

6、 RegisterStartupScript()方法用于在UpdatePanel控件中注册启动时立即执行的JavaScript脚本块，是一种AutoRun类型的自启动脚本。类似于常用的中的f()函数。6.2 ASP.NET AJAX控件6.2.2 UpdatePanel控件 1. UpdatePanel控件的常用属性 (1) Triggers属性：表示可以导致UpdatePanel控件更新的触发器集合。 (2) ChildrenAsTrigger属性：该属性为一个bool值，用来说明UpdatePanel控件的子控件引起的回发是否能导致Update-Panel控件的更新。 (3) Update

7、Mode属性：UpdateMode属性表示UpdatPanel控件的更新模式。 (4) ContentTemplate属性：ContentTemplate属性用来定义UpdatePanel包含的内容。6.2 ASP.NET AJAX控件6.2.2 UpdatePanel控件 2. 页面的局部更新和条件更新 ScriptManager控件与UpdatePanel控件配合，可以在不必编写任何JavaScript代码的情况下实现页面的局部更新和条件更新。 参阅源代码：ex6-16.2 ASP.NET AJAX控件6.2.3 UpdateProgress控件 UpdateProgress控件可以与Up

8、datePanel控件配合使用，在UpdatePanel页面内容进行更新时通过该控件显示一些提示信息，这些信息可以是一段文字、传统的进度条或一段动画等。当更新结束后，提示信息自动消失。UpdateProgress控件主要用于更新数据量较大的场合，显示提示信息以避免用户执行了操作后页面较长时间无反应的尴尬。UpdateProgress控件的常用属性有： AssociatedUpdatePanel DisplayAfter DynamicLayout ProgressTemplate6.2 ASP.NET AJAX控件6.2.4 Timer控件1. Timer控件的常用属性和事件(1) Inter

9、val属性Interval属性用于设置页面向服务器发送回传的，以毫秒为单位的时间间隔，默认值为60000毫秒。(2) Enable属性Enable属性与其他标准控件的Enable属性相同，用来决定Timer控件是否可用。(3) Tick事件Tick事件是Timer控件周期性触发的事件，写在该事件过程中的代码能被应用程序周期性的自动执行。2. 使用Timer控件 参阅源代码：ex6-26.3 ASP.NET AJAX控件工具包6.3.1 安装ASP.NET AJAX 控件工具包 ASP.NET AJAX Control Toolkit并没有包含在Visual Studio 2015中，使用前需要

10、从Internet中下载并安装整合到Visual Studio中。 需要说明的是，控件工具包的更新频率非常快，不断有新的控件或功能被添加进来，而且工具包官方下载地址也有可能变化。目前ASP.NET AJAX Control Toolkit安装包的官方下载地址为： /releases 退出Visual Studio，运行下载的安装包程序，安装进程结束后再次启动Visual Studio可以看到工具箱中多出了一个名为“AJAX Control Toolkit v15.1”的选项卡，其中包含有51个ASP.NET AJAX扩展控件。6.3 ASP.NET AJAX控件工具包6.3.2 使用Confi

11、rmButtonExtender控件弹出确认对话框1. ConfirmButtonExtender控件的常用属性(1) ConfirmText属性该属性用于设置弹出确认对话框时，对话框中显示的确认信息文本。(2) OnClientCancel属性 该属性用于设置当用户单击对话框中“取消”按钮时执行的代码。默认值为空，表示不执行任何操作。(3) TargetControlID 该属性用于指定ConfirmButtonExtender控件为哪个标准控件提供弹出确认对话框的扩展功能。2. ConfirmButtonExtender控件使用示例 参阅源代码：ex6-36.3 ASP.NET AJAX控

12、件工具包6.3.3 使用FilteredTextExtender和TextBoxWatermarkExtender1. FilteredTextExtender扩展控件的常用属性的常用属性6.3 ASP.NET AJAX控件工具包6.3.3 使用FilteredTextExtender和TextBoxWatermarkExtender2. TextBoxWatermarkExtender的常用属性 TextBoxWatermarkExtender扩展控件的常用属性有WatermarkText和WatermarkCssClass。 WatermarkText属性用于设置文本框内容为空时，文本框内

13、显示的文本内容。通常用于显示输入指导。 WatermarkCssClass属性用于指定文本框内容为空时的外观样式类，如文字的样色、文本框的边框颜色和样式、背景色等。3. FilteredTextExtender和TextBoxWatermarkExtender使用示例参阅源代码：ex6-46.3 ASP.NET AJAX控件工具包6.3.4 使用AsyncFileUpload实现文件上传1. AsyncFileUpload控件的常用属性、事件和方法6.3 ASP.NET AJAX控件工具包6.3.4 使用AsyncFileUpload实现文件上传1. AsyncFileUpload控件的常用属

14、性、事件和方法6.3 ASP.NET AJAX控件工具包6.3.4 使用AsyncFileUpload实现文件上传2. AsyncFileUpload控件使用示例 参阅源代码：ex6-56.3.5 使用CalendarExtender和AutoCompleteExtender扩展控件1. 使用CalendarExtender扩展控件6.3 ASP.NET AJAX控件工具包1. 使用CalendarExtender控件 使用CalendarExtender控件可以实现通过鼠标向文本框中录入日期的功能，大大地减少了用户录入的工作量和出错的可能性。 CalendarExtender控件一般需要附加

15、在TextBox控件上使用，其最常用的属性为Format属性，该属性用于设置日期的输入格式。 需要注意的是，默认情况下CalendarExtender控件中的日期是用英文显示的，若希望使用中文，则需要在属性窗口或源视图中设置ScriptManager控件的EnableScriptGlobalization属性为true。6.3 ASP.NET AJAX控件工具包2. 使用AutoCompleteExtender扩展控件 AutoCompleteExtender扩展控件需要Web服务（WCF或Web Service）的支持才能实现。Web服务在程序运行过程中为AutoCompleteExtend

16、er提供所需数据集和匹配筛选，数据集的来源可以是数据库、数据文件或数组对象等。6.3 ASP.NET AJAX控件工具包2. 使用AutoCompleteExtender扩展控件 AutoCompleteExtender扩展控件需要Web服务（WCF或Web Service）的支持才能实现。Web服务在程序运行过程中为AutoCompleteExtender提供所需数据集和匹配筛选，数据集的来源可以是数据库、数据文件或数组对象等。参阅源代码：ex6-66.4 实训6.4.1 实训目的6.4.2 实训要求设计一个能限制时间的在线考试系统，该系统具有如下功能： 系统支持最多100道的单选题（4选1）。 考试题目存储在单独的文本文