Scheme
When a Web page contains one or more UpdatePanel controls for partial-page rendering, the UpdateProgress control can help you design a more intuitive UI. If partial-page updates are slow, you can use the UpdateProgress control to provide visual feedback about the status of updates. You can place multiple UpdateProgress controls on a page, where each control is associated with a different UpdatePanel control. You can also use a UpdateProgress control and associate it with all UpdatePanel controls on the page.
Background
The UpdateProgress control renders a <div> element that will be displayed or hidden based on whether the associated UpdatePanel control has caused an asynchronous postback. The UpdateProgress control will not be displayed for initial page rendering and synchronous postbacks.
Associating a UpdateProgress control with a UpdatePanel control
You can associate a UpdateProgress control with a UpdatePanel control by setting the Associatedupdatepanelid property of the UpdateProgress control. When the postback event originates from the UpdatePanel control, any associated UpdateProgress control is displayed. If you do not associate a UpdateProgress control with a specific UpdatePanel control, the UpdateProgress control displays the progress of any asynchronous postbacks.
If you set the Childrenastriggers property of a UpdatePanel control to false and the asynchronous postback originates from inside the UpdatePanel control, any associated UpdateProgress control is displayed.
To create the contents of a UpdateProgress control
You can use the ProgressTemplate property to declaratively specify the messages that are displayed by the UpdateProgress control. <ProgressTemplate> elements can contain HTML and markup. The following example shows how to specify a message for the UpdateProgress control.
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
An update is in progress...
</ProgressTemplate>
</asp:UpdateProgress>
The following example shows an UpdateProgress control that displays the update status of 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>
<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>
<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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
