Animieren eines UpdatePanel-Steuerelements (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. In diesem Lernprogramm wird gezeigt, wie Sie eine solche Animation für ein UpdatePanel einrichten.

Ü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. In dieser Anleitung zeigen wir Ihnen, wie Sie eine solche Animation für eine UpdatePanel einrichten.

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 ein ASP.NET Wizard Web Control angewendet, das sich in einem UpdatePanel befindet. Drei (beliebige) Schritte bieten genügend Optionen zum Auslösen von Postbacks:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
 <ContentTemplate>
 <asp:Wizard ID="Wizard1" runat="server">
 <WizardSteps>
 <asp:WizardStep runat="server" StepType="Start" Title="Ready!">
 </asp:WizardStep>
 <asp:WizardStep runat="server" StepType="Step" Title="Set!">
 </asp:WizardStep>
 <asp:WizardStep runat="server" StepType="Finish" Title="Go!">
 </asp:WizardStep>
 </WizardSteps>
 </asp:Wizard>
 </ContentTemplate>
</asp:UpdatePanel>

Das für das UpdatePanelAnimationExtender Steuerelement erforderliche Markup ähnelt dem markup, das für das AnimationExtenderSteuerelement verwendet wird. TargetControlID Im Attribut stellen wir das IDUpdatePanel zu animierende Element bereit. Innerhalb des UpdatePanelAnimationExtender Steuerelements enthält das <Animations> Element XML-Markup für die Animationen. Es gibt jedoch einen Unterschied: Die Anzahl der Ereignisse und Ereignishandler ist im Vergleich zu AnimationExtender. Für UpdatePanels gibt es nur zwei davon.

• <OnUpdated> wenn UpdatePanel aktualisiert wurde
• <OnUpdating> Wenn das UpdatePanel mit der Aktualisierung beginnt

In diesem Szenario wird der neue Inhalt des UpdatePanel (nach dem Postback) eingeblendet. Dies ist das erforderliche Markup dafür:

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

Jedes Mal, wenn ein Postback innerhalb des UpdatePanel auftritt, werden die neuen Inhalte des Panels reibungslos eingeblendet.

Der nächste Schritt des Assistenten wird eingeblendent (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)