<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<%= DateTime.Now %><br />
<asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button_OnClick" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button2" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0" DynamicLayout="false"
AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<span style="color:Red">Loading...</span>
</ProgressTemplate>
</asp:UpdateProgress>
<hr />
<asp:Button ID="Button2" runat="server" Text="Button2" OnClick="Button_OnClick" />
In this code, if you click Button2 even though the UpdatePanel1 will be updated, but the UpdateProgress1 will not be shown since its AssociatedUpdatePanelID is UpdatePanel1, and Button2 is outside of UpdatePanel1. If we want to force UpdateProgress1 to show when Button2 is clicked, we can do it in the beginRequest Event.
If you open C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0\MicrosoftAjaxWebForms.debug.js, you will see this function:
function Sys$UI$_UpdateProgress$_startRequest()
{
if (this._pageRequestManager.get_isInAsyncPostBack())
{
if (this._dynamicLayout) this.get_element().style.display = 'block';
else this.get_element().style.visibility = 'visible';
}
this._timerCookie = null;
}
we just have to write a similar function to force UpdateProgress1 to show when Button2 is clicked. Here is how we do it:
<script language="javascript" type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(
function(sender, e)
{
if (e.get_postBackElement().id != "<%= this.Button2.ClientID %>")
{
return;
}
var updateProgress = $get("<%= this.UpdateProgress1.ClientID %>");
var dynamicLayout = <%= this.UpdateProgress1.DynamicLayout.ToString().ToLower() %>;
if (dynamicLayout)
{
updateProgress.style.display = "block";
}
else
{
updateProgress.style.visibility = "visible";
}
});
</script>
