UpdatePanelAnimation:让UpdatePanel的更新不再单调

最新推荐文章于 2021-01-17 08:19:47 发布

Kalen_Chen

最新推荐文章于 2021-01-17 08:19:47 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： AJAX ASP.NET系列文章标签： animation parallel triggers div server asp

本文链接：https://blog.youkuaiyun.com/Kalen_Chen/article/details/1658931

AJAX ASP.NET系列专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何使用UpdatePanelAnimation扩展器控件为ASP.NET页面上的UpdatePanel添加动画效果，包括淡入淡出、颜色变化及折叠等，通过具体代码示例展示了如何配置这些动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

UpdatePanelAnimation扩展器控件可以应用到页面中的UpdatePanel上，以各种动画的形式表现UpdatePanel的更新过程，给用户带来绝佳的视觉体验以及明显的更新提示。
示例运行效果：

图(1)

图(2)

图(3)

图(4)

UpdatePanelAnimationDemo.aspx代码示例：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpdatePanelAnimationDemo.aspx.cs" Inherits="Chapter09_UpdatePanelAnimationDemo" %>

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

<title>UpdatePanelAnimation Demo</title>

</head>

<body>

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

<div class="demoheading">UpdatePanelAnimation Demonstration</div>

<asp:UpdatePanel ID="update" runat="server">

<asp:Label ID="lblUpdate" runat="server" style="padding:5px; font-size:14px; font-weight:bold;">

4/28/1906 12:00:00 AM

</asp:Label>

</div>

</ContentTemplate>

<asp:AsyncPostBackTrigger ControlID="btnUpdate" EventName="Click" />

</Triggers>

</asp:UpdatePanel>

</div>

Choose the effects, then press 'Update':<br />

<label for="effect_collapse">Collapse</label><br />

<label for="effect_color">Color Background</label><br />

<asp:Button ID="btnUpdate" runat="server" Text="Update" OnClick="btnUpdate_Click" />

<ajaxToolkit:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server" TargetControlID="update">

<%-- Store the original height of the panel --%>

<%-- Disable all the controls --%>

</Parallel>

<%-- Do each of the selected effects --%>

</Condition>

</Condition>

<Color AnimationTarget="up_container" PropertyKey="backgroundColor"

EndValue="#FF0000" StartValue="#40669A" />

</Condition>

</Parallel>

</Sequence>

</OnUpdating>

<%-- Do each of the selected effects --%>

</Condition>

<%-- Get the stored height --%>

</Condition>

<Color AnimationTarget="up_container" PropertyKey="backgroundColor"

StartValue="#FF0000" EndValue="#40669A" />

</Condition>

</Parallel>

<%-- Enable all the controls --%>

</Parallel>

</Sequence>

</OnUpdated>

</Animations>

</ajaxToolkit:UpdatePanelAnimationExtender>

<!--

TargetControlID：目标UpdatePanel控件的ID。该扩展器中定义的动画将应用到该UpdatePanel控件之上

<Animations>：该标签内将定义目标UpdatePanel控件中用来触发执行动画的事件，即以下两种事件

<OnUpdating>：该标签内将定义在目标UpdatePanel开始更新时将执行的动画

<OnUpdated>：该标签内将定义在目标UpdatePanel更新结束之后将执行的动画

-->

</div>

</form>

</body>

</html>

UpdatePanelAnimationDemo.aspx.cs代码示例：

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Threading;

public partial class Chapter09_UpdatePanelAnimationDemo : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void btnUpdate_Click(object sender, EventArgs e)

{

Thread.Sleep(2000);

lblUpdate.Text = DateTime.Now.ToString();

}