Dynamisches Steuern von UpdatePanel-Animationen (VB)

von Christian Wenz

PDF herunterladen

Das Animationssteuerelement im ASP.NET AJAX Control Toolkit ist nicht nur ein Steuerelement, sondern ein ganzes Framework zum Hinzufügen von Animationen zu einem Steuerelement. Für den Inhalt eines UpdatePanel-Elements gibt es einen speziellen Extender, der stark vom Animationsframework abhängig ist: UpdatePanelAnimation. Es kann auch mit UpdatePanel-Triggern zusammenarbeiten.

Überblick

Das Animationssteuerelement im ASP.NET AJAX Control Toolkit ist nicht nur ein Steuerelement, sondern ein ganzes Framework zum Hinzufügen von Animationen zu einem Steuerelement. Für den Inhalt eines UpdatePanelist ein spezieller Extender vorhanden, der stark vom Animationsframework abhängig ist: UpdatePanelAnimation. Es kann auch mit UpdatePanel Triggern zusammenarbeiten.

Schritte

Der erste Schritt besteht wie üblich darin, die ScriptManager in die Seite aufzunehmen, damit die ASP.NET AJAX-Bibliothek geladen wird und das Control Toolkit verwendet werden kann:

<asp:ScriptManager ID="asm" runat="server" />

Die Animation in diesem Szenario wird auf eine Anzeige der aktuellen Zeit angewendet. Diese Informationen können mit der Page_Load() -Methode in eine Bezeichnung geschrieben werden, oder (der Einfachheit halber) wird der folgende Inlinecode verwendet:

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

Außerdem wird eine Schaltfläche zum Auslösen der Aktualisierung der Uhrzeit erstellt:

<asp:Button ID="Button1" runat="server" Text="Update" />

Dieser Code wird dann in den <ContentTemplate> Abschnitt eines UpdatePanel Elements eingefügt. Das Attribut des Bereichs UpdateMode muss auf "Conditional"festgelegt werden, da nur Trigger den Inhalt des Bereichs aktualisieren können. <Triggers> Im Abschnitt von UpdatePanelwird ein asynchroner Postbacktrigger erstellt und an das Click Ereignis der Schaltfläche gebunden. Wenn der Benutzer also auf die Schaltfläche klickt, wird die UpdatePanel aktualisiert. Hier sehen Sie das Markup für das UpdatePanel Steuerelement:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
 <ContentTemplate>
 <%= DateTime.Now.ToLongTimeString() %>
 </ContentTemplate>
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
 </Triggers>
</asp:UpdatePanel>

Schließlich muss konfiguriert UpdatePanelAnimationExtender werden: Legen Sie das TargetControlID Attribut auf die ID des Bereichs fest, und definieren Sie eine Animation im Extender. Das Ausblenden ist sinnvoll, was eine schöne visuelle Betonung auf die aktualisierte Zeit schafft. Ihr Extendermarkup kann dann wie folgt aussehen:

<ajaxToolkit:UpdatePanelAnimationExtender ID="upae" runat="server" TargetControlID="UpdatePanel1">
 <Animations>
 <OnUpdated>
 <FadeIn Duration="1.0" Fps="24" />
 </OnUpdated>
 </Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>

Führen Sie die Datei im Browser aus. Wenn Sie auf die Schaltfläche klicken, wird die aktuelle Zeit im Bereich angezeigt, die immer für die Dauer einer Sekunde verblasst.

Die aktuelle Zeit verblasst (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Zurück