21.5 UpdatePanelAnimation局部刷新动画控件
UpdatePanelAnimation是应用于UpdatePanel的控件,提供一些动画效果,本节介绍其主要属性,并演示如何在项目中应用此控件。
21.5.1 简介
UpdatePanelAnimation控件用来装饰UpdatePanel更新的效果,提供对UpdatePanel更新时和更新后的特效,并允许用户定义这些特效。定义的语法与“Animation”控件类似。UpdatePanelAnimation控件的属性如下所示:
<ajaxToolkit:UpdatePanelAnimationExtender ID="ae"
runat="server"
TargetControlID="up">
<Animations>
<OnUpdating> ... </OnUpdating>
<OnUpdated> ... </OnUpdated>
</Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>
其中各属性的意义如下:
l TargetControlID:要应用特效的UpdatePanel的ID。
l OnUpdating:更新时应用的特效。
l OnUpdated:更新后应用的特效。
针对OnUpdated事件和OnUpdating事件,Microsoft给出了特别说明。任何局部控件的回调,都会导致OnUpdating的触发,如果要使任何回调完成后,都触发OnUpdated,则需要设置UpdatePanel的属性“OnUpdated”为“Always”。
21.5.2 实现局部更新时渐变效果
本例使用Animation控件的一些知识,演示UpdatePanel控件更新后的颜色渐变特效。
(1)打开VS2005,新建一个AJAX Control Toolkit网站,命名为“AjaxUpdatePanelAnimationCtrl”。
(2)打开默认生成的Default.aspx页面,切换到窗体的设计视图。
(3)在视图中添加UpdatePanel控件和UpdatePanelAnimationExtender控件。
(4)为UpdatePanelAnimationExtender控件设计动画特效,本例使用的是颜色渐变特效,代码如清单21-19所示。注意改变的是背景色。
代码清单21-19 UpdatePanelAnimationExtender的颜色特效代码
<ajaxToolkit:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server"
TargetControlID="UpdatePanel1">
<Animations>
<OnUpdated>
<Sequence>
<Parallel duration="2" Fps="30">
<Color StartValue="#ff3f3f" EndValue="#ffffff" Property="style" PropertyKey="backgroundColor" />
</Parallel>
</Sequence>
</OnUpdated>
</Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>
(5)在UpdatePanel控件中,添加一些需要回调的内容,本例设计了一个登录窗体,页面的最终布局如图21-28所示。
图21-28 UpdatePanelAnimation实例的设计视图
(6)双击“登录”按钮,添加一些代码,主要是引起页面的回调,还需要通过线程延缓更新的时间,否则可能看不到效果。由于本例使用的是OnUpdated事件,所以影响并不大,但最好还是添加这个延迟。最终按钮的Click事件代码如下。
protected void Button1_Click(object sender, EventArgs e)
{
//延缓更新时间
System.Threading.Thread.Sleep(3000);
Literal1.Text = "登录完毕";
}
(7)按“Ctrl+S”保存所有的设计。按F5运行程序,开始界面和普通界面没有区别。
(8)单击“登录”按钮,等待一段时间后,可以看到UpdatePanel区域内,背景颜色发生了变化,有渐变特效。