Dynamically Controlling UpdatePanel Animations (C#)
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:
[!code-aspxMain]
1: <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:
[!code-aspxMain]
1: <%= DateTime.Now.ToLongTimeString() %>
Also, a button to trigger updating the time is created:
[!code-aspxMain]
1: <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:
[!code-aspxMain]
1: <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
2: <ContentTemplate>
3: <%= DateTime.Now.ToLongTimeString() %>
4: </ContentTemplate>
5: <Triggers>
6: <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
7: </Triggers>
8: </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:
[!code-aspxMain]
1: <ajaxToolkit:UpdatePanelAnimationExtender ID="upae" runat="server" TargetControlID="UpdatePanel1">
2: <Animations>
3: <OnUpdated>
4: <FadeIn Duration="1.0" Fps="24" />
5: </OnUpdated>
6: </Animations>
7: </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)
)
|
|