Contrôle dynamique des animations UpdatePanel (C#)

par Christian Wenz

Télécharger le PDF

Le contrôle Animation du ASP.NET AJAX Control Toolkit n’est pas seulement un contrôle, mais un framework entier permettant d’ajouter des animations à un contrôle. Pour le contenu d’un UpdatePanel, il existe un extendeur spécial qui s’appuie fortement sur l’infrastructure d’animation : UpdatePanelAnimation. Il peut également fonctionner avec les déclencheurs UpdatePanel.

Vue d’ensemble

Le contrôle Animation du ASP.NET AJAX Control Toolkit n’est pas seulement un contrôle, mais un framework entier permettant d’ajouter des animations à un contrôle. Pour le contenu d’un , il existe un extendeur spécial qui s’appuie fortement sur l’infrastructure d’animation UpdatePanel: UpdatePanelAnimation. Il peut également fonctionner avec UpdatePanel des déclencheurs.

Étapes

La première étape consiste, comme d’habitude, à inclure dans ScriptManager la page afin que la bibliothèque AJAX ASP.NET soit chargée et que control Toolkit puisse être utilisé :

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

L’animation dans ce scénario sera appliquée à un affichage de l’heure actuelle. Ces informations peuvent être écrites dans une étiquette à l’aide de la Page_Load() méthode , ou (par souci de simplicité) le code inline suivant est utilisé :

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

En outre, un bouton pour déclencher la mise à jour de l’heure est créé :

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

Ce code est ensuite placé dans la <ContentTemplate> section d’un UpdatePanel élément . L’attribut du UpdateMode panneau doit être défini sur "Conditional", car seuls les déclencheurs peuvent mettre à jour le contenu du panneau. Dans la <Triggers> section du UpdatePanel, un déclencheur de publication asynchrone est créé et lié à l’événement Click du bouton. Ainsi, si l’utilisateur clique sur le bouton, est UpdatePanel actualisé. Voici le balisage du UpdatePanel contrôle :

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

Enfin, le UpdatePanelAnimationExtender doit être configuré : définissez l’attribut TargetControlID sur l’ID du panneau et définissez une animation dans l’extendeur. La décoloration dans a du sens, ce qui crée une belle accentuation visuelle sur l’heure mise à jour. Le balisage de votre extendeur peut alors ressembler à ceci :

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

Exécutez le fichier dans le navigateur. Chaque fois que vous cliquez sur le bouton, l’heure actuelle s’affiche dans le panneau et s’efface toujours pendant une seconde.

L’heure actuelle est en train de s’estomper (Cliquez pour afficher l’image en taille réelle)

PrécédentSuivant