动态控制 UpdatePanel 动画 (VB)

  • 项目

作者 ：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" />

此方案中的动画将应用于当前时间的显示。 可以使用 方法将此信息写入标签 Page_Load() ，或为简单起见 (，) 使用以下内联代码：

<%= DateTime.Now.ToLongTimeString() %>

此外，还会创建一个用于触发更新时间的按钮：

<asp:Button ID="Button1" runat="server" Text="Update" />

然后，此代码将 <ContentTemplate> 放入 元素的 UpdatePanel 节中。 面板的 UpdateMode 属性必须设置为 "Conditional"，因为只有触发器可以更新面板的内容。 <Triggers>在 的 UpdatePanel部分中，将创建异步回发触发器并将其绑定到Click按钮的 事件。 因此，如果用户单击按钮，则会 UpdatePanel 刷新 。 下面是 控件的 UpdatePanel 标记：

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
 <ContentTemplate>
 <%= DateTime.Now.ToLongTimeString() %>
 </ContentTemplate>
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
 </Triggers>
</asp:UpdatePanel>

最后， UpdatePanelAnimationExtender 必须配置 ：将 TargetControlID 属性设置为面板的 ID，并在扩展器中定义动画。 淡入是有意义的，这在视觉上突出了更新时间。 然后，扩展器标记可能如下所示：

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

在浏览器中运行文件。 每次单击该按钮时，当前时间都会显示在面板中，始终在一秒内淡入。

当前时间正在消退

当前时间在 (正在消退 单击以查看全尺寸图像)

上一篇