Export (0) Print
Expand All

UpdateProgress Class

Provides visual feedback in the browser when the contents of one or more UpdatePanel controls are updated.

Namespace:  System.Web.UI
Assembly:  System.Web.Extensions (in System.Web.Extensions.dll)

'Declaration
<AspNetHostingPermissionAttribute(SecurityAction.LinkDemand, Level := AspNetHostingPermissionLevel.Minimal)> _
<AspNetHostingPermissionAttribute(SecurityAction.InheritanceDemand, Level := AspNetHostingPermissionLevel.Minimal)> _
Public Class UpdateProgress _
	Inherits Control _
	Implements IScriptControl
'Usage
Dim instance As UpdateProgress
<asp:UpdateProgress />

The UpdateProgress control enables you to provide feedback about the progress of partial-page rendering. For postbacks or initial page rendering, UpdateProgress control content is not displayed.

The page can contain multiple UpdateProgress controls. Each one can be associated with a different UpdatePanel control. Alternatively, you can use one UpdateProgress control and associate it with all the UpdatePanel controls on the page.

The UpdateProgress control renders a div element that is displayed or hidden depending on where a postback originates and whether the AssociatedUpdatePanelID property of the UpdateProgress control is set.

Associating an UpdateProgress with an UpdatePanel Control

You associate UpdateProgress controls with an UpdatePanel control by setting the AssociatedUpdatePanelID property of the UpdateProgress control. When a postback event originates from inside an UpdatePanel control, any associated UpdateProgress controls are displayed. If you do not set the AssociatedUpdatePanelID property, the UpdateProgress control displays progress for any asynchronous postback that originates from inside any UpdatePanel control. It is also displayed for any controls that are triggers for panels.

The AssociatedUpdatePanelID property has the following effect on UpdateProgress control behavior:

  • When the AssociatedUpdatePanelID property is not set, the UpdateProgress control is displayed for the following postbacks:

    • Postbacks that originate from inside any UpdatePanel control.

    • Postbacks that originate from controls that are asynchronous triggers for any UpdatePanel control.

  • When the AssociatedUpdatePanelID property is set to an UpdatePanel control ID, the UpdateProgress control is displayed for postbacks that originate from inside the associated UpdatePanel control.

If the AssociatedUpdatePanelID property is set to a control that does not exist, the UpdateProgress control will never be shown.

If the ChildrenAsTriggers property of the UpdatePanel controls is set to false and a postback originates from inside an UpdatePanel control, any associated UpdateProgress controls will still be displayed.

Specifying the Content of the UpdateProgress Control

Use the ProgressTemplate property to specify the message that is displayed by an UpdateProgress control. If the ProgressTemplate property is empty, nothing is shown when the UpdateProgress control is displayed.

The template can contain HTML and markup. For example, you can display an animated image that notifies the user that the postback is processing. You can also display a button that the user can click to stop the partial-page update. Additionally, you might want to prevent all other postbacks while one is in progress. The following example shows client script that you can use to accomplish these tasks.

<%@ Page Language="VB" %>

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

<script runat="server">
    Protected Sub Button_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        System.Threading.Thread.Sleep(3000)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2, #UpdateProgress1 {
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;    
    }
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
     }
     #UpdateProgress1 {
      width: 400px; background-color: #FFC080; 
      bottom: 0%; left: 0px; position: absolute;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    function InitializeRequest(sender, args) {
      if (prm.get_isInAsyncPostBack())
       {
          args.set_cancel(true);
       }
    }
    function AbortPostBack() {
      if (prm.get_isInAsyncPostBack()) {
           prm.abortPostBack();
      }        
    }
    </script>
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button1" runat="server" Text="Refresh Panel" OnClick="Button_Click" />    
    <br />
    Clicking the button while an asynchronous postback is in progress will
    cancel the new postback. New postbacks are only allowed if one is not
    already in progress.
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2" runat="server" Text="Refresh Panel" OnClick="Button_Click"/>    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <ProgressTemplate>
      Update in progress...
      <input type="button" value="stop" onclick="AbortPostBack()" />
    </ProgressTemplate>
    </asp:UpdateProgress>
    </div>
    </form>
</body>
</html>

You can use the example code by setting the onClick attribute of an HtmlButton control to "AbortPostBack()". For more information, see the abortPostBack method and the isInAsyncPostBack property of the PageRequestManager class.

Putting UpdateProgress Controls on the Page

UpdateProgress controls can be inside or outside other UpdatePanel controls. The display of the UpdateProgress control's template does not depend on where the UpdateProgress control is located. In a nested UpdatePanel control, a child panel is inside a parent panel. In that case, a postback that originates from inside the child panel causes all UpdateProgress controls associated with the child panel and the parent panel to be displayed. If a postback originates from an immediate child control of the parent panel, only the UpdateProgress controls that are associated with the parent panel are displayed.

Customizing When UpdateProgress Controls Are Displayed

By default, the UpdateProgress control waits .5 seconds (500 milliseconds) before it displays its contents. This helps prevent the control from flashing if an asynchronous postback is very quick. You can specify the delay by setting the DisplayAfter property.

If you need finer control over when an UpdateProgress control is displayed, you can provide client script for the beginRequest and endRequest events of the PageRequestManager class. In the beginRequest event handler, you can display the DOM element that represents the UpdateProgress control. In the endRequest event handler, you can hide it.

You must provide client script to display an UpdateProgress control when a target UpdatePanel control is updated in the following circumstances:

  • When a postback from a control is registered as an asynchronous postback trigger for the panel, and there is an UpdateProgress control on the page. However, the AssociatedUpdatePanelID property is not set to the panel's ID.

  • When postbacks from controls are registered as asynchronous postback controls by using the RegisterAsyncPostBackControl method of the ScriptManager control.

The following examples show different ways to use the UpdateProgress control to show progress during asynchronous postbacks.

The following example shows one UpdateProgress control that displays progress status for two UpdatePanel controls.

<%@ Page Language="VB" %>

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

<script runat="server">
    Protected Sub Button_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        System.Threading.Thread.Sleep(3000)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2, #UpdateProgress1 { 
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;
    }
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
     }
     #UpdateProgress1 {
      width: 400px; background-color: #FFC080; 
      bottom: 0%; left: 0px; position: absolute;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button1" runat="server" Text="Refresh Panel" OnClick="Button_Click" />    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2" runat="server" Text="Refresh Panel" OnClick="Button_Click"/>    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <ProgressTemplate>
      Update in progress...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </div>
    </form>
</body>
</html>

This following example shows two UpdateProgress controls. Each control displays progress status for an associated UpdatePanel control.

<%@ Page Language="VB" %>

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

<script runat="server">
    Protected Sub Button_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        System.Threading.Thread.Sleep(3000)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;
     }
     #UpdateProgress1, #UpdateProgress2 {
      width: 200px; background-color: #FFC080;
      position: absolute; bottom: 0px; left: 0px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button1" runat="server" Text="Refresh Panel" OnClick="Button_Click" />    
    <asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" runat="server">
    <ProgressTemplate>
      UpdatePanel1 updating...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2" runat="server" Text="Refresh Panel" OnClick="Button_Click"/>    
    <asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="UpdatePanel2" runat="server">
    <ProgressTemplate>
      UpdatePanel2 updating...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </ContentTemplate>
    </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

System.Object
  System.Web.UI.Control
    System.Web.UI.UpdateProgress

Any public static (Shared in Visual Basic) members of this type are thread safe. Any instance members are not guaranteed to be thread safe.

Windows 7, Windows Vista, Windows XP SP2, Windows Server 2008 R2, Windows Server 2008, Windows Server 2003

The .NET Framework and .NET Compact Framework do not support all versions of every platform. For a list of the supported versions, see .NET Framework System Requirements.

.NET Framework

Supported in: 3.5

Community Additions

ADD
Show:
© 2014 Microsoft