第11章 ASP.NET AJAX开发技术

第11章ASP.NETAJAX开发技术•AJAX技术是这几年中出现的较为热闹的技术，给笔者的感觉是忽如一夜春风来，处处都在AJAX。大多数Web应用程序的开发者都己经关注，或正在使用AJAX。AJAX英文全称是AsynchronousJavaScriptandXML，中文称为异步JavaScript和XML。事实上AJAX本身不能称为一门技术、语言或者是软件，它是由多种技术组合，这些技术存在了很多年，现在借助于AJAX的出现，开始越来越受到开发人员的重视。11.1ASP.NETAJAX基础•AJAX是一种在客户端与服务器端异步通信的技术，通俗点来说就是无刷新的页面请求技术。在ASP.NET中，每当用户请求页面时，无论是第一次请求还是页面回发请求，都将导致Server端重新生成一个Web页面，并被发送到客户端。此时客户端会重新加载一个全新的Web页面，浏览器的进度条会显示重新加载时的进度，整个过程都由客户端和服务器端直接通信来完成。AJAX技术则在客户端和服务器端增加了一个客户端代理层，当客户端需要与服务器端通信时，由客户端代理层向服务器端异步地发出请求。服务器端收到请求，执行一系列行为并传回更新信息给客户端代理，代理层将提取出服务器端返回的信息更新客户端。整个过程由代理异步的在后台完成，客户端不需要进行任何的刷新动作，因此通常有人称AJAX页面为无刷新Web页面。11.1.1AJAX技术简介•AJAX由数种技术组成的，比如JavaScript、CSS、HTML、XML、XSLT、DOM和XMLHttpRequest技术。其中最重要的要数XMLHttpRequest对象，这个对象将在客户端和服务器端充当客户端代理人的作用，AJAX技术使用JavaScript语言控制这个对象来与服务器端异步通信，AJAX页面请求示意如图所示。11.1.2ASP.NETAJAX架构•ASP.NETAJAX是一套开发AJAX应用程序的框架，该框架主要由两个部分组成：服务器端AJAX扩展和客户端AJAX脚本库。•服务器端扩展由如下三部分组成：•AJAX服务器控件：开发人员可以像使用普通的ASP.NET服务器控件一样使用这些AJAX控件，比如上一节示例程序中使用的ScriptManager和UpdatePanel控件。ScriptManager由其名称可以发现，这是一个脚本管理器，该控件将向客户端提供可用的AJAX脚本，这是一个相当重要的控件，不可或缺。UpdatePanel是一个容器控件，放置在其中的控件将具有局部更新的功能。•WebServers桥：默认情况下，客户端的JavaScript只能访问本域的Web服务，Web桥将为外部的Web服务创建一个代码，使客户端的JavaScript能够跨域访问Web服务。•应用程序服务桥：应用程序服务桥提供了让客户端的JavaScript脚本可以访问ASP.NET服务器端的服务，比如身份认证，用户个性化以及本地化服务等。11.2ASP.NETAJAX服务器端扩展•当安装好VS2008后，在工具箱中可以看到有一个AJAXExtension的工具栏，如果安装了AJAXControlToolkit的话，这个工具栏中将会有几十个AJAX服务器端控件。这些控件使开发人员简单的在服务器端设置几个属性就可以创建AJAX应用程序。AJAXExtension工具栏如图所示。11.2.1声明ScriptManager控件•ScriptManager控件是开发ASP.NETAJAX应用程序的一个核心控件，任何AJAX页面必须要放置一个ScriptManager且只能放置一个ScriptManager控件。ScriptManager控件管理AJAX页面的客户端脚本，默认情况下，ScriptManager控件向客户端发送AJAX所需要的脚本。这样客户端就可以使用AJAX的类型系统扩展、并且可以在客户端可以使用局部更新和Web服务调用等功能。•为了使用ScriptManager控件，可以直接从工具栏中拖到页面上，也可以手工进行ScriptManager的声明。建议将ScriptManager放在页面的最顶部form标签的下面。最好的作法是将ScriptManager放在一个母版页中，这样就不用为每个个页面重复的放置ScriptManager。11.2.2使用ScriptManager分发自定义脚本•ScriptManager能够包含需要添加到页面上的脚本的集合。可以在ScriptManager声明标签中使用Scripts标签包含多个ScriptReference来向客户端发送自定义的脚本文件。VS2008提供了ScriptReference集合编辑器来可视化的编辑脚本文件。•在设计视图中选中ScriptManager控件，切换到属性窗口，选择Scripts属性，单击右侧的按钮将弹出如图所示的集合编辑器窗体。11.2.3在ScriptManager中注册Web服务•在ASP.NET中，经常使用Web服务来提供远程访问服务，在ASP.NETAJAX中，为了让客户端通过JavaScript异步的访问服务，需要在ScriptManager中注册该Web服务。ScriptManager提供了一个Services集合用于包含一个或多个ScriptReference，每个ScriptReference可以注册一个Web服务。下面在AJAXDemo中新建一个Web服务，然后通过ASP.NETAJAX异步的进行访问。11.2.4处理ScriptManager中的异常•在传统的ASP.NET网页中，当遇到未处理的ASP.NET异常时，ASP.NET引擎会弹出一个包含错误信息的页面。而在ASP.NETAJAX中，由异步调用而产生的异常默认情况下不会显示错误页面，而是显示一个JavaScript的错误。如图所示。11.2.5编程控制ScriptManager控件•有时候也许需要通过编程的方式来控制，ScriptManager提供了很多的属性和方法可供开发人员进行调用。ScriptManager有几个属性是非常重要的：•EnablePartialRendering属性必须设置为true，这个属性允许局部更新页面。如果该属性设置为false则整个页面将不进行局部更新而失去AJAX的效果。•AllowCustomErrorsRedirect属性将根据在web.config中的CustomError节的设置来决定当AJAX产生错误时是否自动进行跳转，如果己经自定义了错误处理方式，则该属性应该设为false。•SupportsPartialRendering属性必须是true（默认值）。如果没有显式设置SupportsPartialRendering属性，则其值依浏览器功能而定，表明是否支持局部呈现。•EnableScriptGlobalization属性使客户端脚本可以在浏览器中显示区域性特定的日期和时间。11.2.6使用UpdatePanel控件•UpdatePanel是ASP.NETAJAX中另一个重量级的AJAX服务器控件。UpdatePanel如其名字所示，是一个类似Panel的容器控件，但是与Panel控件不同的时，UpdatePanel并不会在页面上显示任何内容。UpdatePanel的主要功能是为其内部的控件提供无刷新的局部更新功能。•在本章第一个示例程序中，曾经演示了通过添加一个ScriptManager控件、一个UpdatePanel控件实现了一个简单的书籍价格查询的示例。在该示例中，只是简单的将DropDownList和Button控件放在UpdatePanel的ContentTemplate标签内就实现了无刷新的客户端异步调用。UpdatePanel的目标就是简化开发人员编写异步AJAX的复杂性，该控件提供了很多属性和方法可供控制UpdatePanel内控件的异步更新行为。11.2.7使用多个UpdatePanel控件•可以在页面上放置多个UpdatePanel，下面的声明代码在页面上复制了一个新的UpdatePanel，声明代码如下所示：•!--这是放在另一个UpdatePanel内部的内容-•asp:UpdatePanelID=UpdatePanel2runat=server•ContentTemplate•divid=Div2•fieldset•legend第二个UpdatePanel内部/legend•asp:LabelID=lblInfo3runat=server/asp:Labelbr/•asp:ButtonID=btn3runat=serverText=显示信息onclick=btn3_Click/•/fieldset•/div•/ContentTemplate•/asp:UpdatePanel11.2.8编程控制UpdatePanel控件•有时可能需要以编程的方式来控制UpdatePanel，比如为UpdatePanel动态的添加或者是移除控件，添加新的触发器或者移除己有的触发器，动态设置属性等等，下面举一个示例演示如何为UpdatePanel控件动态的添加控件，在Page_Load事件中添加如下的代码：11.2.9使用UpdateProgress控件•在整页回送模式情况下，用户可以通过浏览器的进度条来了解当前页面的加载进度。当使用异步回送机制时，可以发现浏览器的进度条是不闪动的，ASP.NETAJAX提供了UpdateProgress控件，可以让用户了解当前页面的异步回送状态。•UpdateProgress控件的通过检测UpdatePanel控件的异步回送状态来显示或隐藏进度条，通常应该让UpdateProgress控件与UpdatePanel搭配使用来提升Web应用程序的可交互性。UpdateProgress控件将呈现一个div元素，该元素将根据关联的UpdatePanel控件是否已导致异步回发来显示或隐藏。对于初始页呈现和同步回发，将不会显示UpdateProgress控件。11.2.10取消异步回送•可以为客户端提供了一个取消按钮，以便于当异步回送长时间执行时给用户一个取消的机会。要完成这个功能须要在客户端编写脚本代码，与ScriptManager异常处理一节介绍的一样，需要对PageRequestManager客户端类进行编程。11.2.11使用Timer控件更新UpdatePanel•ASP.NETAJAX中提供了一个类似于Windows定时器的控件Timer，在一些情况下，Timer控件非常有用。比如一些需要实时更新的数据，可以使用Timer控件定期的更新UpdatePane来更新数据。Timer控件有一个非常重要的属性Interval，该属性以毫秒为单位指定间隔时长，默认值为6000，也就是1分钟。•Timer控件同样也提供了一个Tick方法，当到达指定的Interval时间间隔时，将触发该事件。下面通过一个程序来演示如何使用Timer控件，新建一个TimerDemo.aspx的页面，添加ScriptManager、UpdatePanel，在UpdatePanel中放一个Label控件和一个Timer控件。为Timer控件的Interval属性指定为1000，表示每秒触发一次，声明代码如下所示：11.3ASP.NETAJAX服务器端控件扩展•ASP.NET服务器端控件扩展是微软公司发起的一个开源社区的开发项目，主要用于提供基于MicrosoftAJAXLirbrary的服务器控件，目前有37个服务器端扩展器控件，这些控件可以自由使用在应用程序中，并且提供了源代码供开发者研究。这些服务器控件扩展提供了大量功能丰富的特性，大大丰富了ASP.NETAJAX应用程序开发。11.3.1安装ASP.NETAJAXControlToolkit•默认情况下，ControlToolkit并没有安装到VS2008中，开发人员需要单独下载并进行