对ASP.NET UpdatePanel控件进行动画处理

对ASP.NET UpdatePanel控件进行动画处理2011-08-01 MSDN 本演练描述如何对因异步回发而更新的 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（）;