Share via

Animieren eines UpdatePanel-Steuerelements (VB)

  • Artikel

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. In diesem Tutorial erfahren Sie, wie Sie eine solche Animation für ein UpdatePanel einrichten.

Ü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. In diesem Tutorial wird gezeigt, wie Sie eine solche Animation für eine UpdatePaneleinrichten.

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 ein ASP.NET Wizard Websteuerelement angewendet, das sich in einem UpdatePanelbefindet. Drei (beliebige) Schritte bieten genügend Optionen, um Postbacks auszulösen:

<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 verwendet AnimationExtenderwird. TargetControlID Im -Attribut geben wir den ID von UpdatePanel an, um zu animieren; innerhalb des UpdatePanelAnimationExtender -Steuerelements enthält das <Animations> Element XML-Markup für die Animation(en). Es gibt jedoch einen Unterschied: Die Anzahl von Ereignissen und Ereignishandlern ist im Vergleich zu AnimationExtenderbegrenzt. Für UpdatePanelssind nur zwei davon vorhanden:

  • <OnUpdated> wenn das UpdatePanel aktualisiert wurde
  • <OnUpdating> wenn das UpdatePanel mit dem Aktualisieren beginnt

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

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

Wenn nun ein Postback innerhalb des UpdatePanels erfolgt, verblasst der neue Inhalt des Bereichs reibungslos.

Der nächste Schritt des Assistenten verblasst

Der nächste Schritt des Assistenten verblasst (Klicken Sie hier, um das bild in voller Größe anzuzeigen).

ZurückWeiter