Animer les contrôle UpdatePanel

Par Christian Wenz
 Benjamin Roux (Traducteur) (Retour aux articles)
 

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

               Version PDF (Miroir)   Version hors-ligne (Miroir)

1. Traduction
2. Introduction
3. Etapes


1. Traduction

Cet article est la traduction la plus fidèle possible de l'article original : en 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.



               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.1!Valid CSS!

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. Cette page est déposée.

 
 
Developpez.com

Nous contacter

Participez

Informations légales

 
Services

Forum Microsoft DotNET

Blogs

Hébergement

 
Partenaires

Hébergement Web