Animer les contrôle UpdatePanel

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

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.

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.