共用方式為

逐步解說：建立 ASP.NET UpdatePanel 控制項動畫

更新：2007 年 11 月

本逐步解說將說明如何以動畫方式顯示因為非同步回傳而更新的 UpdatePanel 控制項。

Microsoft AJAX Library 可讓您管理用戶端頁面生命週期中的事件。透過處理用戶端 PageRequestManager 類別的事件即可達到此目的在本逐步解說中，您將會看到如何使用 beginRequest 與 pageLoaded 事件，在頁面上的特定控制項導致非同步回傳時以動畫顯示 UpdatePanel 控制項。beginRequest 事件會在非同步回傳開始之前以及回傳傳送到伺服器之前引發。pageLoaded 事件會在回傳期間與非同步回傳期間引發。在此事件期間，您可以存取由於最近的回傳而建立與更新之面板的相關資訊。(對於回傳，只會建立面板，但對於非同步回傳，則可建立與更新面板)。

必要條件

若要在自己的開發環境中實作這些程序，您需要：

  • Visual Studio 2008 或 Visual Web Developer 2008 Express 版。

  • 具備 AJAX 能力的 ASP.NET 網站。

建立以動畫方式顯示 UpdatePanel 控制項的用戶端指令碼

在此程序中，您將會建立 ECMAScript (JavaScript 或 JScript) 檔案，此檔案定義動畫類別。該類別中含有可讓 HTML DOM 項目以動畫方式顯示的方法。在瀏覽器中，您要以動畫方式顯示的 UpdatePanel 控制項會以 div 項目表示。

建立以動畫方式顯示 UpdatePanel 控制項的用戶端指令碼

  1. 在具備 AJAX 能力的 ASP.NET 網站中，加入 JScript 檔案並將它命名為 UpdatePanelAnimation.js。

  2. 將下列 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();

    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 命名空間。

    • 使用原型 (Prototype) 設計模式來定義 ScriptLibrary 命名空間中的 BorderAnimation 類別。BorderAnimation 類別中名為 animatePanel 的方法會定義動畫邏輯。

    • 呼叫 registerClass 方法來註冊 BorderAnimation 類別。

    • 建立 BorderAnimation 類別的新執行個體。程式碼會傳遞三個值到類別建構函式：動畫色彩、預設色彩，以及要顯示動畫色彩的時間 (以毫秒為單位)。

    • 定義 Sys.Application 類別之 load 事件的處理常式。此類別接著會定義 PageRequestManager 類別之 beginRequest 與 pageLoaded 事件的處理常式。

    • 在 beginRequest 事件處理常式中，程式碼會儲存導致回傳之項目的名稱。

    • 如果傳回項目的 ID 包含 "animate" 這個字，則程式碼會執行 pageLoaded 事件處理常式中的動畫。

搭配 UpdatePanel 控制項使用用戶端指令碼

在此程序中，您將會在包含 UpdatePanel 控制項的頁面中使用動畫指令碼。重新整理面板的內容時，指令碼會以動畫方式顯示面板。

以動畫方式顯示 UpdatePanel 控制項

  1. 建立新頁面並切換至 [設計] 檢視。

  2. 如果頁面上沒有 ScriptManager 控制項，請從 [工具箱] 的 [AJAX 擴充功能] 索引標籤拖曳該控制項。

  3. 在 [工具箱] 中，按兩下 UpdatePanel 控制項以將 UpdatePanel 控制項加入至頁面。

  4. 按一下 UpdatePanel 控制項內部，然後在工具箱的 [標準] 索引標籤中，按兩下 Button 控制項兩次，以加入兩個按鈕至 UpdatePanel 控制項。

  5. 將第一個按鈕的 Text 屬性設定為以動畫重新整理，並將其 ID 設定為 AnimateButton1。

  6. 將第二個按鈕的 Text 屬性設定為以動畫重新整理。將其 ID 保留為預設值 Button2。

  7. 切換至 [原始碼] 檢視，並在網頁上 head 項目裡的 style 區塊中，加入下列樣式規則：

    <style type="text/css">
#UpdatePanel1 {
  width: 300px;
  height: 100px;
  border:solid 1px gray;
}    
</style>

    <style type="text/css">
#UpdatePanel1 {
  width: 300px;
  height: 100px;
  border:solid 1px gray;
}    
</style>

    樣式規則會定義為 UpdatePanel 控制項呈現之 div 項目的高度、寬度與框線。

  8. 將下列程式碼加入至 asp:UpdatePanel 項目的 ContentTemplate 項目內：

    <%=DateTime.Now.ToString() %>

    <%=DateTime.Now.ToString() %>

    程式碼會顯示最近呈現標記的時間。

  9. 切換至 [設計] 檢視，然後選取 ScriptManager 控制項。

  10. 在 [屬性] 視窗中，選取 [Scripts] 屬性，然後按一下省略符號 (…) 按鈕以顯示 [指令碼參考集合編輯器] 對話方塊。

  11. 按一下 [加入] 以加入指令碼參考。

  12. 將指令碼參考的 [Path] 屬性設定為 UpdatePanelAnimation.js，這是您先前建立的 JavaScript 檔案。

    您必須使用 ScriptManager 的 Scripts 集合加入指令碼參考，以確保指令碼會在載入 Microsoft AJAX Library 的程式碼之後載入。

  13. 按一下 [確定] 關閉 [指令碼參考集合編輯器] 對話方塊。

  14. 儲存變更，然後按 CTRL+F5 在瀏覽器中檢視頁面。

  15. 按一下 [重新整理] 按鈕以重新整理面板。

    請注意，面板框線的色彩會短暫變更。

    <%@ 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" >
    <title>UpdatePanel Animation Example</title>
    <style type="text/css">
    #UpdatePanel1 {
      width: 300px;
      height: 100px;
      border:solid 1px gray;
    }    
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        <Scripts>
        <asp:ScriptReference Path="UpdatePanelAnimation.js" />
        </Scripts>
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <%=DateTime.Now.ToString() %>
                <asp:Button ID="AnimateButton1"  Text="Refresh with Animation" />
                <asp:Button ID="Button2"  Text="Refresh with no Animation" />
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </form>
</body>
</html>

    <%@ Page Language="C#" %>

<!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" >
    <title>UpdatePanel Animation Example</title>
    <style type="text/css">
    #UpdatePanel1 {
      width: 300px;
      height: 100px;
      border:solid 1px gray;
    }    
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        <Scripts>
        <asp:ScriptReference Path="UpdatePanelAnimation.js" />
        </Scripts>
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <%=DateTime.Now.ToString() %>
                <asp:Button ID="AnimateButton1"  Text="Refresh with Animation" />
                <asp:Button ID="Button2"  Text="Refresh with no Animation" />
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </form>
</body>
</html>

檢閱

這個逐步解說說明在重新整理面板的內容時，如何為 UpdatePanel 控制項提供簡單的動畫。JavaScript 檔案中的程式碼會以動畫方式顯示由 UpdatePanel 控制項呈現的 HTML div 項目。JavaScript 檔案會加入至 ScriptManager 控制項的 Scripts 集合。指令碼檔案中的主要邏輯定義在 PageRequestManager 類別之 beginRequest 與 pageLoaded 事件的處理常式中。

請參閱

概念

使用 PageRequestManager 事件

參考

Sys.WebForms.PageRequestManager 類別

Sys.WebForms.PageLoadedEventArgs 類別

  • Last updated on