ASP.NET程序设计教程（C#版）第4版 课件 第6、7章 ASP.NET AJAX、JavaScript

第6章使用ASP.NETAJAX本章讲述的主要内容6.1Ajax和ASP.NETAJAX概述6.2ASP.NETAJAX基本控件6.3ASP.NETAJAX控件工具包6.4实训设计一个限时在线考试系统

6.1Ajax和ASP.NETAJAX概述6.1.1Ajax的概念Ajax主要包括以下一些内容：1)使用HTML+CSS来表示信息。2)使用JavaScript操作（文档对象模型）。3)使用XML和XSLT（EXtensibleStylesheetLanguageTransformations，扩展样式表转换）进行数据交换及操作。4)使用XmlHttpRequest对象与Web服务器进行异步数据交换。5)使用JavaScript将各部分内容绑定在一起。6.1Ajax和ASP.NETAJAX概述6.1.1Ajax的概念

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

2007年微软公司真正推出了具有Ajax风格的，方便的异步编程模型，这就是ASP.NETAJAX。

注意，为了与其他Ajax技术区分，微软将其全部使用大写，并在前面加上了“ASP.NET”。ASP.NETAJAX的正式命名为“ASP.NETAJAXExtensions”和“MicrosoftAJAXLibrary”。

ASP.NETAJAXExtensions提供了与ASP.NET高度集成的服务器端功能，包括客户端数据绑定、DHTML动画和行为等，同时使用ScriptManager控件和UpdatePanel控件实现客户端脚本管理和对客户端回传（post）的拦截，这样一来开发人员就可以在现有ASP.NET应用程序中方便的使用ASP.NETAJAX了。6.2ASP.NETAJAX控件6.2.1ScriptManager和ScriptManagerProxy控件

1.ScriptManager的常用属性和方法

ScriptManager控件常用属性见下表。

6.2ASP.NETAJAX控件6.2.1ScriptManager和ScriptManagerProxy控件

1.ScriptManager的常用属性和方法

ScriptManager控件常用方法见下表。

6.2ASP.NETAJAX控件6.2.1ScriptManager和ScriptManagerProxy控件

2.使用ScriptManager控件注册客户端脚本

(1)使用RegisterClientScriptBlock方法

RegisterClientScriptBlock方法是一个静态方法，用于动态地向网页中添加客户端脚本块。该方法的重载形式有以下两种：6.2常用ASP.NETAJAX控件6.2.1ScriptManager和ScriptManagerProxy控件

2.使用ScriptManager控件注册客户端脚本

(2)使用RegisterStartupScript方法

RegisterStartupScript()方法用于在UpdatePanel控件中注册启动时立即执行的JavaScript脚本块，是一种AutoRun类型的自启动脚本。类似于常用的<bodyonload="f()">中的f()函数。6.2ASP.NETAJAX控件6.2.2UpdatePanel控件

1.UpdatePanel控件的常用属性

(1)Triggers属性：表示可以导致UpdatePanel控件更新的触发器集合。

(2)ChildrenAsTrigger属性：该属性为一个bool值，用来说明UpdatePanel控件的子控件引起的回发是否能导致Update-Panel控件的更新。

(3)UpdateMode属性：UpdateMode属性表示UpdatPanel控件的更新模式。

(4)ContentTemplate属性：ContentTemplate属性用来定义UpdatePanel包含的内容。6.2ASP.NETAJAX控件6.2.2UpdatePanel控件

2.页面的局部更新和条件更新

ScriptManager控件与UpdatePanel控件配合，可以在不必编写任何JavaScript代码的情况下实现页面的局部更新和条件更新。

参阅源代码：ex6-16.2ASP.NETAJAX控件6.2.3UpdateProgress控件

UpdateProgress控件可以与UpdatePanel控件配合使用，在UpdatePanel页面内容进行更新时通过该控件显示一些提示信息，这些信息可以是一段文字、传统的进度条或一段动画等。当更新结束后，提示信息自动消失。UpdateProgress控件主要用于更新数据量较大的场合，显示提示信息以避免用户执行了操作后页面较长时间无反应的尴尬。UpdateProgress控件的常用属性有：①AssociatedUpdatePanel②DisplayAfter③DynamicLayout④ProgressTemplate6.2ASP.NETAJAX控件6.2.4Timer控件1.Timer控件的常用属性和事件(1)Interval属性Interval属性用于设置页面向服务器发送回传的，以毫秒为单位的时间间隔，默认值为60000毫秒。(2)Enable属性Enable属性与其他标准控件的Enable属性相同，用来决定Timer控件是否可用。(3)Tick事件Tick事件是Timer控件周期性触发的事件，写在该事件过程中的代码能被应用程序周期性的自动执行。2.使用Timer控件

参阅源代码：ex6-26.3ASP.NETAJAX控件工具包6.3.1安装ASP.NETAJAX控件工具包

ASP.NETAJAXControlToolkit并没有包含在VisualStudio2015中，使用前需要从Internet中下载并安装整合到VisualStudio中。

需要说明的是，控件工具包的更新频率非常快，不断有新的控件或功能被添加进来，而且工具包官方下载地址也有可能变化。目前ASP.NETAJAXControlToolkit安装包的官方下载地址为：

http:///releases

退出VisualStudio，运行下载的安装包程序，安装进程结束后再次启动VisualStudio可以看到工具箱中多出了一个名为“AJAXControlToolkitv15.1”的选项卡，其中包含有51个ASP.NETAJAX扩展控件。6.3ASP.NETAJAX控件工具包6.3.2使用ConfirmButtonExtender控件弹出确认对话框1.ConfirmButtonExtender控件的常用属性(1)ConfirmText属性该属性用于设置弹出确认对话框时，对话框中显示的确认信息文本。(2)OnClientCancel属性该属性用于设置当用户单击对话框中“取消”按钮时执行的代码。默认值为空，表示不执行任何操作。(3)TargetControlID该属性用于指定ConfirmButtonExtender控件为哪个标准控件提供弹出确认对话框的扩展功能。2.ConfirmButtonExtender控件使用示例

参阅源代码：ex6-36.3ASP.NETAJAX控件工具包6.3.3使用FilteredTextExtender和TextBoxWatermarkExtender1.FilteredTextExtender扩展控件的常用属性的常用属性6.3ASP.NETAJAX控件工具包6.3.3使用FilteredTextExtender和TextBoxWatermarkExtender2.TextBoxWatermarkExtender的常用属性

TextBoxWatermarkExtender扩展控件的常用属性有WatermarkText和WatermarkCssClass。

WatermarkText属性用于设置文本框内容为空时，文本框内显示的文本内容。通常用于显示输入指导。

WatermarkCssClass属性用于指定文本框内容为空时的外观样式类，如文字的样色、文本框的边框颜色和样式、背景色等。3.FilteredTextExtender和TextBoxWatermarkExtender使用示例

参阅源代码：ex6-46.3ASP.NETAJAX控件工具包6.3.4使用AsyncFileUpload实现文件上传1.AsyncFileUpload控件的常用属性、事件和方法6.3ASP.NETAJAX控件工具包6.3.4使用AsyncFileUpload实现文件上传1.AsyncFileUpload控件的常用属性、事件和方法6.3ASP.NETAJAX控件工具包6.3.4使用AsyncFileUpload实现文件上传2.AsyncFileUpload控件使用示例

参阅源代码：ex6-56.3.5使用CalendarExtender和AutoCompleteExtender扩展控件1.使用CalendarExtender扩展控件6.3ASP.NETAJAX控件工具包1.使用CalendarExtender控件使用CalendarExtender控件可以实现通过鼠标向文本框中录入日期的功能，大大地减少了用户录入的工作量和出错的可能性。

CalendarExtender控件一般需要附加在TextBox控件上使用，其最常用的属性为Format属性，该属性用于设置日期的输入格式。需要注意的是，默认情况下CalendarExtender控件中的日期是用英文显示的，若希望使用中文，则需要在属性窗口或源视图中设置ScriptManager控件的EnableScriptGlobalization属性为true。6.3ASP.NETAJAX控件工具包2.使用AutoCompleteExtender扩展控件

AutoCompleteExtender扩展控件需要Web服务（WCF或WebService）的支持才能实现。Web服务在程序运行过程中为AutoCompleteExtender提供所需数据集和匹配筛选，数据集的来源可以是数据库、数据文件或数组对象等。6.3ASP.NETAJAX控件工具包2.使用AutoCompleteExtender扩展控件

AutoCompleteExtender扩展控件需要Web服务（WCF或WebService）的支持才能实现。Web服务在程序运行过程中为AutoCompleteExtender提供所需数据集和匹配筛选，数据集的来源可以是数据库、数据文件或数组对象等。参阅源代码：ex6-66.4实训6.4.1实训目的6.4.2实训要求设计一个能限制时间的在线考试系统，该系统具有如下功能：①系统支持最多100道的单选题（4选1）。②考试题目存储在单独的文本文件内（App_Data/test.txt）。如图6-21所示，每题以题目内容、正确答案、4个选项为顺序逐行书写。③自动生成如图6-22所示的考试成绩表，存放在App_Data/result.txt文件中。④考生访问网站时首先看到的是图6-23所示的登录界面，在输入姓名、准考证号后单击“开始考试”按钮，系统首先对用户输入的姓名、准考证号的合法性进行检测，要求“姓名”、“准考证号”不得为空；准考证号必须由6位数字组成，且考生不是重复考试（成绩表中没有该准考证号的记录）。未通过检测将显示相应的出错提示信息。第7章JavaScript本章讲述的主要内容7.1JavaScript的基本概念7.2JavaScript程序设计基础7.3JavaScript对象7.4BOM和DOM对象7.5实训设计浮动图片效果

7.1JavaScript的基本概念7.1.1JavaScript概述JavaScript是一种通用的、跨平台的、基于对象和事件驱动的客户端脚本语言，其主要特点有以下几个方面。(1)弱数据类型(2)跨平台(3)基于对象Transformations，扩展样式表转换）进行数据交换及操作。(4)基于事件驱动7.1JavaScript的基本概念7.1.1JavaScript概述JavaScript代码格式不够严谨，使用比较灵活，但过于随意将会导致代码的可读性降低，不易于后期维护和升级。因此，在编写JavaScript程序时应遵守以下规范。①书写代码时应注意，浏览器解析JavaScript代码时会忽略标识符与运算符之间多余的空格。②书写代码时每条语句一般应独占一行，并以英文分号“;”为结束符。③代码要使用缩进格式编写，以增强其层次感和可读性。④代码中可以使用“//”表示单行注释，使用“/*……*/”表示多行注释。7.1JavaScript的基本概念7.1.2JavaScript的代码编写规范行内JavaScript语句

直接将JavaScript代码写在HTML元素的开始标记中。(2)嵌入式JavaScript语句块

将JavaScript代码写在<script>……</script>中。(3)使用独立的.js文件7.2JavaScript程序设计基础7.2.1数据类型和变量1.数据类型7.2JavaScript程序设计基础7.2.1数据类型和变量2.变量和运算符声明变量和为变量赋值(2)运算符JavaScript使用的运算符与C#语言的运算符大部分相同。如，算术运算符+、-、*、/；比较运算符<、>、==、>=、<=、!=；布尔运算符&&、||、！等。7.2JavaScript程序设计基础7.2.1数据类型和变量3.变量的作用域变量的作用范围是指可以访问该变量的代码区域。JavaScript中按变量的作用范围分为全局变量和局部变量。①全局变量：可以在整个HTML文档范围中使用的变量，这种变量通常都是在函数体外定义的变量。②局部变量：只能在局部范围内使用的变量，这种变量通常都是在函数体内定义的变量，所以只在函数体内部有效。省略关键字var声明的变量（未定义直接使用的变量），无论在函数体内部还是外部，都是全局变量。7.2JavaScript程序设计基础7.2.2流程控制语句1.分支结构

if…elseif…else、switch语句2.循环结构JavaScript的循环结构主要由for语句、while语句和forin语句构成。其中，for语句和while语句与C#中的语法格式及使用方法完全相同，这里不再赘述。C#中的foreach语句在JavaScript中稍有变化，其语法格式如下所示。7.2JavaScript程序设计基础7.2.3JavaScript函数JavaScript内置函数7.2JavaScript程序设计基础7.2.3JavaScript函数2.自定义函数JavaScript除了可以使用预定义函数外，还可以根据需要自定义用于实现特定功能的函数。由于JavaScript是弱类型脚本程序设计语言，故在定义函数时无需声明函数的参数类型和返回值类型。JavaScript的自定义函数分为命名函数、匿名函数、对象函数和自调用函数四种。自定义函数代码可以书写在<script></script>标记之间，也可以书写在.js文件中。在同一个<script></script>标记中，函数定义可以书写在调用语句之前或之后；但在不同的<script></script>标记中函数定义语句只能书写在调用语句之前。7.2JavaScript程序设计基础7.2.3JavaScript函数2.自定义函数(1)命名函数7.2JavaScript程序设计基础7.2.3JavaScript函数2.自定义函数

(2)匿名函数7.2JavaScript程序设计基础7.2.3JavaScript函数2.自定义函数

(3)自调用函数

JavaScript函数除了可以被其它语句或事件调用外，也允许将函数的定义与调用一并实现，这种函数称为“自调用函数”。7.3JavaScript对象7.3.1JavaScript内置对象

1.Array对象JavaScript的Array数组对象与C#不同的是它在声明时无需指定数据类型，而且可以将不同类型的数据存放到同一数组中。Array对象的常用属性是length，用于获取数组中元素的个数。

Array对象的常用方法有concat、join、push、slice、sort和reverse。7.3JavaScript对象7.3.1JavaScript内置对象

2.String对象可以使用以下2种方法创建String字符串对象。String对象的常用方法见表7-3。7.3JavaScript对象7.3.1JavaScript内置对象

3.Date对象

需要说明的是，起点时间“1970年1月1日零时”指GMT（格林威治时间），精确计算时间时起点的时分秒还要加上当前所在的时区。北京时间的时区为东8区，起点时间实际为：“1970/01/0108:00:00”。

Date对象的常用方法

见表7-47.3JavaScript对象7.3.1JavaSc