基于ASPNET的Web应用开发单元8任务2：利用AJAX实现局部刷新课件

1、单元8：创建无刷新网页WEB 应 用 开 发WEB 应 用 开 发任务2：利用AJAX实现局部刷新WEB 应 用 开 发WEB 应 用 开 发主要内容ScriptManager控件1UpdatePanel控件2Timer控件3UpdateProgress控件4学习目标知识目标了解ASP.NET AJAX有哪些服务器控件掌握ScriptManager控件的使用掌握UpdatePanel控件的使用掌握Timer控件的使用掌握UpdateProgress控件的使用能力目标掌握AJAX服务器控件的使用技术应用背景在Web应用程序开发中，使用一定的AJAX技术能够提高应用程序的健壮性和用户体验的友好度。

2、使用AJAX技术能够实现页面无刷新和异步数据处理，让页面中其他的元素不会随着“客户端服务器”的通信再次刷新，这样不仅能够减少客户端服务器之间的带宽，也能够提高Web应用的速度。虽然AJAX包括诸多功能和特性，但是AJAX也增加了服务器负担，如果在服务器中大量使用AJAX控件的话，有可能造成服务器假死，因此掌握AJAX服务器控件的使用，熟练和高效的编写AJAX应用对 Web应用程序开发是非常有好处的。一、子任务1：局部刷新改变字体大小任务描述：建立一个ScriptManger控件和一个UpdatePanel控件用于AJAX应用开发。在UpdatePanel控件中，包含一个Label标签控件和一个

3、TextBox文本框控件，当文本框控件的内容被更改时，则会触发TextBox1_TextChanged事件更改标签字体大小。运行效果图如下： 输入字符大小调整字符大小二、基本知识与技能ASP.NET AJAX服务器控件在ASP.NET 2.0中，AJAX需要下载和安装，开发人员还需要将相应的DLL文件分类存放并配置Web.config文件才能够实现AJAX功能。而自ASP.NET 3.5起，AJAX已经成为.NET框架的原生功能。创建ASP.NET Web应用程序就能够直接使用AJAX功能 。ASP.NET AJAX提供了一些服务端的控件，通过这些控件，即使不懂任何的客户端AJAX Libra

4、ry也能在ASP.NET中创建简单的AJAX应用。这些核心的控件有：ScriptManager、UpdatePanel、UpdateProgress和Timer控件。二、基本知识与技能ASP.NET AJAX服务器控件实现定时调用，常用于定时到服务器上去提取相关的信息最重要的AJAX控件，用于定义页面更新区域和更新方式当页面异步更新正在进行时提示用户所有的使用AJAX的页面都必须放置一个ScriptManager控件当母版页上已有一个ScriptManager控件时，在子页面中使用二、基本知识与技能ScriptManager控件脚本控制器ScriptManager是AJAX程序运行的基础。它用

5、来处理页面上所有组件以及页面局部更新，生成相关客户端代理脚本以便能够在JavaScript中访问Web Service等。在支持ASP.NET AJAX的ASP.NET页面中，有且只能有一个ScriptManager控件来管理ASP.NET AJAX相关的控件和脚本。在AJAX应用中，ScriptManger控件基本不需要配置就能够使用。因为ScriptManger控件通常需要同其他AJAX控件搭配使用，在AJAX应用程序中，ScriptManger控件就相当于一个总指挥官，这个总指挥官只是进行指挥，而不进行实际的操作。三、子任务1的实施第一步：新建项目Task8-2，添加页面ScriptMa

6、nager.aspx第二步：设置页面布局第三步：编写后台代码第四步：运行程序，在浏览器查看页面运行效果三、子任务1的实施 字符的大小 (px) ScriptManager.aspx代码三、子任务1的实施namespace Task8-2 public partial class ScriptManager : System.Web.UI.Page protected void TextBox1_TextChanged(object sender, EventArgs e) try Label1.Font.Size = FontUnit.Point(int.Parse(TextBox1.Text

7、); catch (Exception err) Response.Write(错误); ScriptManager.aspx.cs代码四、子任务2：UpdatePanel局部更新方式任务说明：本例通过设置UpdatePanel的UpdateMode值的不同来说明UpdatePanel的局部更新方式。五、子任务3：UpdatePanel外部触发器六、基本知识与技能UpdatePanel控件局部更新是ASP.NET AJAX中最基本、最重要的技术。UpdatePanel可以用来创建丰富的局部更新Web应用程序，其强大之处在于不用编写任何客户端脚本就可以自动实现局部更新。UpdatePanel控件

8、是一个容器控件，该控件自身不会在页面上显示任何内容，主要作用是放置在其中的控件将具有局部刷新的功能。通过使用UpdatePanel控件，减少了整页回发时的屏幕闪烁并提高了网页交互性，改善了用户体验，同时也减少了在客户端和服务器之间传输的数据量。六、基本知识与技能UpdatePanel工作原理 UpdatePanel的工作依赖于ScriptManager服务端控件和客户端PageRequestManager类，当ScriptManager中允许页面局部更新时，它会以异步的方式回传给服务器，与传统的整页回传方式不同的是只有包含在UpdatePanel中的页面部分会被更新，在从服务端返回HTML之后

9、，PageRequestManager会通过操作DOM对象来替换需要更新的代码片段。六、基本知识与技能UpdatePanel常用子标签ContentTemplate子标签：在UpdatePanel控件的ContentTemplate标签中，开发人员能够放置任何ASP.NET控件，这些控件在ContentTemplate标签中，就能够实现页面无刷新的更新操作。Triggers子标签：局部更新的触发器，包括两种触发器：（1）AsyncPostBackTrigger异步回传触发器，可以实现异步更新。（2）PostBackTrigger不使用异步回传，仍然是传统的整页全部更新。六、基本知识与技能Upd

10、atePanel属性属性说明ChildrenAsTriggers当UpdateMode属性为Conditional时，UpdatePanel中的子控件的异步回送是否会引发UpdatePanle的更新。RenderMode表示UpdatePanel最终呈现的HTML元素。Block（默认）表示，Inline表示UpdateMode表示UpdatePanel的更新模式，有两个选项：Always和Conditional。当UpdateMode=Always时，只要页面上引发了异步回发（包括别的UpdatePanel内的控件），就会更新。当UpdateMode=Conditional时，是否更新取决于

11、UpdatePanel的设置。默认情况下，仅自己内部的控件引发的回发才会更新。七、子任务2的实施第一步：在项目Task8-2，添加页面UpdateModel.aspx第二步：设置页面布局,页面有两个UpdatePanel，每个UpdatePanel的UpdateModel属性不同，一个为Always,一个为Conditional， UpdatePanel里面加入相应控件。第三步：运行程序，在浏览器查看页面运行效果，比较不同UpdateModel模式下局部刷新的变化。七、子任务2的实施 局部更新方式 当UpdateMode=Always时，只要页面上引发了异步回发，就会更新。 当UpdateMo

12、de=Conditional时，是否更新取决于UpdatePanel的设置。 整页更新时间： UpdateModel.aspx代码七、子任务2的实施 UpdateMode:Always 局部可更新区域一的更新时间： UpdateMode:Conditional 局部可更新区域二的更新时间： UpdateModel.aspx代码八、子任务3的实施第一步：在项目Task8-2，添加页面UpdatePanelTrigger.aspx第二步：设置页面布局,并为UpdatePanel加上Trigger触发器标签。第三步：运行程序，在浏览器查看页面运行效果，比较加上Trigger后对局部刷新的影响。八、子

13、任务3的实施 外部触发器的定义与使用 当UpdateMode=Always时，只要页面上引发了异步回发，就会更新。 当UpdateMode=Conditional时，是否更新取决于UpdatePanel的设置。 整页更新时间： UpdateMode:Always 局部可更新区域一的更新时间： 由于UpdateMode是Always，所以任意一个异步回发都会导致自己被更新。 UpdatePanelTrigger.aspx代码八、子任务3的实施 UpdateMode=Conditional同时ChildrenAsTriggers=false 设置其外部触发器为UpdatePanel1里面的Butt

14、on 由于ChildrenAsTriggers=false，所以下面这个按钮会引发异步回发，但不会更新自己。 局部可更新区域二的更新时间： 由于其外部触发器为UpdatePanel1里面的Button 因此点击第一个UpdatePanel1里面的Button会更新此面板。 UpdatePanelTrigger.aspx代码九、子任务3的拓展网页上放置两个UpdatePanel，每个都放置有一个按钮，点击按钮时，更新对方的面板的时间显示而不更新自己所在的面板。十、子任务4：使用Timer控件十一、基本知识与技能Timer控件定时器控件Timer属于无人管理自动完成任务的一种特殊控件。Timer控

15、件的功能与大多数编程工具中提供的Timer一样都是按照特定的时间间隔执行指定的代码 。在ASP.NET AJAX中，AJAX提供了一个Timer控件，用于执行局部更新，使用Timer控件能够控制应用程序在一段时间内进行事件刷新。Timer控件初始代码如下所示。 开发人员能够配置Timer控件的属性进行相应事件的触发，Timer的属性如下所示。Enabled：是否启用Tick时间引发。Interval：设置Tick事件之间的连续时间，单位为毫秒。十一、基本知识与技能Timer控件Timer控件能够定时引发整个页面回送，当它与UpdatePanel控件搭配使用时，就可以定时引发异步回送并局部刷新U

16、pdatePanel控件的内容。Timer控件可以用在下列场合：定期更新一个或多个UpdatePanel控件的内容，而且不需要刷新整个页面。每当Timer控件引发回送时就运行服务器的代码。定时同步地把整个页面发送到服务器。Timer控件可以放在UpdatePanel控件内部，也可以放在UpdatePanel控件外部。Timer位于UpdatePanel之外时，要将Timer控件设定为UpdatePanel的异步更新触发器。十二、子任务4的实施第一步：在项目Task8-2，添加页面Timer.aspx第二步：设置页面布局,在页面加入Timer控件和其他相应控件，设置Timer控件的事件连续时间。

17、第三步：运行程序，在浏览器查看页面运行效果。小提示：Timer控件能够通过简单的方法让开发人员无需通过复杂的JavaScript实现Timer控制。但是从另一方面来讲，Timer控件会占用大量的服务器资源，如果不停的进行客户端服务器的信息通信操作，很容易造成服务器当机。十二、子任务4的实施 使用Timer控件定时取出服务器时间 服务器当前时间： Timer.aspx代码十三、子任务5：使用UpdateProgress控件 正在操作中操作完成后十四、基本知识与技能UpdateProgress控件使用ASP.NET AJAX常常会给用户造成疑惑。例如当用户进行评论或留言时，页面并没有刷新，而是进行

18、了局部刷新，这个时候用户很可能不清楚到底发生了什么，以至于用户很有可能会产生重复操作，甚至会产生非法操作。更新进度控件（UpdateProgress）就用于解决这个问题，当服务器端与客户端进行异步通信时，需要使用UpdateProgress控件告诉用户现在正在执行中。例如当用户进行评论时，当用户单击按钮提交表单，系统应该提示“正在提交中，请稍后”，这样就提供了便利从而让用户知道应用程序正在运行中。这种方法不仅能够让用户操作更少的出现错误，也能够提升用户体验的友好度。UpdateProgress控件的HTML代码如下所示： 正在操作中，请稍后 . 十四、基本知识与技能UpdateProgress

19、控件UpdateProgress控件的常用属性如下表所示：十四、基本知识与技能UpdateProgress控件UpdateProgress的显示有几种注意情况：如果UpdateProgress 在 UpdatePanel的 中，则会显示UpdateProgress中的提示信息。如果UpdateProgress在 UpdatePanel的 外，则需要指定AssociatedUpdatePanelID属性，但还有一个前提就是触发事件的Button控件必须在UpdatePanel的 中，否则就得用第三步骤解决。如果触发事件的Button控件和UpdateProgress都在UpdatePanel的 外的话，除了要指定AssociatedUpdatePanelID属性的UpdatePanel的ID外还要将如下代码加入页面中，例如：十五、子任务5的实施第一步：在项目Task8-2，添加页面UpdateProgress.aspx第二步：设置页面布局,在页面加入UpdateProgress控件和其他相应控件。第三步：编写后台相应代码。第四步：运行程序