Microsoft AJAX Library 使您能够在客户端页生命周期中管理事件。可以通过处理客户端 PageRequestManager 类的事件来做到这一点。在本演练中，您将了解如何在页上的特定控件导致异步回发时使用 beginRequest 和 pageLoaded 事件来对 UpdatePanel 控件进行动画处理。beginRequest 事件在启动异步回发之前并在将此回发发送到服务器之前引发。pageLoaded 事件在回发和异步回发期间引发。在此事件过程中，可以访问有关因最新回发而被创建和更新的面板的信息。（对于回发，仅可以创建面板；而对于异步回发，则可以创建和更新面板。）
先决条件
若要在您自己的开发环境中实现这些过程，您需要：
Visual Studio 2008 或 Visual Web Developer 2008 速成版。
一个支持 AJAX 的 ASP.NET 网站。
创建对 UpdatePanel 控件进行动画处理的客户端脚本
在此过程中，将创建一个定义动画类的 ECMAScript（JavaScript 或 JScript）文件。该类包含对 HTML DOM 元素进行动画处理的方法。在浏览器中，要进行动画处理的 UpdatePanel 控件用一个 div 元素表示。
创建对 UpdatePanel 控件进行动画处理的客户端脚本
在支持 AJAX 的 ASP.NET 网站中，添加一个 JScript 文件并将其命名为 UpdatePanelAnimation.js。
将下面的 JavaScript 代码添加到该文件中：
Type.registerNamespace("ScriptLibrary");
ScriptLibrary.BorderAnimation = function(startColor, endColor, duration) {
this._startColor = startColor;
this._endColor = endColor;
this._duration = duration;
}
ScriptLibrary.BorderAnimation.prototype = {
animatePanel: function(panelElement) {
var s = panelElement.style;
var startColor = this._startColor;
var endColor = this._endColor;
s.borderColor = startColor;
window.setTimeout(
function() {{ s.borderColor = endColor; }},
this._duration
);
}
}
ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation', null);
var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('blue', 'gray', 1000);
var postbackElement;
Sys.Application.add_load(ApplicationLoadHandler);
function ApplicationLoadHandler() {
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
}
function beginRequest(sender, args) {
postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args) {
var updatedPanels = args.get_panelsUpdated();
if (typeof(postbackElement) === "undefined") {
return;
}
else if (postbackElement.id.toLowerCase().indexOf('animate') > -1) {
for (i=0; i < updatedPanels.length; i++) {
panelUpdatedAnimation.animatePanel(updatedPanels[i]);
}
}
}
if(typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();
代码执行下列任务：
通过调用 registerNamespace 方法为 ScriptLibrary 命名空间注册。
使用原型设计模式来定义 ScriptLibrary 命名空间中的 BorderAnimation 类。BorderAnimation 类中名为 animatePanel 的方法定义动画逻辑。
通过调用 registerClass 方法为 BorderAnimation 类注册。
创建 BorderAnimation 类的新实例。代码将三个值传递给类构造函数：动画颜色、默认颜色和显示动画颜色的毫秒数。
定义 Sys.Application 类的 load 事件的处理程序。此类又定义 PageRequestManager 类的 beginRequest 和 pageLoaded 事件的处理程序。
在 beginRequest 事件处理程序中，代码保存导致回发的元素的名称。
如果回发元素的 ID 包含单词“animate”，则代码将在 pageLoaded 事件处理程序中执行动画。
对 UpdatePanel 控件使用客户端脚本
在此过程中，将在包含 UpdatePanel 控件的页中使用动画脚本。当刷新面板的内容时，该脚本将对面板进行动画处理。
对 UpdatePanel 控件进行动画处理
创建新页并切换到“设计”视图。
如果页面上没有 ScriptManager 控件，请从“工具箱”的“AJAX Extensions”选项卡上拖动一个该控件到页面上。
在“工具箱”中，双击 UpdatePanel 控件以将 UpdatePanel 控件添加到页面中。
单击 UpdatePanel 控件内部，然后在工具箱的“标准”选项卡中双击 Button 控件两次，向 UpdatePanel 控件添加两个按钮。
将第一个按钮的 Text 属性设置为“以动画方式刷新”，并将其 ID 设置为 AnimateButton1。
将第二个按钮的 Text 属性设置为“不使用动画方式刷新”，并将其 ID 保留为默认值 Button2。
切换到“源”视图，然后将以下样式规则添加到页的 head 元素的 style 块中。
<style type="text/css">
#UpdatePanel1 {
width: 300px;
height: 100px;
border:solid 1px gray;
}
</style>
样式规则定义为 UpdatePanel 控件呈现的 div 元素的高度、宽度和边框。
在 asp:UpdatePanel 元素的 ContentTemplate 元素内部添加以下代码：
<%=DateTime.Now.ToString() %>
此代码显示标记的最新呈现时间。
切换到“设计”视图并选择 ScriptManager 控件。
在“属性”窗口中，选择“脚本”属性并单击省略号 (…) 按钮以显示“ScriptReference 集合编辑器”对话框。
单击“添加”以添加脚本引用。
将脚本引用的“路径”属性设置为 UpdatePanelAnimation.js，即先前创建的 JavaScript 文件。
使用 ScriptManager 的 Scripts 集合添加脚本引用可确保在 Microsoft AJAX Library 的代码加载之后加载相应的脚本。
单击“确定”关闭“ScriptReference 集合编辑器”对话框。
保存更改，然后按 Ctrl+F5 在浏览器中查看页面。
单击“刷新”按钮以刷新面板。
请注意，面板边框的颜色会短暂发生变化。
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>UpdatePanel Animation Example</title>
<style type="text/css">
#UpdatePanel1 {
width: 300px;
height: 100px;
border:solid 1px gray;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="UpdatePanelAnimation.js" />
</Scripts>
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<%=DateTime.Now.ToString() %>
<asp:Button ID="AnimateButton1" runat="server" Text="Refresh with Animation" />
<asp:Button ID="Button2" runat="server" Text="Refresh with no Animation" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
回顾
本演练演示了如何在刷新面板的内容时为 UpdatePanel 控件提供简单动画。JavaScript 文件中的代码对由 UpdatePanel 控件呈现的 HTML div 元素进行动画处理。将 JavaScript 文件添加到 ScriptManager 控件的 Scripts 集合中。在 PageRequestManager 类的 beginRequest 和 pageLoaded 事件的处理程序中定义脚本文件中的主逻辑