UpdatePanelAnimation:让UpdatePanel的更新不再单调

UpdatePanelAnimation扩展器控件可以应用到页面中的UpdatePanel上，以各种动画的形式表现UpdatePanel的更新过程，给用户带来绝佳的视觉体验以及明显的更新提示。
示例运行效果：

图(1)

图(2)

图(3)

图(4)

UpdatePanelAnimationDemo.aspx代码示例：

<% ... @ Page Language="C#" AutoEventWireup="true" CodeFile="UpdatePanelAnimationDemo.aspx.cs" Inherits="Chapter09_UpdatePanelAnimationDemo"  %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > UpdatePanelAnimation Demo </ title >
     < link  href ="styleSheet.css"  rel ="stylesheet"  type ="text/css"   />
</ head >
< body >
     < form  id ="UpdatePanelAnimationForm"  runat ="server" >
         < asp:ScriptManager  ID ="sm"  runat ="server"   />
         < div  style ="width:400px;" >
             < div  class ="demoheading" > UpdatePanelAnimation Demonstration </ div >
             < 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>
        <!--
            TargetControlID：目标UpdatePanel控件的ID。该扩展器中定义的动画将应用到该UpdatePanel控件之上
            <Animations>：该标签内将定义目标UpdatePanel控件中用来触发执行动画的事件，即以下两种事件
            <OnUpdating>：该标签内将定义在目标UpdatePanel开始更新时将执行的动画
            <OnUpdated>：该标签内将定义在目标UpdatePanel更新结束之后将执行的动画
        -->
        </div>
    </form>
</body>
</html>

UpdatePanelAnimationDemo.aspx.cs代码示例：

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;
using  System.Threading;

public   partial   class  Chapter09_UpdatePanelAnimationDemo : System.Web.UI.Page
... {
    protected void Page_Load(object sender, EventArgs e)
    ...{

    }
    protected void btnUpdate_Click(object sender, EventArgs e)
    ...{
        Thread.Sleep(2000);
        lblUpdate.Text = DateTime.Now.ToString();
    }
}