Partager via

Animation d’un contrôle UpdatePanel (C#)

  • Article

par Christian Wenz

Télécharger le PDF

Le contrôle Animation du ASP.NET AJAX Control Toolkit n’est pas seulement un contrôle, mais un framework entier permettant d’ajouter des animations à un contrôle. Pour le contenu d’un UpdatePanel, il existe un extendeur spécial qui s’appuie fortement sur l’infrastructure d’animation : UpdatePanelAnimation. Ce tutoriel montre comment configurer une telle animation pour un UpdatePanel.

Vue d’ensemble

Le contrôle Animation du ASP.NET AJAX Control Toolkit n’est pas seulement un contrôle, mais un framework entier permettant d’ajouter des animations à un contrôle. Pour le contenu d’un , il existe un extendeur spécial qui s’appuie fortement sur l’infrastructure d’animation UpdatePanel: UpdatePanelAnimation. Ce tutoriel montre comment configurer une telle animation pour un UpdatePanel.

Étapes

La première étape consiste, comme d’habitude, à inclure dans ScriptManager la page afin que la bibliothèque AJAX ASP.NET soit chargée et que control Toolkit puisse être utilisé :

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

L’animation dans ce scénario sera appliquée à un contrôle web ASP.NET Wizard résidant dans un UpdatePanel. Trois étapes (arbitraires) fournissent suffisamment d’options pour déclencher des publications :

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

Le balisage nécessaire pour le UpdatePanelAnimationExtender contrôle est assez similaire au balisage utilisé pour le AnimationExtender. Dans l’attributTargetControlID, nous fournissons le UpdatePanelID du à animer ; dans le UpdatePanelAnimationExtender contrôle, l’élément contient le <Animations> balisage XML pour les animations. Toutefois, il existe une différence : la quantité d’événements et de gestionnaires d’événements est limitée par rapport à AnimationExtender. Pour UpdatePanels, seules deux d’entre elles existent :

  • <OnUpdated> lorsque le UpdatePanel a été mis à jour
  • <OnUpdating> quand UpdatePanel démarre la mise à jour

Dans ce scénario, le nouveau contenu du UpdatePanel (après la publication) est fondu en fondu. Il s’agit du balisage nécessaire pour cela :

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

Désormais, chaque fois qu’une publication se produit dans UpdatePanel, le nouveau contenu du panneau s’estompe en douceur.

L’étape suivante de l’Assistant est en train de s’estomper dans

L’étape suivante de l’Assistant s’efface (Cliquez pour afficher l’image en taille réelle)

PrécédentSuivant