Animer les contrôle UpdatePanel

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

Article lu   fois.

Les deux auteurs

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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.

 
Sélectionnez
<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.

 
Sélectionnez
<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 :

 
Sélectionnez
<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.

Image non disponible

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

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. Droits de diffusion permanents accordés à Developpez LLC.