通过

对 UpdatePanel 控件执行动画处理 (C#)

  • 项目

作者 ：Christian Wenz

下载 PDF

ASP.NET AJAX 控件工具包中的动画控件不仅是一个控件，而且是一个用于向控件添加动画的整个框架。 对于 UpdatePanel 的内容，存在一个依赖于动画框架的特殊扩展程序：UpdatePanelAnimation。 本教程演示如何为 UpdatePanel 设置此类动画。

概述

ASP.NET AJAX 控件工具包中的动画控件不仅是一个控件，而且是一个用于向控件添加动画的整个框架。 对于 的内容 UpdatePanel，存在一个依赖于动画框架的特殊扩展器： UpdatePanelAnimation。 本教程演示如何为 UpdatePanel设置此类动画。

步骤

第一步是像往常一样在页面中包括 ScriptManager ，以便加载 ASP.NET AJAX 库并使用 Control Toolkit：

<asp:ScriptManager ID="asm" runat="server" />

此方案中的动画将应用于 驻留在 中的 UpdatePanelASP.NET Wizard Web 控件。 三个 (任意) 步骤提供了足够的选项来触发回发：

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
 <ContentTemplate>
 <asp:Wizard ID="Wizard1" runat="server">
 <WizardSteps>
 <asp:WizardStep runat="server" StepType="Start" Title="Ready!">
 </asp:WizardStep>
 <asp:WizardStep runat="server" StepType="Step" Title="Set!">
 </asp:WizardStep>
 <asp:WizardStep runat="server" StepType="Finish" Title="Go!">
 </asp:WizardStep>
 </WizardSteps>
 </asp:Wizard>
 </ContentTemplate>
</asp:UpdatePanel>

控件所需的 UpdatePanelAnimationExtender 标记与 用于 的 AnimationExtender标记非常相似。 在 属性中 TargetControlID ，我们提供了 IDUpdatePanel 要进行动画处理的 ;在 控件中 UpdatePanelAnimationExtender ， <Animations> 元素保存动画 () 的 XML 标记。 但是，有一个区别：与 相比 AnimationExtender，事件和事件处理程序的数量受到限制。 对于 UpdatePanels，其中只有两个存在：

  • <OnUpdated> 更新 UpdatePanel 时
  • <OnUpdating> UpdatePanel 开始更新时

在这种情况下，回发) 后 (的新内容 UpdatePanel 将淡入。 这是为此所需的标记：

<ajaxToolkit:UpdatePanelAnimationExtender ID="upae" runat="server"
 TargetControlID="UpdatePanel1">
 <Animations>
 <OnUpdated>
 <FadeIn Duration="1.0" Fps="24" />
 </OnUpdated>
 </Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>

现在，每当 UpdatePanel 中发生回发时，面板的新内容会顺利淡入。

下一个向导步骤正在淡出

下一个向导步骤在 (单击以查看全尺寸图像)

上一页下一页