By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,913 Members | 1,305 Online
Bytes IT Community
Submit an Article
Got Smarts?
Share your bits of IT knowledge by writing an article on Bytes.

How To Use AJAX To Detect If An Asynchronous Request Is Being Processed

P: 85
In this article, you will learn how to use AJAX to detect if an Asynchronous request is still being processed when another is called. By doing this, we can notify the user, and allow the first request to complete before starting another.
To demonstrate this, we will create two UpdatePanels, each displaying the current date and time, and with a button. Each button will update its own UpdatePanel when clicked. However, when the first button is clicked, we will purposely make the process take 3 seconds to complete, giving us enough time to click the second button to test. Upon clicking the second button while the first is still processing, we should be notified that a process is still active and not allow the second process to initiate.

Let's start by adding the ScriptManager and the two UpdatePanels:
Expand|Select|Wrap|Line Numbers
  1. <form id="form1" runat="server">
  2. <asp:ScriptManager ID="SM1" runat="server" />
  3.  
  4. <asp:UpdatePanel ID="UP1" runat="server" UpdateMode="Conditional">
  5. <ContentTemplate>
  6.  
  7. </ContentTemplate>
  8. </asp:UpdatePanel>
  9.  
  10. <br /><br />
  11. <asp:UpdatePanel ID="U2" runat="server" UpdateMode="Conditional">
  12. <ContentTemplate>
  13.  
  14. </ContentTemplate>
  15. </asp:UpdatePanel>
  16. <br /><br />
  17. </form>
  18.  
Notice we set the UpdateMode on both Panels to Conditional. This is because we do not want them both updating at the same time - each button should update their own UpdatePanel only.
Let's go ahead and add the buttons and the current time to the UpdatePanels:
Expand|Select|Wrap|Line Numbers
  1. <asp:UpdatePanel ID="UP1" runat="server" UpdateMode="Conditional">
  2. <ContentTemplate>
  3. <%= DateTime.Now.ToString() %>
  4. <br />
  5. <asp:Button ID="btn_GetTime1" runat="server" Text="Get Time (1)" OnClick="btn_GetTime1_Click" />
  6. </ContentTemplate>
  7. </asp:UpdatePanel>
  8. <br /><br /> <asp:UpdatePanel ID="U2" runat="server" UpdateMode="Conditional">
  9. <ContentTemplate>
  10. <%= DateTime.Now.ToString() %>
  11. <br />
  12. <asp:Button ID="btn_GetTime2" runat="server" Text="Get Time (2)" />
  13. </ContentTemplate>
  14. </asp:UpdatePanel>
  15.  
now in the code behind , in the click event of first button, we will deliberately make the thread sleep for 3 seconds. like this

Expand|Select|Wrap|Line Numbers
  1. using System.Threading;
  2.  
  3. ..
  4.  
  5. protected void btn_GetTime1_Click(object sender, EventArgs e)
  6. {
  7. Thread.Sleep(3000);
  8. }
  9.  
To make the request more visual, let's add an UpdateProgress into the mix as well. This will show us when a request is in progress:
Expand|Select|Wrap|Line Numbers
  1. <asp:UpdateProgress ID="UPr1" runat="server" AssociatedUpdatePanelID="UP1">
  2. <ProgressTemplate>
  3. <br /><br />
  4. Please wait..
  5. </ProgressTemplate>
  6. </asp:UpdateProgress>
  7.  
We will also include some JavaScript to check if an Async PostBack is currently in progress. To do this, add the following script:
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. var instance = Sys.WebForms.PageRequestManager.getInstance();
  3. instance.add_initializeRequest(instance_initializeRequest);
  4.  
  5. function instance_initializeRequest(sender, args) {
  6. if (instance.get_isInAsyncPostBack()) {
  7. alert('Still processing request. Please wait..');
  8. args.set_cancel(true);
  9. }
  10. }
  11. </script>
  12.  
The ASPX page will look something like this:
Expand|Select|Wrap|Line Numbers
  1. <body>
  2. <form id="form1" runat="server">
  3. <asp:ScriptManager ID="SM1" runat="server" />
  4.  
  5. <asp:UpdatePanel ID="UP1" runat="server" UpdateMode="Conditional">
  6. <ContentTemplate>
  7. <%= DateTime.Now.ToString() %>
  8. <br />
  9. <asp:Button ID="btn_GetTime1" runat="server" Text="Get Time (1)" OnClick="btn_GetTime1_Click" />
  10. </ContentTemplate>
  11. </asp:UpdatePanel>
  12. <asp:UpdateProgress ID="UPr1" runat="server" AssociatedUpdatePanelID="UP1">
  13. <ProgressTemplate>
  14. <br /><br />
  15. Please wait..
  16. </ProgressTemplate>
  17. </asp:UpdateProgress>
  18. <br /><br />
  19. <asp:UpdatePanel ID="U2" runat="server" UpdateMode="Conditional">
  20. <ContentTemplate>
  21. <%= DateTime.Now.ToString() %>
  22. <br />
  23. <asp:Button ID="btn_GetTime2" runat="server" Text="Get Time (2)" />
  24. </ContentTemplate>
  25. </asp:UpdatePanel>
  26. <br /><br />
  27. </form>
  28. </body>
  29. </html>
  30. <script type="text/javascript">
  31. var instance = Sys.WebForms.PageRequestManager.getInstance();
  32. instance.add_initializeRequest(instance_initializeRequest);
  33.  
  34. function instance_initializeRequest(sender, args) {
  35. if (instance.get_isInAsyncPostBack()) {
  36. alert('Still processing request. Please wait..');
  37. args.set_cancel(true);
  38. }
  39. }
  40. </script>
  41.  
Aug 1 '12 #1
Share this Article
Share on Google+

Post your comment

Sign in to post your comment or Sign up for a free account.