Freigeben über

Exemplarische Vorgehensweise: Animieren von ASP.NET-UpdatePanel-Steuerelementen

  • Artikel

Aktualisiert: November 2007

In dieser exemplarischen Vorgehensweise wird erläutert, wie Sie ein UpdatePanel-Steuerelement animieren, das als Reaktion auf ein asynchrones Postback aktualisiert wurde.

Mit der Microsoft AJAX Library können Sie Ereignisse im Lebenszyklus der Clientseite verwalten. Hierzu verarbeiten Sie Ereignisse der PageRequestManager-Clientklasse. In dieser exemplarischen Vorgehensweise erfahren Sie, wie Sie das beginRequest-Ereignis und das pageLoaded-Ereignis verwenden, um ein UpdatePanel-Steuerelement zu animieren, wenn ein bestimmtes Steuerelement auf der Seite ein asynchrones Postback verursacht. Das beginRequest-Ereignis wird vor dem Starten eines asynchronen Postbacks und vor dem Senden des Postbacks an den Server ausgelöst. Das pageLoaded-Ereignis wird bei Postbacks und asynchronen Postbacks ausgelöst. Sie können während dieses Ereignisses auf Informationen zugreifen, welche Bereiche als Reaktion auf das letzte Postback erstellt und aktualisiert wurden. (Bei Postbacks werden Bereiche nur erstellt, bei asynchronen Postbacks können Bereiche jedoch sowohl erstellt als auch aktualisiert werden.)

Vorbereitungsmaßnahmen

Zur Implementierung dieser Prozeduren in Ihrer eigenen Entwicklungsumgebung ist Folgendes erforderlich:

  • Visual Studio 2008 oder Visual Web Developer 2008 Express Edition.

  • Eine AJAX-fähige ASP.NET-Website.

Erstellen von Clientskript zum Animieren eines UpdatePanel-Steuerelements

In diesem Verfahren erstellen Sie eine ECMAScript-Datei (JavaScript oder JScript), in der eine Animationsklasse definiert wird. Die Klasse enthält eine Methode, die ein HTML-DOM-Element animiert. Im Browser wird das UpdatePanel-Steuerelement, dass Sie animieren möchten, als div-Element dargestellt.

So erstellen Sie Clientskript zum Animieren eines UpdatePanel-Steuerelements

  1. Fügen Sie der AJAX-fähigen ASP.NET-Website eine JScript-Datei hinzu, und nennen Sie diese UpdatePanelAnimation.js.

  2. Fügen Sie der Datei den folgenden JavaScript-Code hinzu:

    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();

    Durch den Code werden die folgenden Aufgaben ausgeführt:

    • Registriert den ScriptLibrary-Namespace durch Aufrufen der registerNamespace-Methode.

    • Definiert die BorderAnimation-Klasse im ScriptLibrary-Namespace mithilfe des Prototypentwurfsmusters. Die Animationslogik wird von der animatePanel-Methode der BorderAnimation-Klasse definiert.

    • Registriert die BorderAnimation-Klasse durch Aufrufen der registerClass-Methode.

    • Erstellt eine neue Instanz der BorderAnimation-Klasse. Der Code übergibt drei Werte an den Klassenkonstruktor: eine Animationsfarbe, eine Standardfarbe und die Anzahl an Millisekunden, die die Animationsfarbe angezeigt wird.

    • Definiert einen Handler für das load-Ereignis der Sys.Application-Klasse. Diese Klasse definiert ihrerseits Handler für das beginRequest-Ereignis und das pageLoaded-Ereignis der PageRequestManager-Klasse.

    • Im beginRequest-Ereignishandler wird der Name des Elements gespeichert, das das Postback verursacht hat.

    • Wenn die ID des Postbackelements das Wort "animate" enthält, wird vom Code die Animation im pageLoaded-Ereignishandler durchgeführt.

Verwenden des Clientskripts mit einem UpdatePanel-Steuerelement

In diesem Verfahren verwenden Sie das Animationsskript auf einer Seite, die ein UpdatePanel-Steuerelement enthält. Der Bereich wird vom Skript animiert, wenn Inhalte des Bereichs aktualisiert werden.

So animieren Sie ein UpdatePanel-Steuerelement

  1. Erstellen Sie eine neue Seite, und wechseln Sie in die Entwurfsansicht.

  2. Wenn sich auf der Seite noch kein ScriptManager-Steuerelement befindet, ziehen Sie eines von der Registerkarte AJAX-Erweiterungen der Toolbox auf die Seite.

  3. Doppelklicken Sie in der Toolbox auf das UpdatePanel-Steuerelement, um der Seite ein UpdatePanel-Steuerelement hinzuzufügen.

  4. Klicken Sie in das UpdatePanel-Steuerelement, und doppelklicken Sie dann in der Toolbox auf der Registerkarte Standard zweimal auf das Button-Steuerelement, um dem UpdatePanel-Steuerelement zwei Schaltflächen hinzuzufügen.

  5. Legen Sie die Text-Eigenschaft der ersten Schaltfläche auf Aktualisieren mit Animation und die ID auf AnimateButton1 fest.

  6. Legen Sie die Text-Eigenschaft der zweiten Schaltfläche auf Aktualisieren ohne Animation fest. Übernehmen Sie für die ID den Standardwert Button2.

  7. Wechseln Sie in die Quellansicht, und fügen Sie der Seite in einem style-Block des head-Elements die folgenden Stilregeln hinzu:

    <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>

    Die Stilregeln definieren die Höhe, die Breite und den Rahmen des div-Elements, das für das UpdatePanel-Steuerelement gerendert wird.

  8. Fügen Sie im ContentTemplate-Element des asp:UpdatePanel-Elements den folgenden Code hinzu:

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

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

    Der Code zeigt den Zeitpunkt an, an dem das Markup zuletzt gerendert wurde.

  9. Wechseln Sie in die Entwurfsansicht, und wählen Sie das ScriptManager-Steuerelement aus.

  10. Wählen Sie im Fenster Eigenschaften die Eigenschaft Skripts aus, und klicken Sie auf die Schaltfläche mit den Auslassungszeichen (…), damit das Dialogfeld ScriptReference-Auflistungs-Editor angezeigt wird.

  11. Klicken Sie auf Hinzufügen, um einen Skriptverweis hinzuzufügen.

  12. Legen Sie die Pfad-Eigenschaft des Skriptverweises auf die zuvor erstellte JavaScript-Datei UpdatePanelAnimation.js fest.

    Sie fügen einen Skriptverweis mithilfe der Scripts-Auflistung von ScriptManager hinzu, um sicherzustellen, dass das Skript nach dem Laden des Codes für die Microsoft AJAX Library geladen wird.

  13. Klicken Sie zum Schließen des Dialogfelds ScriptReference-Auflistungs-Editor auf OK.

  14. Speichern Sie die Änderungen, und drücken Sie STRG+F5, um die Seite in einem Browser anzuzeigen.

  15. Klicken Sie auf die Schaltfläche Aktualisieren, um den Bereich zu aktualisieren.

    Beachten Sie, dass sich die Farbe des Rahmens um den Bereich kurz ändert.

    <%@ 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>

Zusammenfassung

In dieser exemplarischen Vorgehensweise wurde erläutert, wie Sie für ein UpdatePanel-Steuerelement eine einfache Animation anzeigen, wenn der Inhalt des Bereichs aktualisiert wird. Durch den Code in einer JavaScript-Datei wird das HTML-div-Element animiert, das vom UpdatePanel-Steuerelement gerendert wird. Die JavaScript-Datei wird der Scripts-Auflistung des ScriptManager-Steuerelements hinzugefügt. In der Skriptdatei wird die Hauptlogik in den Handlern für das beginRequest-Ereignis und das pageLoaded-Ereignis der PageRequestManager-Klasse definiert.

Siehe auch

Konzepte

Arbeiten mit PageRequestManager-Ereignissen

Referenz

Sys.WebForms.PageRequestManager-Klasse

Sys.WebForms.PageLoadedEventArgs-Klasse