Animer les contrôle UpdatePanel

| Christian Wenz | Benjamin Roux (Traducteur) |

Dans cet article vous allez voir comment animer un contrôle de type UpdatePanel

- Titre : Animer les contrôle UpdatePanel

- Auteurs : Christian Wenz, Benjamin Roux (Traducteur)

- Parution : 18 avril 2013

- Licence : Copyright ® 2009 Equipe Dotnet. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- 1. Traduction

- 2. Introduction

- 3. Etapes

1 - Traduction

Cet article est la traduction la plus fidèle possible de l'article original : Animating an UpdatePanel Control

2 - Introduction

Le contrôle Animation dans le ASP.NET AJAX Control Toolkit n'est pas simplement un contrôle, mais un framework entier pour ajouter des animations à un contrôle. Pour le contenu d'un UpdatePanel, un Extender spécial existe qui le relie fortement au framework d'animation : UpdatePanelAnimation. Ce tutoriel montre comment réaliser une animation pour un UpdatePanel.

3 - Etapes

La première étape est - comme toujours - d'inclure un ScriptManager dans la page afin de charger la librairie ASP.NET AJAX.

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

Dans ce scénario, l'animation sera appliquée à un contrôle de type Wizard se trouvant dans un UpdatePanel. Trois étapes fournissent assez de postback.

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

La balise nécessaire pour le contrôle UpdatePanelAnimationExtender est assez similaire à celle utilisée pour le AnimatioNExtender. Dans l'attribut TargetControlID, nous fournissons l'ID de l'UpdatePanel à animer ; dans le contrôle UpdatePanelAnimationExtender, l'élément <Animations> contient des balises XML pour les animations. En revanche il y a une différence : le nombre d'évènemets est limité en comparaison avec l'AnimationExtender. Pour l'UpdatePanel, seulement deux sont présents.

- <OnUpdated> - quand l'UpdatePanel a été mis à jour

- <OnUpdating> - quand l'UpdatePanel est mis à jour

Dans ce scénario, le contenu de l'UpdatePanel (après le postback) fera un effet de fondu. Le code nécessaire est le suivant :

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

A présent, lorsqu'un postback est fait dans l'UpdatePanel, le nouveau contenu apparaitra avec un effet de fondu.