Contrôle dynamique des animations UpdatePanel (VB)

par Christian Wenz

Télécharger le PDF

Le contrôle Animation dans le ASP.NET ajax Control Toolkit n’est pas seulement un contrôle, mais un framework entier pour 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 des déclencheurs UpdatePanel.

Vue d’ensemble

Le contrôle Animation dans le ASP.NET ajax Control Toolkit n’est pas seulement un contrôle, mais un framework entier pour 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 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 le Kit de ressources de contrôle 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. Par conséquent, si l’utilisateur clique sur le bouton, le UpdatePanel est 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’extension. La décoloration dans a du sens, ce qui crée un bel accent visuel 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, toujours s’estompant pendant une seconde.

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

Précédent