We are here to help you with AJAX Tutorials and the AJAX Control Toolkit.
The UpdatePanelAnimationExtender is a simple extender that allows you to utilize the powerful animation framework with existing pages in an easy, declarative fashion.
It is used to play animations both while an UpdatePanel is updating and after it has finished updating.
So we are going to build a small banner with 3 check boxes and an update Button to show the different animations.
Here is a quick preview of what we are building.
Let’s begin
- Start by adding new WebForm to this project and name it UpdatePanelAnimation.aspx.
- Now in our Source view we are going to style our page and add 4 Div’s and inside of the last Div we are going to add an UpdatePanel and add a content template tag to display a label message. Here is the markup:
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<b> UpdatePanelAnimation Demonstration</b><br /><br />
<div style="margin-bottom: 10px;">
<div style="border: dashed 1px #222222; width:400px;">
<div id="up_container" style="background-color: #40669A;">
<asp:UpdatePanel ID="update" runat="server">
<ContentTemplate>
<div id="background" style="text-align: center; vertical-align: middle; line-height: 44px; padding: 12px; height: 44px; color: #FFFFFF;">
<asp:Label ID="lblUpdate" runat="server" Style="padding: 5px; font-size: 14px; font-weight: bold;">
4/28/1906 12:00:00 AM
</asp:Label>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnUpdate" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</div>
- Now we set up triggers to do exactly what triggers do, execute the animation on the Button update we are going to add in a few steps down the line.
- Next is our checkboxes that we are going to add some cool functionality to them to choose the selected animation. We also added the button to execute the animations. Below is the markup:
Choose the effects, then press 'Update':<br />
<input type="checkbox" id="effect_fade" checked="checked" /><label for="effect_fade">Fade</label><br />
<input type="checkbox" id="effect_collapse" checked="checked" /><label for="effect_collapse">Collapse</label><br />
<input type="checkbox" id="effect_color" checked="checked" /><label for="effect_color">Color Background</label><br />
<asp:Button ID="btnUpdate" runat="server" Text="Update" OnClick="btnUpdate_Click" />
- Now lets work on our bread and butter of this tutorial, the animation.
- Lets drag an UpdatePanelAnimationExtender and we can begin selecting our animation actions. Below is the markup for the animation Extender
<asp:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server" TargetControlID="update">
<Animations>
<OnUpdating>
<Sequence>
<%-- Store the original height of the panel --%>
<ScriptAction Script="var b = $findundefined'animation'); b._originalHeight = b._element.offsetHeight;" />
<%-- Disable all the controls --%>
<Parallel duration="0">
<EnableAction AnimationTarget="btnUpdate" Enabled="false" />
<EnableAction AnimationTarget="effect_color" Enabled="false" />
<EnableAction AnimationTarget="effect_collapse" Enabled="false" />
<EnableAction AnimationTarget="effect_fade" Enabled="false" />
</Parallel>
<StyleAction Attribute="overflow" Value="hidden" />
<%-- Do each of the selected effects --%>
<Parallel duration=".25" Fps="30">
<Condition ConditionScript="$getundefined'effect_fade').checked">
<FadeOut AnimationTarget="up_container" minimumOpacity=".2" />
</Condition>
<Condition ConditionScript="$getundefined'effect_collapse').checked">
<Resize Height="0" />
</Condition>
<Condition ConditionScript="$getundefined'effect_color').checked">
<Color AnimationTarget="up_container" PropertyKey="backgroundColor"
EndValue="#FF0000" StartValue="#40669A" />
</Condition>
</Parallel>
</Sequence>
</OnUpdating>
<OnUpdated>
<Sequence>
<%-- Do each of the selected effects --%>
<Parallel duration=".25" Fps="30">
<Condition ConditionScript="$getundefined'effect_fade').checked">
<FadeIn AnimationTarget="up_container" minimumOpacity=".2" />
</Condition>
<Condition ConditionScript="$getundefined'effect_collapse').checked">
<%-- Get the stored height --%>
<Resize HeightScript="$findundefined'animation')._originalHeight" />
</Condition>
<Condition ConditionScript="$getundefined'effect_color').checked">
<Color AnimationTarget="up_container" PropertyKey="backgroundColor"
StartValue="#FF0000" EndValue="#40669A" />
</Condition>
</Parallel>
<%-- Enable all the controls --%>
<Parallel duration="0">
<EnableAction AnimationTarget="effect_fade" Enabled="true" />
<EnableAction AnimationTarget="effect_collapse" Enabled="true" />
<EnableAction AnimationTarget="effect_color" Enabled="true" />
<EnableAction AnimationTarget="btnUpdate" Enabled="true" />
</Parallel>
</Sequence>
</OnUpdated>
</Animations>
</asp:UpdatePanelAnimationExtender>
- As you can see we added an animations node and Parallell Tag to enable actions. As you can see we selected the checkboxes and referenced them in our animations node.
Congrats that is how you use the Animations extender in an UpdatePanel.
See how easy that was?
We chose Server Intellect for its cloud servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
Thank you for reading our tutorial on AJAX Controls, We Aim to provide the best tutorials. Learning AJAX in ASP.NET is easy and we hope you are getting your hands dirty by trying different things and coming up with your own ideas. If you have any questions or concerns, please feel free to suggest a tutorial or you can comment below in the comments section.
