Microsoft AjaxToolkits 17. 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">
<script runat="server">
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>
