with ASP.NET AJAX Extensions 1.0 for ASP .NET 2.0...
You may have come across a situation where an UpdatePanel performs a partial-page update and the associated UpdateProgress control does not display. The culprit is UpdatePanel AsyncPostbackTriggers. If an UpdatePanel's partial-page update was triggered by a control outside the UpdatePanel, the UpdateProgress control is oblivious to this fact. The workaround that I've found is to get a handle to the instance of the PageRequestManager class and add our own events to show and hide the UpdateProgress ourselves via JavaScript before and after the triggered request.
We are going to create a page that will add 2 numbers and show the calculated result. We will have a TextBox for number 1, a TextBox for number 2, and a label to show the result all within an UpdatePanel. The calculate Button will be outside the UpdatePanel and will thus be our AsyncPostBackTrigger. We then have our UpdateProgress control that we want shown while the webpage calculates our results. Here is the HTML markup to accomplish our base page.
1: <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
2: <Triggers>
3: <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
4: </Triggers>
5: <ContentTemplate>
6: <asp:TextBox ID="tbxValue1" runat="server" Text="1" Width="50" /> + <asp:TextBox ID="tbxValue2" runat="server" Text="1" Width="50" /> = <asp:Label ID="lblResult" runat="server" Text="2" />
7: </ContentTemplate>
8: </asp:UpdatePanel>
9:
10: <asp:Button ID="Button1" runat="server" Text="Calculate" />
11:
12: <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DynamicLayout="true" DisplayAfter="0">
13: <ProgressTemplate>
14: <div style="background-color: #ffffc9;">Calculating...<div>
15: </ProgressTemplate>
16: </asp:UpdateProgress>
Now that we have our markup finished, let's handle the click event of our calculate button. To see the UpdateProgress control for a longer duration, I went ahead and added a sleep timer of 3 seconds to delay the calculation.
1: Private Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
2: System.Threading.Thread.Sleep(3000)
3: lblResult.Text = (CInt(tbxValue1.Text) + CInt(tbxValue2.Text)).ToString()
4: End Sub
Now for the actual meat of this post. The following JavaScript calls the getInstance() method of the PageRequestManager object to get the instance of the PageRequestManager class. We then add our functions to be called when the the request is initialized and ended. This will allow us to show our UpdateProgress control when the request is initialized and then hide it again when the request is ended. Here is the JavaScript to accomplish this.
1: <script type="text/javascript" language="javascript">
2: <!--
3:
4: var prm = Sys.WebForms.PageRequestManager.getInstance();
5: var postBackElement;
6:
7: function CancelAsyncPostBack() {
8: if (prm.get_isInAsyncPostBack()) {
9: prm.abortPostBack();
10: }
11: }
12:
13: prm.add_initializeRequest(InitializeRequest);
14: prm.add_endRequest(EndRequest);
15:
16: function InitializeRequest(sender, args) {
17: if (prm.get_isInAsyncPostBack()) {
18: args.set_cancel(true);
19: }
20: postBackElement = args.get_postBackElement();
21: if (postBackElement.id == 'Button1') {
22: $get('UpdateProgress1').style.display = 'block';
23: }
24: }
25: function EndRequest(sender, args) {
26: if (postBackElement.id == 'Button1') {
27: $get('UpdateProgress1').style.display = 'none';
28: }
29: }
30:
31: // -->
32: </script>
Note that we acquire what element fired the request. We only want to show/hide our UpdateProgress control if the postBackElement was our calculate button.
TriggersUpdateProgress_Soln.zip (45.30 kb)