ASPNET Web 程序设计课件第10章

第10章MicrosoftAjax

教学目标1.AJAX的开发模式介绍2.ASP.NETAJAX的架构及优点3.AJAX服务器端控件的使用4.AJAXControlTookit工具包的下载及安装5.使用AJAX即使开发一个聊天室10.1AJAX概述AJAX是AsynchronousJavaScriptandXML的缩写，是一种利用已经成熟的技术构建具有良好交互性的Web应用程序的好方法。通常称AJAX页面为无刷新Web页面。ASP.NETAJAX是AJAX的Microsoft实现方式，对AJAX的使用以控件形式提供，提高了易用性。ASP.NETAJAX1.0以单独下载的形式发布，可以在ASP.NET2.0之上安装。从.NETFramework3.5开始，不再需要下载和安装单独的ASP.NETAJAX。3AJAX技术和传统Web应用程序比较410.1.1ASP.NETAJAX优点ASP.NETAJAX是AJAX的Microsoft实现方式，专用于ASP.NET开发人员。使用ASP.NET中的AJAX功能，可以生成丰富的Web应用程序。与传统的Web应用程序相比，基于ASP.NETAJAX的Web应用程序具有以下优点：局部页刷新，即只刷新已发生更改的网页部分。自动生成的代理类，可简化从客户端脚本调用Web服务方法的过程。支持大部分流行的浏览器。因为网页的大部分处理工作是在浏览器中执行的，所以大大提高了效率510.2ASP.NETAJAX服务器控件当把ASP.NETAJAX控件添加到ASP.NET网页上后，再浏览这些网页会自动将支持的客户端JavaScript脚本发送到浏览器以获取AJAX功能。6常用的ASP.NETAJAX服务器控件ScriptManager：管理客户端组件、局部页刷新、本地化、全球化和自定义用户脚本的脚本资源。如果使用UpdatePanel、UpdateProgress和Timer控件，就必须包含ScriptManager控件。UpdatePanel：实现刷新页的选定部分，而不是使用同步回发来刷新整个页面。7常用的ASP.NETAJAX服务器控件（续）UpdateProgress：提供有关UpdatePanel控件中的局部页刷新的状态信息。Timer：按定义的时间间隔执行回发。可以使用Timer控件来发送整个页面，或配合使用UpdatePanel控件以按定义的时间间隔执行局部页刷新。810.2.1ScriptManager控件ASP.NET中AJAX功能的核心，管理一个页面上的所有ASP.NETAJAX资源。包括将MicrosoftAJAX库的JavaScript脚本下载到浏览器和协调通过使用控件UpdatePanel启用的局部页面刷新。每个实现AJAX功能的页面都需要添加一个ScriptManager控件。语法格式如下：<asp:ScriptManagerID="ScriptManager1"runat="server"/>910.2.1ScriptManager控件（续）如果仅在一个ASP.NET网页上添加了一个ScriptManager控件，而没有添加其它的ASP.NETAJAX服务器控件，则在浏览该网页时就会将MicrosoftAJAX库的JavaScript脚本下载到浏览器。属性EnablePartialRendering：确定了网页是否能实现局部页刷新功能。源程序：ScriptManager.aspx10在ScriptManager中注册自定义JavaScript脚本在ScriptManager控件的<Scripts>子元素中创建一个指向脚本文件的ScriptReference对象。<asp:ScriptManagerID="ScriptManager1"runat="server"><Scripts>

<asp:ScriptReferencepath="MyScript.js"/></Scripts></asp:ScriptManager>11在ScriptManager中注册自定义JavaScript脚本（续）脚本文件MyScript.js的最后一句必须是：if(typeof(Sys)!=='undefined')Sys.Application.notifyScriptLoaded();还可以使用RegisterClientScriptBlock()方法直接在ScriptManager控件中注册脚本。ScriptManager.RegisterClientScriptBlock(Button1,typeof(Button),DateTime.Now.ToString(),"alert('welcome')",true);

12在母版页中使用ScriptManager如果在母版页中已添加了ScriptManager控件，则在内容页中就不能再添加ScriptManager控件。如果这时还要在内容页中使用ScriptManager控件的其他功能，可以通过添加ScriptManagerProxy控件实现。13在母版页中使用ScriptManager（续）<%@PageLanguage="C#"MasterPageFile="~/AjaxMasterPage.master"%><asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server"><asp:ScriptManagerProxyID="ScriptManagerProxy1"runat="server"><Scripts><asp:ScriptReferencePath="MyScript.js"/></Scripts></asp:ScriptManagerProxy></asp:Content>

1410.2.2UpdatePanel控件UpdatePanel控件是一个容器控件，该控件自身不会在页面上显示任何内容，主要作用是放置在其中的控件将具有局部刷新的功能。通过使用UpdatePanel控件，减少了整页回发时的屏幕闪烁并提高了网页交互性，改善了用户体验，同时也减少了在客户端和服务器之间传输的数据量。1512.2.2UpdatePanel控件（续）可以放置多个UpdatePanel控件。每个UpdatePanel控件可以指定独立的页面区域，实现独立的局部刷新功能。实际使用时将需要局部刷新的控件放在UpdatePanel控件内部的<ContentTemplate>子元素中。16<asp:AsyncPostBackTrigger>元素定义触发器

<asp:UpdatePanelID="UpdatePanel1"runat="server"><ContentTemplate>

……//添加需要刷新的控件

</ContentTemplate><Triggers><asp:AsyncPostBackTriggerControlID="Button1"EventName="Click"/></Triggers></asp:UpdatePanel>17使用内部按钮刷新UpdatePanel控件

内部按钮是指包含于UpdatePanel控件内的按钮。18使用内部按钮刷新UpdatePanel控件

单击命令按钮时会引发页面往返，包含于UpdatePanel控件中的Label控件和Button控件将被刷新。源程序：UpdatePanel1.aspx19程序说明默认情况下，UpdatePanel控件内的任何回发控件（如Button控件）都将导致异步回发并刷新面板的内容。Label1控件和Button1控件都包含在UpdatePanel1控件的<ContentTemplate>子元素中。当单击命令按钮时会引发页面往返，页面上的Label1控件和Button1控件都被刷新，而控件Label2没有刷新。

20使用外部按钮刷新UpdatePanel控件

外部按钮是指未包含在UpdatePanel控件内的按钮。若要在单击按钮时实现局部刷新功能，就需要在UpdatePanel控件的<Triggers>元素中进行触发器设置。21实例

使用外部按钮刷新UpdatePanel控件单击命令按钮时会引发页面往返，页面上的Label1控件将被刷新，而Button1控件不刷新。源程序：UpdatePanel2.aspx22为了避免不必要的数据回送，可以只将需要更新的控件放在UpdatePanel控件内部的<ContentTemplate>子元素中。而将引发回送事件的控件放在UpdatePanel控件外部。同时为UpdatePanel控件建立<Triggers>子元素标识的触发器。，本实例将返回一个较小的异步响应。23同一个页面使用多个UpdatePanel控件

是否导致异步回发并刷新UpdatePanel控件将根据属性UpdateMode的值而定。值为Always，则每次执行回发时都会刷新控件UpdatePanel的内容。回发包括来自其他UpdatePanel控件所包含的控件的异步回发，也包括来自UpdatePanel控件未包含的控件的回发。24UpdateMode的值为Conditional显式调用UpdatePanel控件的Update()方法时。UpdatePanel控件嵌套在另一个UpdatePanel控件中并且刷新父面板时。通过使用UpdatePanel控件的Triggers属性定义为触发器的控件导致回发时。在这种情况下，该控件显式触发UpdatePanel内容的刷新。将属性ChildrenAsTriggers值设置为true并且UpdatePanel控件的子控件导致回发时。25同一个页面使用多个UpdatePanel控件

当单击命令按钮“刷新面板1”时会引发页面往返，页面上的Label1和Button1控件被刷新。当单击命令按钮“刷新面板2”时会引发页面往返，页面上的Label2控件被刷新。源程序：MultiUpdatePanel.aspx2610.2.3Timer控件按定义的时间间隔引发页面往返。当经过属性Interval定义的时间间隔后，该JavaScript组件将从浏览器启动回发。此时，Timer控件的Tick事件将被触发。设置Interval属性可指定回发发生的频率，而设置Enabled属性可启用或禁用Timer控件。可以在网页上包含多个Timer控件。也可以将一个Timer控件用作网页中多个UpdatePanel控件的触发器关联控件。

2710.3ASP.NETAJAXControlToolkit

一系列支持AJAX并可以在ASP.NET应用程序中使用的扩展AJAX控件。/ajax下载。运行AjaxControlToolkit.vsi安装文件会安装新的VisualStudio项目模板。需要手工将扩展AJAX控件添加到VisualStudio2008工具箱中。28部分常用扩展AJAX控件表控件说明AlwaysVisibleControlExtender悬浮在固定位置的面板。CollapsiblePanelExtender可折叠的面板。DropShadowExtender让面板投射出阴影。HoverMenuExtender显示附加信息的面板。ModalPopupExtender网页中的模态对话框。RoundedCornersExtender为面板添加圆角效果。29部分常用扩展AJAX控件表（续）TextBoxWatermarkExtender带有水印效果的TextBox。ToggleButtonExtender用图片来代替CheckBoxSliderExtender网页上的滑动条。DropDownExtenderSharePoint样式的下拉菜单。ValidatorCalloutExtender更加醒目的Validator。ReorderList用鼠标拖动改变条目顺序。Rating样式丰富的评级功能。30部分常用扩展AJAX控件表（续）Accordion可折叠面板的集合。NoBot拒绝机器人程序。CascadingDropDown实现联动下拉框。ConfirmButtonExtender带有确认功能的按钮。DragPanelExtender可在页面中拖动的窗口。DynamicPopulateExtender动态UpdatePanel。FilteredTextBoxExtender防患于未然的用户输入验证。31部分常用扩展AJAX控件表（续）NumericUpDownExtender用上下箭头调整TextBox中的值。PagingBulletedListExtender在客户端索引、分页和排序的BulletedList。PasswordStrength即时检验密码的强度。PopupControlExtender帮助用户输入的面板。Res