對ASP.NET UpdatePanel控件進行動畫處理

本演練描述如何對因異步回發而更新的 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();