通过

演练：对 ASP.NET UpdatePanel 控件进行动画处理

  • 项目

更新：2007 年 11 月

本演练描述如何对因异步回发而更新的 UpdatePanel 控件进行动画处理。

Microsoft AJAX Library 使您能够在客户端页生命周期中管理事件。可以通过处理客户端 PageRequestManager 类的事件来做到这一点。在本演练中，您将了解如何在页上的特定控件导致异步回发时使用 beginRequest 和 pageLoaded 事件来对 UpdatePanel 控件进行动画处理。beginRequest 事件在启动异步回发之前并在将此回发发送到服务器之前引发。pageLoaded 事件在回发和异步回发期间引发。在此事件过程中，可以访问有关因最新回发而被创建和更新的面板的信息。（对于回发，仅可以创建面板；而对于异步回发，则可以创建和更新面板。）

先决条件

若要在您自己的开发环境中实现这些过程，您需要：

  • Visual Studio 2008 或 Visual Web Developer 2008 速成版。

  • 一个支持 AJAX 的 ASP.NET 网站。

创建对 UpdatePanel 控件进行动画处理的客户端脚本

在此过程中，将创建一个定义动画类的 ECMAScript（JavaScript 或 JScript）文件。该类包含对 HTML DOM 元素进行动画处理的方法。在浏览器中，要进行动画处理的 UpdatePanel 控件用一个 div 元素表示。

创建对 UpdatePanel 控件进行动画处理的客户端脚本

  1. 在支持 AJAX 的 ASP.NET 网站中，添加一个 JScript 文件并将其命名为 UpdatePanelAnimation.js。

  2. 将下面的 JavaScript 代码添加到该文件中：

    Type.registerNamespace("ScriptLibrary");
ScriptLibrary.BorderAnimation = function(startColor, endColor, duration) {
    this._startColor = startColor;
    this._endColor = endColor;
    this._duration = duration;
}
ScriptLibrary.BorderAnimation.prototype = {
    animatePanel: function(panelElement) {
        var s = panelElement.style;
        var startColor = this._startColor;
        var endColor = this._endColor;
        s.borderColor = startColor;
        window.setTimeout(
            function() {{ s.borderColor = endColor; }},
            this._duration
        );
    }
}
ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation', null);

var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('blue', 'gray', 1000);
var postbackElement;

Sys.Application.add_load(ApplicationLoadHandler);
function ApplicationLoadHandler() {
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
}

function beginRequest(sender, args) {
    postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();
    if (typeof(postbackElement) === "undefined") {
        return;
    } 
    else if (postbackElement.id.toLowerCase().indexOf('animate') > -1) {
        for (i=0; i < updatedPanels.length; i++) {            
            panelUpdatedAnimation.animatePanel(updatedPanels[i]);
        }
    }

}
if(typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

    Type.registerNamespace("ScriptLibrary");
ScriptLibrary.BorderAnimation = function(startColor, endColor, duration) {
    this._startColor = startColor;
    this._endColor = endColor;
    this._duration = duration;
}
ScriptLibrary.BorderAnimation.prototype = {
    animatePanel: function(panelElement) {
        var s = panelElement.style;
        var startColor = this._startColor;
        var endColor = this._endColor;
        s.borderColor = startColor;
        window.setTimeout(
            function() {{ s.borderColor = endColor; }},
            this._duration
        );
    }
}
ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation', null);

var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('blue', 'gray', 1000);
var postbackElement;

Sys.Application.add_load(ApplicationLoadHandler);
function ApplicationLoadHandler() {
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
}

function beginRequest(sender, args) {
    postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();
    if (typeof(postbackElement) === "undefined") {
        return;
    } 
    else if (postbackElement.id.toLowerCase().indexOf('animate') > -1) {
        for (i=0; i < updatedPanels.length; i++) {            
            panelUpdatedAnimation.animatePanel(updatedPanels[i]);
        }
    }

}
if(typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

    代码执行下列任务：

    • 通过调用 registerNamespace 方法为 ScriptLibrary 命名空间注册。

    • 使用原型设计模式来定义 ScriptLibrary 命名空间中的 BorderAnimation 类。BorderAnimation 类中名为 animatePanel 的方法定义动画逻辑。

    • 通过调用 registerClass 方法为 BorderAnimation 类注册。

    • 创建 BorderAnimation 类的新实例。代码将三个值传递给类构造函数：动画颜色、默认颜色和显示动画颜色的毫秒数。

    • 定义 Sys.Application 类的 load 事件的处理程序。此类又定义 PageRequestManager 类的 beginRequest 和 pageLoaded 事件的处理程序。

    • 在 beginRequest 事件处理程序中，代码保存导致回发的元素的名称。

    • 如果回发元素的 ID 包含单词“animate”，则代码将在 pageLoaded 事件处理程序中执行动画。

对 UpdatePanel 控件使用客户端脚本

在此过程中，将在包含 UpdatePanel 控件的页中使用动画脚本。当刷新面板的内容时，该脚本将对面板进行动画处理。

对 UpdatePanel 控件进行动画处理

  1. 创建新页并切换到“设计”视图。

  2. 如果页面上没有 ScriptManager 控件，请从**“工具箱”的“AJAX Extensions”**选项卡上拖动一个该控件到页面上。

    UpdatePanel 教程

  3. 在**“工具箱”**中，双击 UpdatePanel 控件以将 UpdatePanel 控件添加到页面中。

    UpdatePanel 教程

  4. 单击 UpdatePanel 控件内部，然后在工具箱的**“标准”**选项卡中双击 Button 控件两次，向 UpdatePanel 控件添加两个按钮。

  5. 将第一个按钮的 Text 属性设置为“以动画方式刷新”，并将其 ID 设置为 AnimateButton1。

  6. 将第二个按钮的 Text 属性设置为“不使用动画方式刷新”，并将其 ID 保留为默认值 Button2。

    UpdatePanel 教程

  7. 切换到“源”视图，然后将以下样式规则添加到页的 head 元素的 style 块中。

    <style type="text/css">
#UpdatePanel1 {
  width: 300px;
  height: 100px;
  border:solid 1px gray;
}    
</style>

    <style type="text/css">
#UpdatePanel1 {
  width: 300px;
  height: 100px;
  border:solid 1px gray;
}    
</style>

    样式规则定义为 UpdatePanel 控件呈现的 div 元素的高度、宽度和边框。

  8. 在 asp:UpdatePanel 元素的 ContentTemplate 元素内部添加以下代码：

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

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

    此代码显示标记的最新呈现时间。

  9. 切换到“设计”视图并选择 ScriptManager 控件。

  10. 在**“属性”窗口中，选择“脚本”属性并单击省略号 (…) 按钮以显示“ScriptReference 集合编辑器”**对话框。

  11. 单击**“添加”**以添加脚本引用。

  12. 将脚本引用的**“路径”**属性设置为 UpdatePanelAnimation.js，即先前创建的 JavaScript 文件。

    UpdatePanel 教程

    使用 ScriptManager 的 Scripts 集合添加脚本引用可确保在 Microsoft AJAX Library 的代码加载之后加载相应的脚本。

  13. 单击**“确定”关闭“ScriptReference 集合编辑器”**对话框。

  14. 保存更改，然后按 Ctrl+F5 在浏览器中查看页面。

  15. 单击**“刷新”**按钮以刷新面板。

    请注意，面板边框的颜色会短暂发生变化。

    <%@ Page Language="VB" %>

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdatePanel Animation Example</title>
    <style type="text/css">
    #UpdatePanel1 {
      width: 300px;
      height: 100px;
      border:solid 1px gray;
    }    
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
        <asp:ScriptReference Path="UpdatePanelAnimation.js" />
        </Scripts>
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <%=DateTime.Now.ToString() %>
                <asp:Button ID="AnimateButton1" runat="server" Text="Refresh with Animation" />
                <asp:Button ID="Button2" runat="server" Text="Refresh with no Animation" />
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </form>
</body>
</html>

    <%@ Page Language="C#" %>

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdatePanel Animation Example</title>
    <style type="text/css">
    #UpdatePanel1 {
      width: 300px;
      height: 100px;
      border:solid 1px gray;
    }    
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
        <asp:ScriptReference Path="UpdatePanelAnimation.js" />
        </Scripts>
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <%=DateTime.Now.ToString() %>
                <asp:Button ID="AnimateButton1" runat="server" Text="Refresh with Animation" />
                <asp:Button ID="Button2" runat="server" Text="Refresh with no Animation" />
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </form>
</body>
</html>

回顾

本演练演示了如何在刷新面板的内容时为 UpdatePanel 控件提供简单动画。JavaScript 文件中的代码对由 UpdatePanel 控件呈现的 HTML div 元素进行动画处理。将 JavaScript 文件添加到 ScriptManager 控件的 Scripts 集合中。在 PageRequestManager 类的 beginRequest 和 pageLoaded 事件的处理程序中定义脚本文件中的主逻辑。

请参见

概念

处理 PageRequestManager 事件

参考

Sys.WebForms.PageRequestManager 类

Sys.WebForms.PageLoadedEventArgs 类