UpdateProgress综述
简介
UpdateProgress控件提供了在UpdatePanel控件中局部页面刷新的一些状态信息。你可以定制这些内容并规划UpdateProgress控件。当局部页面刷新非常频繁的时候,为了防止闪烁,你可以在UpdateProgress控件显示之前指定一个延迟。
这篇文章包含了以下信息:
为什么要使用UpdateProgress控件
UpdateProgree控件是怎样工作的
怎样把UpdateProgree跟UpdatePanel联合起来
为UpdateProgress控件创建内容
指定内容版面
怎样在页面上放置UpdateProgress控件
当UpdateProgress控件被显示出来的时候怎样去指定他。
使用UpdateProgress控件
当页面包含一个或者多个UpdatePanel用于局部页面呈现的时候,UpdateProgress控件能够帮助你设计一个更直观的Web用户交互界面。如果局部页面刷新很慢,你可以使用UpdateProgress控件对刷新的状态提供可视的反映。在一个页面上,可以有多个UpdateProgress控件,每一个控件都跟不同的一个UpdatePanel协同工作。还有一种选择,你可以只显示一个UpdateProgress然后把页面上所有的Updatepanel控件与他联系起来。
UpdateProgress控件是怎样工作的
UpdateProgress控件在页面上呈现一个<div>标签,这个标签是显示还是隐藏取决于与他相联系的UpdatePanle控件是否正在异步回传。当页面第一次构造的时候或者是同步的回传,UpdateProgress控件不显示。
把一个UpdateProgress与 UpdatePanle关联起来
你可以通过设置UpdateProgress控件的AssociateUpdatePanelID属性将一个UpdateProgress控件与一个UpdatePanel控件关联起来。当一个回传事件在UpdatePanel里面发生的时候,所有与这个UpdatePanle关联的UpdateProgress都被显示出来。如果你不指定一个UpdatePanle控件与UpdateProgress控件关联,(即你不设置UpdateProgress的AssociateUpdatePanelID属性),那么这个UpdateProgress控件将会为所有的异步回传显示进行的状态。
如果UpdatePanel的ChildrenAsTriggers属性被设置为false并且一个异步回传事件在UpdatePanel控件内部发生的时候,所有与之想关联的UpdateProgress控件都将被显示出来。
为UpdateProgress控件创建内容
使用ProgressTemplate属性来申明指定要在UpdateProgress控件中显示的信息。<ProgressTemplate>模版可以包含HTML和其他的标记。下面的例子展示了当UpdateProgress控件被调用的时候怎样显示一条简单的信息。
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
An update is in progress
</ProgressTemplate>
</asp:UpdateProgress>
VB
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
An update is in progress
</ProgressTemplate>
</asp:UpdateProgress>
下面的例子展示了怎样在ProgressTemplate标记内添加一个button,这样用户可以点击这个button来停止局部页面呈现的刷新。当另外一个回传正在执行的时候所引起的所有回传都将被取消。
UpdateProgress ExampleRunView
在上面的例子中,在<ProgressTemplate>标记中的一个HtmlButton的onClick属性调用了JavaScript AbortPostBack function.想要知道更多信息,查看abortPostBack方法和PageRequestManager类的isInAsyncPostBack属性。
指定内容的格式
当DynamicLayout属性是true的时候,UpdateProgress控件一开始在页面上并不占用任何空间。当需要时,页面会动态的改变来显示这些内容。为了支持动态的显示,这个控件是作为一个<div>标记来呈现的,并且有一个Display属性,默认设置成none.
当DynamicLayout属性是false的时候,UpdateProgress在页面显示的时候始终占据着一定的空间,即使这个控件是不可被访问的。因此,这个控件的<div>元素有一个display style属性被设置成block并且默认的visibility被设置成hidden.
在页面上放置UpdateProgress控件
UpdateProgress不是在UpdatePanel里面就是在UpdatePanel 外面。每当与UpdateProgress联合的控件发生了异步回传的时候,UpdateProgress控件就会被显示出来,即使UpdateProgress控件是在另外一个UPdatePanel控件里面。
在一个嵌套的UpdatePanel控件中,子一级的Panel在父级Panel里面,子panel里面所发生的postback会引起所有与这个子Panel联合的UpdateProgress控件全都显示出来,于父Panel联合的UpdateProgress也会被显示出来。如果postback是由父Panel 的控件直接引发的,那么则只有与父panel联合的UpdateProgress控件被显示出来。这与postback是怎么被触发的逻辑一致。
指定什么时候UpdateProgress控件被显示出来
当一个使用了PageRequestManager类的JavaScript BeginRequest和endRequest事件的UpdateProgress控件被显示出来的时候,你可以程序化的进行控制。在beginRequest事件处理器中,显示DOM元素,这样就将UpdateProgress 控件显示出来了,在endRequest事件处理器中,将他隐藏了。
你必须提供客户端脚本在下面的情况中显示或者隐藏UpdateProgress控件
为一个来自UpdatePanel的被注册为异步回传触发的控件的postback,并且这个UpdateProgress控件并不与当前的Panel联合
为那些使用ScriptManager控件的RegisterAsyncPostBackControl方法程序化的被注册为异步回传触发的控件引起的回传。在这种情况中,UpdateProgress页面框架不能自动的判断一个异步回传是不是已经被触发了。因此你必须自己完成这些任务。
UpdateProgress Overview
Introduction
The UpdateProgress control provides status information about partial-page updates in UpdatePanel controls. You can customize the content and the layout of the UpdateProgress control. To prevent flashing when a partial-page update is very fast, you can specify a delay before the UpdateProgress control is displayed.
This topic contains information about the following:
Why Use UpdateProgress Controls
The UpdateProgress control helps you design a more intuitive Web UI when the page contains one or more UpdatePanel controls for partial-page rendering. If a partial-page update is slow, you can use the UpdateProgress control to provide visual feedback about the status of the update. You can have multiple UpdateProgress controls on a page, each associated with a different UpdatePanel control. Alternatively, you can display just one UpdateProgress control and associate it with all UpdatePanel controls on the page.
How UpdateProgress Controls Work
The UpdateProgress control renders a <div> element that is displayed or hidden depending on whether the UpdatePanel control or controls it is associated with are performing an asynchronous postback. For initial page rendering or synchronous postbacks, the UpdateProgress control is not displayed.
Associating an UpdateProgress with an UpdatePanel
You associate an UpdateProgress control with an UpdatePanel control by setting the AssociatedUpdatePanelID property of the UpdateProgress control. When a postback event originates from an UpdatePanel control, any associated UpdateProgress controls are displayed. If you do not associate the UpdateProgress control with a specific UpdatePanel control (that is, you do not set its AssociatedUpdatePanelID property), the UpdateProgress control will display progress for any asynchronous postback.
If the ChildrenAsTriggers property of a UpdatePanel is set to false and an asynchronous postback originates from inside of that UpdatePanel control, any associated UpdateProgress controls will be displayed.
Creating Content for the UpdateProgress Control
Use the ProgressTemplate property to declaratively specify the message displayed by an UpdateProgress control. The <ProgressTemplate> template can contain HTML and markup. The following example shows how to display a simple message when the UpdateProgress control is invoked.
CS
<asp:UpdateProgress ID="UpdateProgress1" runat="server"> <ProgressTemplate> An update is in progress... </ProgressTemplate> </asp:UpdateProgress>
VB
<asp:UpdateProgress ID="UpdateProgress1" runat="server"> <ProgressTemplate> An update is in progress... </ProgressTemplate> </asp:UpdateProgress>
The following example shows how to add a button in the <ProgressTemplate> element that the user can click to stop the partial-page rendering update. Any new postbacks that are initiated while another postback is executing are canceled.
In the above example, the onClick attribute of an HtmlButton control in the <ProgressTemplate> element calls the JavaScript AbortPostBack function. For more information, see the abortPostBack method and the isInAsyncPostBack property of the PageRequestManager class.
Specifying Content Layout
When the DynamicLayout property is true, the UpdateProgress control initially takes up no space in the page display. Instead, the page dynamically changes to display the contents as needed. To support dynamic display, the control is rendered as a <div> element with its display style property initially set to none.
When the DynamicLayout property is false, the UpdateProgress takes up space in the page display, even if the control is not visible. In that case, the <div> element for the control has its display style property set to block and its visibility initially set to hidden.
Placing UpdateProgress Controls on the Page
controls inside or outside of UpdatePanel controls. A UpdateProgress control is displayed whenever the UpdateProgress control it is associated with performs an asynchronous postback, even if the UpdateProgress control is inside another UpdatePanel control.
In a nested UpdatePanel control, where a child panel is inside a parent panel, a postback that originates from inside the child panel will cause any UpdateProgress controls associated with the child panel to be displayed, as well as those associated with the parent panel. If a postback originates from an immediate child control of the parent panel, then only the UpdateProgress controls associated with the parent panel are displayed. This conforms to the logic for how postbacks are triggered.
Specifying When UpdateProgress Controls Are Displayed
You can programmatically control when an UpdateProgress control is displayed using the JavaScript beginRequest and endRequest events of the PageRequestManager class. In the beginRequest event handler, display the DOM element that represents the UpdateProgress control and in the endRequest event handler, hide it.
You must provide client script to show and hide an UpdateProgress control in the following circumstances:
-
For a postback from a control that is registered as an asynchronous postback trigger for the update panel, and the UpdateProgress control is not associated with that panel.
-
For postbacks from controls that are registered programmatically as asynchronous postback controls using the RegisterAsyncPostBackControl(Control) method of the ScriptManager control. In this case, the UpdateProgress page framework cannot determine automatically that an asynchronous postback has been triggered, so you must perform this task.