演练:对 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 控件进行动画处理的客户端脚本
在支持 AJAX 的 ASP.NET 网站中,添加一个 JScript 文件并将其命名为 UpdatePanelAnimation.js。
将下面的 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 控件进行动画处理
创建新页并切换到“设计”视图。
如果页面上没有 ScriptManager 控件,请从**“工具箱”的“AJAX Extensions”**选项卡上拖动一个该控件到页面上。
在**“工具箱”**中,双击 UpdatePanel 控件以将 UpdatePanel 控件添加到页面中。
单击 UpdatePanel 控件内部,然后在工具箱的**“标准”**选项卡中双击 Button 控件两次,向 UpdatePanel 控件添加两个按钮。
将第一个按钮的 Text 属性设置为“以动画方式刷新”,并将其 ID 设置为 AnimateButton1。
将第二个按钮的 Text 属性设置为“不使用动画方式刷新”,并将其 ID 保留为默认值 Button2。
切换到“源”视图,然后将以下样式规则添加到页的 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 元素的高度、宽度和边框。
在 asp:UpdatePanel 元素的 ContentTemplate 元素内部添加以下代码:
<%=DateTime.Now.ToString() %>
<%=DateTime.Now.ToString() %>
此代码显示标记的最新呈现时间。
切换到“设计”视图并选择 ScriptManager 控件。
在**“属性”窗口中,选择“脚本”属性并单击省略号 (…) 按钮以显示“ScriptReference 集合编辑器”**对话框。
单击**“添加”**以添加脚本引用。
将脚本引用的**“路径”**属性设置为 UpdatePanelAnimation.js,即先前创建的 JavaScript 文件。
使用 ScriptManager 的 Scripts 集合添加脚本引用可确保在 Microsoft AJAX Library 的代码加载之后加载相应的脚本。
单击**“确定”关闭“ScriptReference 集合编辑器”**对话框。
保存更改,然后按 Ctrl+F5 在浏览器中查看页面。
单击**“刷新”**按钮以刷新面板。
请注意,面板边框的颜色会短暂发生变化。
<%@ 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 事件的处理程序中定义脚本文件中的主逻辑。