本演练描述如何对因异步回发而更新的 UpdatePanel 控件进行动画处理。
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 类 中名为 |
