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 ist ein spezieller Extender vorhanden, der stark auf dem Animationsframework basiert: UpdatePanelAnimation. Sie kann auch mit UpdatePanel-Triggern zusammenarbeiten.

Übersicht

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 gibt es einen speziellen Extender, der stark auf dem Animationsframework beruht: UpdatePanelAnimation. Sie kann auch mit UpdatePanel Triggern zusammenarbeiten.

Schritte

Der erste Schritt besteht wie üblich darin, die ScriptManager in die Seite einzufügen, 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 Uhrzeit angewendet. Diese Informationen können mithilfe der Page_Load() Methode in eine Bezeichnung geschrieben werden, oder (aus Gründen der Einfachheit) wird der folgende Inlinecode verwendet:

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

Außerdem wird eine Schaltfläche zum Auslösen der Aktualisierung der Zeit 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 UpdateMode Panels muss auf festgelegt "Conditional"werden, da nur Trigger den Inhalt des Panels aktualisieren können. Im <Triggers> Abschnitt des UpdatePanel Bereichs wird ein asynchroner Postback-Trigger 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 die UpdatePanelAnimationExtender Konfiguration erfolgen: Legen Sie das TargetControlID Attribut auf die ID des Panels fest, und definieren Sie eine Animation innerhalb des Extenders. Das Einblenden macht Sinn, da es die aktualisierte Zeit visuell ansprechend hervorhebt. Ihr Extender-Markup sieht dann wie folgt aus:

<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. Immer wenn Sie auf die Schaltfläche klicken, wird die aktuelle Uhrzeit im Bereich angezeigt, wobei sie immer für die Dauer einer Sekunde eingeblendet wird.

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