Solution
When a webpage contains one or more UpdatePanel controls for partial page display, the UpdateProgress control helps you design a more intuitive UI. If the partial page update speed is slow, you can use the UpdateProgress control to provide visual feedback on the Update Status. Multiple UpdateProgress controls can be placed on the page. Each control is associated with different UpdatePanel controls. You can also use an UpdateProgress control and associate it with all the UpdatePanel controls on the page.
Background
The UpdateProgress control presents a <div> element, which is displayed or hidden asynchronously based on whether the associated UpdatePanel control has led to an asynchronous response. The UpdateProgress control is not displayed for initial page rendering and synchronous sending back.
Associate the UpdateProgress control with the UpdatePanel Control
You can associate the UpdateProgress control with the UpdatePanel control by setting the AssociatedUpdatePanelID attribute of the UpdateProgress control. When the send-back event comes from the UpdatePanel control, any associated UpdateProgress control is displayed. If you do not associate the UpdateProgress control with a specific UpdatePanel control, the UpdateProgress control displays the progress of any asynchronous sending back.
If you set the ChildrenAsTriggers attribute of an UpdatePanel control to false and asynchronously return from the UpdatePanel control, any associated UpdateProgress control is displayed.
Create the content of the UpdateProgress Control
You can use the ProgressTemplate attribute to specify messages displayed by the UpdateProgress control in declarative mode. The <ProgressTemplate> element can contain HTML and tags. 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, which 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>
<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>
The following example shows two UpdateProgress controls. Each control displays the Update Status of the 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>
The following example shows how to add a button to the <ProgressTemplate> element. You can click this button to stop asynchronous sending back. Cancel any new sending back initiated during another sending request.
<% @ 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: 200 p
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
