Contrôler dynamiquement les animations d'un 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.

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

L'animation dans ce scénarion sera appliquée à l'affichage de l'heure actuelle. Cette information peut simplement être écrite dans un label en utilisant la méthode Page_Load() ou le code inline suivant :

<%= DateTime.Now.ToLongTimeString() %>

Un bouton pour mettre à jour l'heure est également ajouté :

<asp:Button ID="Button1" runat="server" Text="Update" />

Ce code est ensuite placé dans la section <ContentTemplate> d'un UpdatePanel. L'attribut UpdateMode du panel doit être mis sur Conditionnal afin que seul les triggers puissent mettre à jour le contenu du panel. Dans la section <Triggers> de l'UpdatePanel, un postback asynchrone est créé et relié à l'évènement Click du bouton. Ainsi, si l'utilisateur clic sur le bout, l'UpdatePanel est mis à jour. Voici le code utilisé :

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <%= DateTime.Now.ToLongTimeString() %>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

Pour finir, l'UpdatePanelAnimationExtender doit être configuré : mettre l'attribut TargetControlID à l'ID du panel, et définir une animation. Un effet de fondu va être utilisé. Votre code doit ressembler à ça :

<code langage="aspnet"><![CDATA[<ajaxToolkit:UpdatePanelAnimationExtender ID="upae" runat="server" TargetControlID="UpdatePanel1"> 
    <Animations>
        <OnUpdated>
            <FadeIn Duration="1.0" Fps="24" />
        </OnUpdated>
    </Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>

Vous pouvez lancer la page dans votre navigateur. Chaque fois que vous cliquerez sur le bouton, l'heure actuelle sera affichée dans le panel avec un effet de fondu pendant une seconde.