Language

Dynamically Controlling UpdatePanel Animations (VB)

By Christian Wenz|

Download Code or Download PDF

The Animation control in the ASP.NET AJAX Control Toolkit is not just a control but a whole framework to add animations to a control. For the contents of an UpdatePanel, a special extender exists that relies heavily on the animation framework: UpdatePanelAnimation. It can also work together with UpdatePanel triggers.

Overview

The Animation control in the ASP.NET AJAX Control Toolkit is not just a control but a whole framework to add animations to a control. For the contents of an UpdatePanel, a special extender exists that relies heavily on the animation framework: UpdatePanelAnimation. It can also work together with UpdatePanel triggers.

Steps

The first step is as usual to include the ScriptManager in the page so that the ASP.NET AJAX library is loaded and the Control Toolkit can be used:

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

The animation in this scenario will be applied to a display of the current time. This information can be written into a label using the Page_Load() method, or (for the sake of simplicity) the following inline code is used:

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

Also, a button to trigger updating the time is created:

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

This code is then put into the <ContentTemplate> section of an UpdatePanel element. The panel's UpdateMode attribute must be set to "Conditional", since only triggers may update the panel's contents. In the <Triggers> section of the UpdatePanel, an asynchronous postback trigger is created and tied to the Click event of the button. Thus, if the user clicks on the button, the UpdatePanel is refreshed. Here is the markup for the UpdatePanel control:

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

Finally, the UpdatePanelAnimationExtender must be configured: Set the TargetControlID attribute to the ID of the panel, and define an animation within the extender. Fading in makes sense, which creates a nice visual emphasis on the updated time. Your extender markup may then look like this:

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

Run the file in the browser. Whenever you click on the button, the current time is shown in the panel, always fading in for the duration of one second.

The current time is fading in (Click to view full-size image)

This article was originally created on June 2, 2008

Author Information

Christian Wenz

Christian Wenz – Christian Wenz is an author, trainer, and consultant. His main focus of working and writing is on web technologies and security. Christian has written or co-written over 100 books for various publishers. He works with both open source and closed source web technologies. This leads to the unusual situation that he has both been awarded a Microsoft MVP for ASP/ASP.NET and is listed in Zend's Who is Who of PHP. He is also listed in Mozilla's credits (about:credits) and is considered an expert in browser-agnostic JavaScript.