Language

Sign In|Join

/////Dynamically Controlling UpdatePanel Animations

Dynamically Controlling UpdatePanel Animations (VB)

By |

DOWNLOAD ASSETS: Code or 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

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

Christian Wenz

By 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.

  1.  You're ViewingDynamically Controlling UpdatePanel Animations (VB)

Comments (0) RSS Feed

You must be logged in to leave a comment.

This is a Multi-Part Article

Now viewing article 26 of 26

  1. Adding Animation to a Control (C#)
  2. Executing Several Animations at Same Time (C#)
  3. Executing Several Animations after Each Other (C#)
  4. Animation Depending On a Condition (C#)
  5. Picking One Animation Out Of a List (C#)
  6. Animating in Response To User Interaction (C#)
  7. Disabling Actions during Animation (C#)
  8. Triggering an Animation in another Control (C#)
  9. Modifying Animations From Server Side (C#)
  10. Executing Animations Using Client-Side Code (C#)
  11. Changing an Animation Using Client-Side Code (C#)
  12. Animating an UpdatePanel Control (C#)
  13. Dynamically Controlling UpdatePanel Animations (C#)
  14. Adding Animation to a Control (VB)
  15. Executing Several Animations at Same Time (VB)
  16. Executing Several Animations after Each Other (VB)
  17. Animation Depending On a Condition (VB)
  18. Picking One Animation Out Of a List (VB)
  19. Animating in Response To User Interaction (VB)
  20. Disabling Actions during Animation (VB)
  21. Triggering an Animation in another Control (VB)
  22. Modifying Animations From Server Side (VB)
  23. Executing Animations Using Client-Side Code (VB)
  24. Changing an Animation Using Client-Side Code (VB)
  25. Animating an UpdatePanel Control (VB)
  26. Dynamically Controlling UpdatePanel Animations (VB)