随笔- 219 文章- 6 评论- 828 阅读- 24万

UpdatePanelAnimation

UpdatePanelAnimation控件主要应用于UpdatePanel的局部刷新效果，它提供一个动画效果。

属性列表：
TargetControlID:要应用特效的UpdatePanel控件ID
OnUpdeting:更新时应用的特效（何任控件的回调都会导致此事件的触发）
OnUpdated:更新后的特效（如果要使用任何控件回调完成后都触发此事件则需要对UpdatePane的OnUpdated属性为Always）

实例解析一、实现局部更新渐变效果

1.UI界面
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Calendar ID="Calendar1" runat="server" Height="219px" OnSelectionChanged="Calendar1_SelectionChanged"
                    Width="350px"></asp:Calendar>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
        <cc1:updatepanelanimationextender id="UpdatePanelAnimationExtender1" runat="server" targetcontrolid="UpdatePanel1">
        <Animations>
          <OnUpdated>
             <Sequence>
                <Parallel duration="2" Fps="30">
                   <Color StartValue="#ff3f3f" EndValue="#ffffff" Property="style" PropertyKey="backgroundColor"> </Color>
                </Parallel>
             </Sequence>
          </OnUpdated>
        </Animations>
        </cc1:updatepanelanimationextender>
    </form>
2.后台
    protected void Calendar1_SelectionChanged(object sender, EventArgs e)
    {
        DateTime dateValue;
        dateValue = Convert.ToDateTime(Calendar1.SelectedDate);
        System.Threading.Thread.Sleep(5000);
        Label1.Text = dateValue.ToString();
    }

实例解析二、实现局部更新效果
效果：

<%@ Page Language="C#" %>

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

    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            System.Threading.Thread.Sleep(3000);
        }
        lbDateTime.Text = DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>UpdatePanelAnimation Demo</title>

    <style type="text/css">
        .updatePanelContainer
        {
            margin: 6px;
            width: 450px;
            border: 1px solid black;
            text-align: center;
            font-size: 160%;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="sm" EnablePartialRendering="true" runat="server">
        </asp:ScriptManager>
        <div class="updatePanelContainer">
            <asp:UpdatePanel ID="myUpdatePanel" runat="server">
                <ContentTemplate>
                    Current Time:
                    <asp:Label ID="lbDateTime" runat="server"></asp:Label>
                    <asp:Button ID="btnUpdate" runat="server" Text="Update" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
        <ajaxToolkit:UpdatePanelAnimationExtender ID="ae" TargetControlID="myUpdatePanel" runat="server">
            <Animations>
                <OnUpdating>
                    <Sequence>
                        <EnableAction Enabled="false" />
                        <Color StartValue="#ffffff" EndValue="#777777" Property="style" PropertyKey="backgroundColor"/>
                    </Sequence>
                </OnUpdating>
                <OnUpdated>
                    <Sequence>
                        <EnableAction Enabled="true" />
                        <Color StartValue="#777777" EndValue="#ffffff" Property="style" PropertyKey="backgroundColor"/>
                        <Pulse Duration="0.1" />
                    </Sequence>
                </OnUpdated>
            </Animations>
        </ajaxToolkit:UpdatePanelAnimationExtender>
    </form>
</body>