Home / AJAX

HOW TO Use the UpdatePanelAnimation Control

RSS
Modified on 2009/12/24 04:10 by Chris Muench Categorized as Uncategorized

UpdatePanelAnimation Demonstration



UpdatePanelAnimation Description

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.

It is important to note that because of the UpdatePanel architecture, the OnUpdating animation will always play when any partial postback starts, but the OnUpdated animation will only play at the end of a partial postback if its UpdatePanel was changed (note: setting the UpdatePanel's UpdateMode="Always" will ensure the OnUpdated animation plays when every partial postback completes).

The animations to be played are declaratively specified using XML. You can read the Using Animations walkthrough for more details about creating these generic animation declarations, as well as other ways to use the animation framework. The framework provides a lot of useful animations to handle movement, resizing, fading, etc. All the animations and their properties are described in the Animation Reference.

Video - How Do I: Use the ASP.NET AJAX UpdatePanelAnimation Control?

UpdatePanelAnimation Client Code Sample

NO CLIENT SIDE SAMPLE




UpdatePanelAnimation Client Properties

UpdatePanelAnimation Server Code Sample

        <div style="margin-bottom: 10px;">
            <div style="border: dashed 1px #222222;">
                <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>
        
        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" />
        
        <ajaxToolkit:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server" TargetControlID="update">
            <Animations>
                <OnUpdating>
                    <Sequence>
                        <%-- Store the original height of the panel --%>
                        <ScriptAction Script="var b = $find('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="$get('effect_fade').checked">
                                <FadeOut AnimationTarget="up_container" minimumOpacity=".2" />
                            </Condition>
                            <Condition ConditionScript="$get('effect_collapse').checked">
                                <Resize Height="0" />
                            </Condition>
                            <Condition ConditionScript="$get('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="$get('effect_fade').checked">
                                <FadeIn AnimationTarget="up_container" minimumOpacity=".2" />
                            </Condition>
                            <Condition ConditionScript="$get('effect_collapse').checked">
                                <%-- Get the stored height --%>
                                <Resize HeightScript="$find('animation')._originalHeight" />
                            </Condition>
                            <Condition ConditionScript="$get('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>
        </ajaxToolkit:UpdatePanelAnimationExtender>

UpdatePanelAnimation Server Properties

The properties in italics are optional.

<ajaxToolkit:UpdatePanelAnimationExtender ID="ae"
  runat="server" TargetControlID="up">
     <Animations>
        <OnUpdating> ... </OnUpdating>
        <OnUpdated> ... </OnUpdated>
    </Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>
  • TargetControlID - ID of the UpdatePanel whose updates are used to play the animations (this is also the default target of the animations)
  • OnUpdating - Generic animation played as when any UpdatePanel begins updating
  • OnUpdated - Generic animation played after the UpdatePanel has finished updating (but only if the UpdatePanel was changed)

UpdatePanelAnimation Additional Code Samples