第14章ASP.NETAjax技术

第14章　ASP.NET Ajax技术

ASP.NET Ajax是微软推出的用于在ASP.NET中开发Ajax应用程序的开发框架，它简化了开发Ajax应用程序的复杂性，使开发人员不用掌握开发Ajax应用程序必须了解的JavaScript、CSS等。而且它为需要更深入了解的用户提供了客户端JavaScript的扩展，使用户可以全面控制Ajax应用程序。本章将给大家详细讲述ASP.NET的Ajax技术。

14.1　Ajax基础

ASP.NET Ajax技术是多种技术的组合，包括HTML、XHTML和CSS等，该技术使得Web页面的更新更具有互动性和可响应性。本节我们来了解Ajax的基础。

14.1.1　Ajax技术简介

知识点讲解：光盘\视频讲解\第14章\Ajax技术简介.wmv

Ajax是Asynchronous JavaScript And XML的简称，中文称为异步JavaScript和XML。Ajax技术是一种在客户端与服务器端异步通信的技术，即无刷新的页面请求技术。本小节我们来简单了解Ajax技术。

在ASP.NET中，每当用户请求页面时，都将导致服务器端重新生成一个Web页面，然后发送到客户端。此时客户端会重新加载一个全新的Web页面，整个过程由客户端和服务器端直接通信来完成。而使用Ajax技术则有所不同，如图14.1所示，其中展示了使用Ajax技术前后通信过程的不同之处。

图14.1　使用Ajax技术前后对比

Ajax技术在客户端和服务器端中间加了一个客户端代理层。当客户端需要与服务器端通信时，由客户端代理层向服务器端异步地发出请求。服务器端收到请求，执行一系列行为并传递回更新信息给客户端代理，代理层将提取出服务器端返回的信息更新客户端。

注意：整个通信过程由代理层异步地在后台完成，客户端无须进行任何刷新动作。

Ajax技术由多种技术组成，如JavaScript、CSS、HTML、XML和XMLHttpRequest等。其中，最重要的是XMLHttpRequest对象，该对象将在客户端和服务器端充当客户端代理人的作用。Ajax技术使用JavaScript控制XMLHttpRequest对象来与服务器端异步通信，如图14.2所示。

图14.2　XMLHttpRequest对象与JavaScript的关系

14.1.2　Ajax架构

知识点讲解：光盘\视频讲解\第14章\Ajax架构.wmv

ASP.NET Ajax是一套开发Ajax应用程序的框架。该框架主要由两个部分组成：服务器端Ajax扩展和客户端Ajax脚本库。本小节我们来了解Ajax架构。

1. 服务器端Ajax扩展

Ajax服务器端框架提供了多种ASP.NET的服务器端控件，还可以使用由ASP.NET AjaxControl Toolkit控件工具包提供的多种服务器控件。服务器控件的使用简化了开发Ajax应用程序的复杂性。利用.NET框架的语言特性可以加快应用程序的开发，开发人员不必理解JavaScript语言。

注意：使用该框架的优点是熟练掌握ASP.NET的程序员不用学习其他知识就可以使用Ajax技术。缺点是服务器端框架功能有限，难以避免各种Ajax问题，如深入控制Ajax的上下文环境。

服务器端的架构如图14.3所示。

图14.3　服务器端Ajax扩展

2. 客户端Ajax脚本库

Ajax客户端包含一系列的JavaScript脚本库，简化了开发人员创建Ajax程序的复杂性。在开发ASP.NET Ajax应用程序时，通常将客户端与服务器端结合使用，这样可以利用客户端框架的简易特性，也可以更深入地控制整个Ajax的运行。客户端的架构如图14.4所示。

图14.4　客户端Ajax脚本库

支持Ajax的应用程序可以提供一些特性，具体如下：

• 提高效率。因为网页的大部分处理工作是在浏览器中执行的。
• 熟悉的UI元素。例如工具提示、弹出窗口等。
• 局部更新功能。使用Ajax技术后，只刷新已发生更改的网页部分。
• 客户端与使用Forms身份验证的ASP.NET应用程序服务、角色和用户配置文件的集成。
• 自动生成的代理类。可以简化从客户端脚本调用Web服务方法的过程。
• 一个框架，可以让用户自定义服务器控件以包含客户端功能。
• 对大部分浏览器的支持。例如Microsoft Internet Explorer、Mozilla Firefox等。

14.1.3　一个简单的Ajax应用示例

知识点讲解：光盘\视频讲解\第14章\一个简单的Ajax应用示例.wmv

本小节学习如何在Visual Studio 2012中开发基于ASP.NET Ajax框架的应用程序。下面的示例将演示使用Ajax和不使用Ajax技术的两种页面效果。

【示例14-1】下面演示的是一个简单的Ajax应用示例。

（1）创建一个网站，命名为“简单的Ajax应用示例”。

（2）在该网站上添加一个Web页面，命名为Default.aspx。在该Web页面上添加一个ScriptManager控件、一个UpdatePanel控件、一个Timer控件和两个Label控件。将Timer控件的Interval属性设置为1000，即每秒进行一次页面回发。Default.aspx页面的代码如下：

在Default.aspx的代码后置文件中编写Page_Load事件。该事件中在两个Label控件上显示当前时间信息。Default.aspx文件的后置代码具体如下：

运行结果如图14.5所示。

图14.5　运行结果图

在该示例中，使用两个Label控件显示当前的时间信息。Label1控件位于UpdatePanel控件中，而Label2控件位于页面上。Label1控件中显示的时间是一个动态更新的时钟，使用Ajax技术实现了无刷新即可更新页面的功能。Label2控件的时间不发生变化，只有刷新页面，才会更新时间信息。

注意：编写Ajax应用程序比较复杂，需要开发人员熟练掌握JavaScript、XML等技术。微软在Visual Studio 2012中整合了一套Ajax开发框架，并提供了大量的服务器扩展控件，使编写Ajax程序非常轻松。常用的几种控件有ScriptManager、UpdatePanel、UpdateProgress和Timer。

14.2　客户端脚本管理控件ScriptManager

客户端脚本管理控件ScriptManager是ASP.NET Ajax的一个核心服务器控件。该控件提供了客户端脚本扩展、页面的局部更新等功能。本节我们来学习ScriptManager控件。

14.2.1　声明ScriptManager控件

知识点讲解：光盘\视频讲解\第14章\声明ScriptManager控件.wmv

ScriptManager控件是Ajax的核心服务器控件。该控件必须放在<form>元素的下面，即需要将该控件作为<form>元素的第一个控件声明。必须先有ScriptManager控件，其他服务器控件如UpdatePanel、UpdateProgress和Timer控件等才能正常使用。开发人员只需要将一个ScriptManager控件拖到Web页面上，使其作为Web页面的第一个控件，整个ASP.NET即具有Ajax开发的能力。

注意：每个ASP.NET Ajax页面上只能有一个ScriptManager控件。

【示例14-2】下面演示的是ScriptManager控件的声明方法。

新建一个Web页面，命名为Default.aspx。从工具箱中的“AJAX扩展”项中拖一个ScriptManager控件到Default.aspx页面中，可以看到Visual Studio 2012生成了如下代码：

ScriptManager控件的主要任务是向客户端分发脚本。现在运行该Web页面，在运行结果的空白页面上单击右键，选择“查看源文件”命令，可以看到生成的脚本代码如下：

在Web页面上添加了ScriptManager控件后，可以看到源代码中增添了很多<script></script>代码块。这些代码块是请求ASP.NET Ajax所需要的客户端脚本，通常是MicrosoftAjax.js和MicrosoftAjaxWebForms.js文件。这两个文件将嵌入到System.Web.Extensions.dll的资源文件中。

ASP.NET Ajax提供了一个具有更多功能以及具有压缩功能的ScriptResource.axd文件的HTTP处理器。在ASP.NET 4.5中，通过请求WebResource.axd这个HTTP处理器可以访问嵌入到程序集中的资源。该请求传递了两个参数d和t。参数d代表程序集中的资源识别符，参数t是时间戳，表示最后一次修改程序集的时间。

14.2.2　在ScriptManager中注册自定义脚本

知识点讲解：光盘\视频讲解\第14章\在ScriptManager中注册自定义脚本.wmv

ScriptManager能够包含需要添加到页面上的脚本的集合。在ScriptManager声明标签中可以使用<script>标签包含多个ScriptReference来向客户端发送自定义的脚本文件。如果脚本是一个独立的JavaScript文件，则可以直接添加到Scripts集合中。

注意：Scripts集合中的每个元素是一个ScriptReference类型的属性，用于在ASP.NET页面上注册JavaScript文件。

【示例14-3】下面演示的是在ScriptManager中注册自定义脚本的方法。

（1）创建一个网站，命名为“在ScriptManager中注册自定义脚本”。

（2）在该网站中添加一个JavaScript文件，命名为JavaScript.js。该脚本的代码如下：

（3）在该网站上添加一个Web页面，命名为Default.aspx。在该Web页面上添加一个ScriptManager控件。在设计视图中选择ScriptManager控件，切换到属性窗口，选择Scripts属性。单击该属性右侧的按钮将弹出“ScriptReference集合编辑器”对话框。

单击集合编辑器中的“添加”按钮时，将自动添加一个ScriptReference对象。在右侧的属性面板中允许指定ScriptReference的属性。为了引用自定义的脚本，需要在Path属性中创建自定义脚本的路径，如图14.6所示。

图14.6　集合编辑器

“ScriptReference集合编辑器”对话框的属性具体描述如表14.1所示。

表14.1　“ScriptReference集合编辑器”对话框的属性

使用Path属性指定脚本文件JavaScript.js后，Default.aspx页面的代码如下：

运行结果如图14.7所示。

图14.7　运行结果图

在该示例中，运行后弹出一个对话框，显示信息为“来自独立的脚本文件中的脚本”。运行该页面后，在空白处单击右键，选择“查看源文件”命令。可以看到，在源代码中添加了一些代码，引用客户端脚本，代码如下：

14.2.3　在ScriptManager中注册Web服务

知识点讲解：光盘\视频讲解\第14章\在ScriptManager中注册Web服务.wmv

在ASP.NET中，经常使用Web服务来提供远程访问服务。在ASP.NET Ajax中，为了让客户端通过JavaScript异步地访问服务，需要在ScriptManager中注册该Web服务。ScriptManager提供了一个Services集合用于包含一个或多个ScriptReference，每个ScriptReference可以注册一个Web服务。

【示例14-4】下面演示的是在ScriptManager控件中注册Web服务的方法。

（1）创建一个网站，命名为“在ScriptManager控件中注册Web服务”。

（2）在该网站上添加一个Web服务文件，命名为WebService.asmx。在“解决方案资源管理器”面板中的网站上单击右键，选择“添加”|“添加新项”命令，如图14.8所示。

图14.8　新建Web服务文件

添加上WebService.asmx文件后，会自动添加WebServices.cs文件。WebService.asmx文件代码如下：

在WebService.cs文件中创建一个Time()方法。该方法用于返回当前时间信息，代码如下：

为了使ASP.NET能够为该Web服务自动生成JavaScript的代理，必须在Web服务类上面使用ScriptService属性进行修饰。

（3）在该网站上添加一个Web页面，命名为Default.aspx。在该Web页面上添加一个ScriptManager控件。在设计视图中选择ScriptManager控件，切换到属性窗口，选择Services属性。单击该属性右侧的按钮将弹出“ServiceReference集合编辑器”对话框。

单击集合编辑器中的“添加”按钮时，将自动添加一个ServiceReference对象。在右侧的属性面板中允许指定ServiceReference的属性。为了引用Web服务文件，需要在Path属性中创建Web服务的路径，如图14.9所示。

图14.9　集合编辑器

“ServiceReference集合编辑器”对话框的属性具体描述如表14.2所示。

表14.2　“ServiceReference集合编辑器”对话框的属性

在ScriptManager中注册了Web服务之后，就可以在JavaScript代码中直接调用该Web服务。Default.aspx页面的代码如下：

运行结果如图14.10所示。

图14.10　运行结果图

注意：在该示例中，当页面加载时，从Web服务中获取当前服务器的时间，弹出对话框，显示信息为当前时间。

14.2.4　动态控制ScriptManager控件

知识点讲解：光盘\视频讲解\第14章\动态控制ScriptManager控件.wmv

在实际项目开发中，有时需要在程序运行时控制该控件的运行。ScriptManager控件提供了很多的属性和方法供开发人员调用。其中有4个属性非常重要，具体说明如下。

■ EnablePartialRendering：该属性必须设置为true，它允许局部更新页面。如果该属性设置为false，整个页面将不能进行局部更新而失去了Ajax的效果。
■ AllowCustonErrorsRedirect：该属性决定当Ajax产生错误时是否自动进行跳转。
■ SupportsPartialRendering：该属性默认值为true。如果没有显式设置该属性，则其值依浏览器功能而定，表明是否支持局部呈现。
□ EnableScriptGlobalization：该属性使客户端脚本可以在浏览器中显示区域性特定的日期和时间。

【示例14-5】下面演示的是如何动态控制ScriptManager控件。

（1）创建一个网站，命名为“动态控制ScriptManager控件”。

（2）在该网站上添加一个Web页面，命名为Default.aspx。在该Web页面上添加一个ScriptManager控件、一个UpdatePanel控件、一个Button控件和一个包含在UpdatePanel控件中的Label控件。Default.aspx页面的代码如下：

Default.aspx文件的后置代码具体如下：

运行结果如图14.11所示。

图14.11　运行结果图

在该示例中，使用RegisterAsyncPostBackControl()方法将Button控件注册为一个异步回发控件。这样当单击按钮时将产生一次异步回发。代码中还用了ScriptManager控件的IsInAsyncPostBack属性。该属性获取一个指示是否在部分呈现模式下执行当前回发的值，如果是则更新Label控件的时间显示。

14.2.5　使用ScriptManagerProxy控件

知识点讲解：光盘\视频讲解\第14章\使用ScriptManagerProxy控件.wmv

ScriptManagerProxy控件是ScriptManager控件的一个代理类，它通常用于父子页面的环境中，如母版页和内容页。使用ScriptManagerProxy控件，可以在母版页或内容页已包含ScriptManager控件的情况下，将脚本和服务添加到内容页和用户控件中。

【示例14-6】下面演示的是ScriptManagerProxy控件的使用方法。

（1）创建一个网站，命名为“使用ScriptManagerProxy控件”。

（2）在该网站中添加一个JavaScript文件，命名为JavaScript.js。该脚本的代码如下：

（3）在该网站上添加一个母版页，命名为MasterPage.master。在母版页中添加一个ScriptManager控件，该控件是必须位于<form>标签下的第一个控件。MasterPage.master文件代码如下：

（4）在该网站上添加一个应用母版页的内容页，命名为Default.aspx，如图14.12所示。

图14.12　添加内容页

单击图14.12中的“添加”按钮后，会弹出“选择母版页”对话框，如图14.13所示。

图14.13　“选择母版页”对话框

Default.asp页面应用了母版页后，可以在设计视图中看到ScriptManager控件。但无法直接对其进行编辑，因此在该页面上添加一个ScriptManagerProxy控件，该控件会引用母版页中的ScriptManager控件。

在设计视图中选择ScriptManagerProxy控件，切换到属性窗口，选择Scripts属性。单击该属性右侧的按钮将弹出“ScriptReference集合编辑器”对话框。单击集合编辑器中的“添加”按钮时，将自动添加一个ScriptReference对象。在右侧的属性面板中允许指定ScriptReference的属性。

注意：为了引用自定义的脚本，需要在Path属性中创建自定义脚本的路径，如图14.14所示。

图14.14　“ScriptReference集合编辑器”对话框

综上所述，Default.aspx页面的代码如下：

运行结果如图14.15所示。

图14.15　运行结果图

在该示例中，母版页中添加了ScriptManager控件，该控件在内容页中无法编辑，因此，需要使用ScriptManagerProxy控件。通过该控件引用母版页中的ScriptManager控件，开发人员可以在内容页中定义ScriptManager的属性。

14.3　无刷新局部更新控件UpdatePanel

无刷新局部更新控件UpdatePanel是允许页面进行局部更新的一个主要的服务器控件。UpdatePanel控件与ScriptManager控件的结合，使Web页面可以只更新包含在UpdatePanel控件中的部分，而不用刷新整个页面。本节我们来学习UpdatePanel控件。

14.3.1　声明UpdatePanel控件

知识点讲解：光盘\视频讲解\第14章\声明UpdatePanel控件.wmv

UpdatePanel控件提供了异步PostBack的机制，是重量级的Ajax服务器控件。UpdatePanel控件是一个类似Panel的容器控件，所有添加到该控件中的控件都放在ContentTemplate区段中。该控件的主要功能是为其内部的控件提供无刷新的局部更新功能。放在UpdatePanel控件外的控件不能使用Ajax的异步刷新的功能。

注意：在Web页面上放一个ScriptManager控件后，如果该页面也放置了UpdatePanel控件，则拥有了异步能力。ScriptManager控件的EnablePartialRendering属性的值默认为true。如果将该属性值设置为false，那么即使Web页面上放置了UpdatePanel控件，也不能拥有异步的能力。

【示例14-7】下面演示的是UpdatePanel控件的声明方法。

新建一个Web页面，命名为Default.aspx。从工具箱中的“AJAX扩展”项中拖一个ScriptManager控件到Default.aspx页面中，可以看到VS 2012生成了如下代码：

在该示例中，在使用UpdatePanel控件之前，必须先添加ScriptManager控件。

14.3.2　使用UpdatePanel控件

知识点讲解：光盘\视频讲解\第14章\使用UpdatePanel控件.wmv

UpdatePanel控件简化了开发人员编写异步Ajax的复杂性。要触发异步回送，只需要将ASP.NETWeb服务器控件放在UpdatePanel控件的<ContentTemplate>控件集合中即可。

注意：使用UpdatePanel控件的网页中<form>标签下的第一个控件必须是ScriptManager控件。

【示例14-8】下面演示的是UpdatePanel控件的使用方法。

（1）创建一个网站，命名为“使用UpdatePanel控件”。

（2）在该网站上添加一个Web页面，命名为Default.aspx。在该Web页面上添加一个ScriptManager控件、一个UpdatePanel控件、两个Label控件和两个Button控件。一个Label和Button控件包含在UpdatePanel控件中，另一个Label和Button控件放在UpdatePanel控件外。Default.aspx页面的代码如下：

在Default.aspx的代码后置文件中编写Button1和Button2的单击事件。这两个按钮的单击事件都调用一个方法function()，该方法有一个string类型的返回值time。Default.aspx文件的后置代码具体如下：

运行结果如图14.16所示。

图14.16　运行结果图

在该示例中，单击位于UpdatePanel控件内的控件Button1时，只更新了UpdatePanel内部的标签。而单击控件Button2时，会引发一次整个页面的PostBack，浏览器的进度条会重新加载一次。

14.3.3　使用多个UpdatePanel控件

知识点讲解：光盘\视频讲解\第14章\使用多个UpdatePanel控件.wmv

在实际开发中，通常将控件放置在多个UpdatePanel控件中。在页面上使用多个UpdatePanel控件时，必须注意多个UpdatePanel之间的刷新模式。UpdatePanel控件会依照UpdateMode属性的设置有所不同。UpdateMode属性值默认为Always，还有一个可选值为Conditional。

【示例14-9】下面演示的是使用多个UpdatePanel控件的方法。

（1）创建一个网站，命名为“使用多个UpdatePanel控件”。

（2）在该网站上添加一个Web页面，命名为Default.aspx。在该Web页面上添加一个ScriptManager控件和三个UpdatePanel控件，并在每个UpdatePanel控件中添加一个Label控件。将UpdatePanel1控件的UpdateMode属性值设置为默认值Always；UpdatePanel2控件的UpdateMode属性值设置为Conditional；UpdatePanel3控件的UpdateMode属性值设置为Conditional，并且ChildrenAsTriggers属性值为False。Default.aspx页面的代码如下：

在Default.aspx的Page_Load事件中，分别为三个Label控件赋值为当前系统的时间。Default.aspx文件的后置代码具体如下：

运行结果如图14.17所示。在该示例中，添加了三个UpdatePanel控件，其中各有一个Label控件。在Page_Load事件中，为三个Label控件赋值为当前时间。单击第一个按钮时，更新Label1的时间；单击第二个按钮时，更新Label1和Label2的时间；单击第三个按钮时，更新Label1的时间。

图14.17　运行结果图（1）

注意：（1）UpdatePanel控件的UpdateMode属性值默认为Always。因此，当单击任意一个刷新时间的按钮时，页面上的三个UpdatePanel控件都会更新其时间，如图14.18所示。

图14.18　运行结果图（2）

（2）将UpdatePanel控件的ChildrenAsTriggers属性值设置为False后，会使居于其中的所有控件都不具有触发异步更新的能力。如果需要让某个控件具有异步更新的能力，可以将该控件注册为异步回发触发器。声明代码示例如下：

14.3.4　使用Timer控件触发UpdatePanel异步回发

知识点讲解：光盘\视频讲解\第14章\使用Timer控件触发UpdatePanel异步回发.wmv

ASP.NET Ajax中提供了一个类似于定时器的控件Timer。在开发中，有一些需要实时更新的数据，可以使用Timer控件定期更新UpdatePanel控件来实现。Timer控件有一个属性Interval非常重要，该属性以毫秒为单位指定间隔时长，默认值为60000，即一分钟。

【示例14-10】下面演示的是如何使用Timer控件触发UpdatePanel异步回发。

（1）创建一个网站，命名为“使用Timer控件触发UpdatePanel异步回发”。

（2）在该网站上添加一个Web页面，命名为Default.aspx。在该Web页面上添加一个ScriptManager控件、一个UpdatePanel控件、一个Timer控件和两个Label控件。Label1控件位于UpdatePanel控件外，Label2控件位于UpdatePanel控件中。将Timer控件的Interval属性设置为1000，即每秒进行一次页面回发。Default.aspx页面的代码如下：

在Default.aspx的Page_Load事件中将Label1和Label2控件赋值为当前系统时间。Default.aspx文件的后置代码具体如下：

运行结果如图14.19所示。

图14.19　运行结果图

在该示例中，Timer控件位于UpdatePanel控件内部。当到达指定的Interval时，会自动触发异步回发。也可以在UpdatePanel控件外放置Timer控件，使用UpdatePanel的Triggers将Timer控件定义为异步触发器。声明代码示例如下：

注意：要使用Timer控件，页面上必须放置一个ScriptManager控件。

14.3.5　动态控制UpdatePanel控件

知识点讲解：光盘\视频讲解\第14章\动态控制UpdatePanel控件.wmv

UpdatePanel控件是一个基于模板的控件，有时需要以编程的方式来控制该控件。使用该控件的UpdatePanel.ContentTemplateContainer.Controls属性可以动态地添加或移除定义在其中的控件。

【示例14-11】下面演示的是如何动态控制UpdatePanel控件。

（1）创建一个网站，命名为“动态控制UpdatePanel控件”。

（2）在该网站上添加一个Web页面，命名为Default.aspx。在该Web页面上添加一个ScriptManager控件和一个Button控件。Default.aspx页面的代码如下：

在Default.aspx的代码后置文件中动态地添加UpdatePanel控件、Button控件和Label控件，然后将各控件添加到UpdatePanel的属性ContentTemplateContainer.Controls控件集合中去，将UpdatePanel添加到窗体的控件集合中。Default.aspx文件的后置代码具体如下：

运行结果如图14.20所示。

图14.20　运行结果图

在该示例中，动态定义了UpdatePanel、按钮、标签及其属性。将按钮、标签添加到了UpdatePanel的控件集合中，再将UpdatePanel添加到了窗体的控件集合中。

注意：运行时可以看到页面中动态地添加了一个按钮和一个标签控件。单击按钮时，会异步地更新Label控件中显示的时间。

14.3.6　使用UpdateProgress控件

知识点讲解：光盘\视频讲解\第14章\使用UpdateProgress控件.wmv

ASP.NET Ajax使得异步更新过程不通过浏览器进度条来显示当前页面的加载进度。对于一些需要较长时间完成的操作来说，会让用户不知所措，往往会带来一些更严重的系统问题。UpdateProgress控件与UpdatePanel联合使用，可以在异步更新过程中显示一个进度条图标或者文本，使得Ajax应用程序更人性化。

【示例14-12】下面演示的是如何使用UpdateProgress控件。

（1）创建一个网站，命名为“使用UpdateProgress控件”。

（2）在该网站上添加一个Web页面，命名为Default.aspx。在该Web页面上添加一个ScriptManager控件、一个UpdateProgress控件和一个UpdatePanel控件。在UpdateProgress控件的ProgressTemplate中添加一行文本“正在获取当前时间信息。。。”。Default.aspx页面的代码如下：

在Default.aspx的代码后置文件中调用Sleep()方法将时间延迟三秒，然后更新服务器端时间。Default.aspx文件的后置代码具体如下：

运行结果如图14.21和图14.22所示。

图14.21　运行结果图（1）	图14.22　运行结果图（2）

注意：在该示例中，使用UpdateProgress控件与UpdatePanel控件结合，在客户端显示异步更新的加载进度。UpdateProgress控件显示了一个进度条文本“正在获取当前时间信息。。。”。当更新完毕，在Label控件中显示出当前时间信息。

14.3.7　取消异步回发

知识点讲解：光盘\视频讲解\第14章\取消异步回发.wmv

当异步回发正在进行时，可以通过编程的方式，让用户中断正在执行的异步操作。ASP.NET可以为客户端提供一个取消按钮，以便于当异步回发长时间执行时给用户一个取消的机会。本小节我们来学习如何中断正在执行的异步回发。

【示例14-13】下面演示的是如何取消异步回发。

（1）创建一个网站，命名为“取消异步回发”。

（2）在该网站上添加一个Web页面，命名为Default.aspx。在该Web页面上添加一个ScriptManager控件、一个UpdateProgress控件和一个UpdatePanel控件。在UpdateProgress控件的ProgressTemplate模板中添加一个HTMLButton控件，并添加客户端响应代码，调用abortPostBack()方法中断回发。Default.aspx页面的代码如下：

在Default.aspx的代码后置文件中调用Sleep()方法将时间延迟三秒，然后更新服务器端时间。Default.aspx文件的后置代码具体如下：

运行结果如图14.23所示。

图14.23　运行结果图

在该示例中，为HTMLButton控件的onclick事件添加了一个响应函数。在该函数中，使用PageRequestManager的属性和方法来根据当前页面的状态中断异步回发过程。

注意：在该示例中，当异步回发运行时，将显示“取消异步回发”按钮，单击该按钮则取消回发。

14.4　Ajax服务器端控件扩展

ASP.NET Ajax服务器端控件扩展是微软公司发起的一个开源社区的开发项目。Ajax Control Toolkit是微软免费提供的控件工具包，它使得ASP.NET Ajax更容易被开发人员所接受。这些服务器控件可以在应用程序中自由使用，并提供了源代码供开发者研究。本节我们来了解Ajax服务器端控件扩展相关知识。

14.4.1　安装ASP.NET控件工具包Ajax Control Toolkit

知识点讲解：光盘\视频讲解\第14章\安装ASP.NET控件工具包Ajax Control Toolkit.wmv

默认情况下，Ajax控件工具包没有跟随Visual Studio 2012一起安装。该控件工具包是微软与开源社区共同创建的一个工具包。本小节我们来学习Ajax控件工具包的下载、安装以及添加到工具箱的步骤。

1. 下载ASP.NET Ajax Control Toolkit

Ajax控件工具包可以从网址http://ajaxcontroltoolkit.codeplex.com/下载，如图14.24所示。

图14.24　下载Ajax控件工具包

2. 安装ASP.NET Ajax Control Toolkit

Ajax控件工具包的安装方式有两种：

（1）打开Visual Studio 2012，选择“工具”|“库程序包管理器”|“管理解决方案的NuGet程序包”命令。在打开的“管理NuGet程序包”对话框中找到AjaxControlToolkit程序包，单击“安装”按钮，如图14.25所示。

图14.25　“管理NuGet程序包”对话框

（2）打开Visual Studio 2012，选择“工具”|“库程序包管理器”|“程序包管理器控制台”命令。在打开的“程序包管理器控制台”面板中输入Install-Package AjaxControlToolkit命令，如图14.26所示。

图14.26　“程序包管理器控制台”面板

注意：两种安装方式可以任选其一。

3. 将Ajax Control Toolkit添加到工具箱

打开工具箱，在“AJAX扩展”项上单击右键，选择“选择项”命令。在打开的“选择工具箱项”对话框中单击“浏览”按钮。在打开的“选择文件”对话框中选择位于Bin文件夹下的AjaxControl Toolkit.dll文件，然后单击“确定”按钮，如图14.27所示。

图14.27　“选择工具箱项”对话框

【示例14-14】下面演示安装Ajax控件工具包的方法。

（1）创建一个网站，命名为“安装ASP.NETAjax控件工具包”。

（2）选择“工具”|“库程序包管理器”|“程序包管理器控制台”命令。在打开的“程序包管理器控制台”面板中输入Install-Package AjaxControlToolkit命令。将Ajax控件工具包安装成功。

（3）在该网站中添加一个Web窗体，命名为Default.aspx。在.aspx页面状态下，打开工具箱，在“AJAX扩展”项上单击右键，选择“选择项”命令。在打开的“选择工具箱项”对话框中单击“浏览”按钮，选中位于该网站Bin文件夹下的AjaxControlToolkit.dll文件，单击“确定”按钮。将Ajax控件工具包添加到工具箱。在.aspx页面状态下，打开工具箱，在“AJAX扩展”项中可以看到有很多以Extender结尾的扩展器控件，如图14.28所示。

图14.28　扩展器控件

14.4.2　ASP.NET Ajax扩展控件概览

知识点讲解：光盘\视频讲解\第14章\ASP.NET Ajax扩展控件概览.wmv

Ajax Control Toolkit提供了很多控件，一些常用控件的功能如表14.3所示。

表14.3　ASP.NET Ajax扩展控件

注意：表14.3中列出了一些常用的控件，不常用的控件如果要用可以在帮助文档中查阅相关资料。

14.4.3　使用ASP.NET Ajax扩展控件

知识点讲解：光盘\视频讲解\第14章\使用ASP.NET Ajax扩展控件.wmv

ASP.NET Ajax扩展控件的作用是为现在的服务器控件提供额外的Ajax功能支持。Visual Studio 2012中对这类扩展控件的使用提供了很好的支持。当放置一个“标准”控件到页面上时，在弹出的任务窗口中会有“添加扩展程序”任务项。

【示例14-15】在示例14-14的基础上演示ASP.NET Ajax扩展控件的使用方法。

在Default.aspx页面上，从“工具箱”的“标准”项中拖一个Button控件到Web页面上。在设计视图中，单击Button控件右上角的智能标签，在打开的“Button任务”中单击“添加扩展程序”项，打开“扩展程序向导”对话框，如图14.29所示。

图14.29　“扩展程序向导”对话框

生成代码如下所示：

也可以直接拖动扩展控件到Web页面上，Visual Studio 2012会自动生成并添加注册声明代码。例如，将一个CalendarExtender控件拖到Web页面上，生成如下代码：

注意：使用ASP.NET Ajax扩展控件时，会在Web页面上端使用Register指令引入AjaxControlToolkit命名空间，如下所示：

14.5　小结

本章主要介绍了ASP.NET Ajax技术，包括Ajax基础、客户端脚本管理控件ScriptManager、无刷新局部更新控件UpdatePanel和Ajax服务器端控件扩展。重点是对客户端脚本管理控件ScriptManager和无刷新局部更新控件UpdatePanel的掌握，有兴趣的读者可以尝试着在自己的网站中添加这些控件。

14.6　本章习题

习题14-1　在Visual Studio 2012中新建一个网站，命名为chapter14_1。在该网站中添加一个JavaScript文件，命名为JavaScript.js。在该网站上添加一个Web页面，命名为Default.aspx。在Default.aspx页面中添加一个ScriptManager控件，运行结果如图14.30所示。

图14.30　运行结果图

【分析】本题目主要考查的是对在ScriptManager中注册自定义脚本文件的掌握情况。

【关键代码】JavaScript.js文件代码如下：

alert("今天天气不错，万里无云。")

Default.aspx文件代码如下：

        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Path="~/JavaScript.js" />
            </Scripts>
        </asp:ScriptManager>

习题14-2　在Visual Studio 2012中新建一个网站，命名为chapter14_2。在网站上添加一个Web服务文件，在自动加载的WebService.cs文件中创建一个Time()方法，返回当前年份。在该网站上添加一个Web页面，命名为Default.aspx。在Web页面中的<head>标签内加上脚本，运行结果如图14.31所示。

图14.31　运行结果图

【分析】本题目主要考查的是对在ScriptManager中注册Web服务的掌握情况。

【关键代码】WebService.cs文件代码如下：

[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
    [WebMethod]
    public string Time()
    {
        string time = string.Format("当前时间是：" + DateTime.Now);
        return time;
    }
}

Default.aspx文件中的脚本代码如下：

    <script type ="text/javascript" >
        function pageLoad() {
            WebService.Time(success, failed, "");
        }
        function success(result, userContext) {
            alert(result + "" + userContext);
        }
        function failed(result) {
            var message = String.format("statusCode={0}\r\nexceptionType= {1}\r\ntimedOut={2}\r\nmessage ={3}\r\nstackTrace={4}",
                result.get_statusCode(),
                result.get_exceptionType(),
                result.get_timedOut(),
                result.get_message(),
                result.get_stackTrace());
            alert(message);
        }
        </script>

习题14-3　在Visual Studio 2012中新建一个网站，命名为chapter14_3。在该网站上添加一个Web页面，命名为Default.aspx。在该Web页上添加一个ScriptManager控件、一个UpdatePanel控件、一个Button控件和一个Label控件。运行结果如图14.32所示。

图14.32　运行结果图

【分析】本题目主要考查的是对UpdatePanel控件的掌握情况。

【关键代码】Default.aspx.cs文件代码如下：

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "当前时间信息：";
        Label1.Text += DateTime.Now.ToLongTimeString();
    }
}

习题14-4　在Visual Studio 2012中新建一个网站，命名为chapter14_4。在该网站上添加一个Web页面，命名为Default.aspx。在该页面中添加一个ScriptManager控件、一个UpdatePanel控件、一个Timer控件和两个Label控件。运行结果如图14.33所示。

图14.33　运行结果图

【分析】本题目主要考查的是对使用Timer控件触发UpdatePanel控件的掌握程度。

【关键代码】Default.aspx.cs文件代码如下：

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Label1.Text = DateTime.Now.ToLongTimeString();
        Label2.Text = DateTime.Now.ToLongTimeString();
    }
}

习题14-5　在Visual Studio 2012中新建一个网站，命名为chapter14_5。在该网站上添加一个Web页面，命名为Default.aspx。在该文件中添加一个ScriptManager控件、一个UpdateProgress控件、一个UpdatePanel控件、一个Button控件和一个Label控件。运行结果如图14.34和图14.35所示。

图14.34　运行结果图（1）	图14.35　运行结果图（2）

【分析】本题目主要考查的是对UpdateProgress控件的掌握程度。

【关键代码】Default.aspx.cs文件代码如下：

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(5000);
        Label1.Text = "当前时间信息为：<br />";
        Label1.Text = DateTime.Now.ToLongTimeString();
         }
     }