Sponsored Ad

Thursday, November 26, 2009

Cancelling an Asynchronous PostBack in ASP.NET Ajax

The behavior of an asynchronous postback is calm similar to a synchronous postback. In an asynchronous model, all events occurring on the server side, as they do in a synchronous model. Microsoft AJAX Library also raises events on the client side. However, when the page is rendered, asynchronous postback makes only the contents of the update panel, while in a synchronous postback, the page is recreated & sent to the browser.

In two of the earlier articles, had shown me how to cancel a synchronous postback using ASP.NET. In this article they will see how to cancel an asynchronous postback.

I suppose you have some basic experience developing ASP.NET Ajax applications and has installed the ASP.NET AJAX Library and ASP.NET Control Toolkit. As of this writing, the version of the toolkit is version 1.0. 20229 (if you are targeting Framework 2.0, ASP.NET AJAX 1.0 and Visual Studio 2005) and Version 3.0.20229 (if targeting. NET Framework 3.5 and Visual Studio 2008). I tested the sample using version 3.0.20229 (orientación. NET Framework 3.5 and Visual Studio 2008), though he's run with the 1.0.20229 version .

The application (Sys.Application) and PageRequestManager (Sys.WebForms.PageRequestManager) classes in the library of AJAX are prominent in fundraising events throughout the customer life cycle of an ASP.NET AJAX Web page. If you have an update panel on your page that can handle postbacks asynchronous event handling exposed by the class' PageRequestManager. Soon we will see how we can use client-class events 'PageRequestManager' to provide added functionality, such as canceling a postback or abort the current postback, etc.

The application (Sys.Application) and PageRequestManager (Sys.WebForms.PageRequestManager) classes in the library of AJAX are prominent in fundraising events throughout the customer life cycle of an ASP.NET AJAX Web page. If you have an update panel on your page that can handle postbacks asynchronous event handling exposed by the class' PageRequestManager. Soon we will see how we can use client-class events 'PageRequestManager' to provide added functionality, such as canceling a postback or abort the current postback, etc.

Step 1: Open Visual Studio > File > New Web Site > ASP.NET Web Site > Choose the location and language and click OK.

Step 2: Drag and drop a ScriptManager and an UpdatePanel to the page. In the update panel, drag and drop three buttons and a label control. The first button will cause the first postback, followed by the second one which will cause the second postback and the final button to abort the current postback. After registering the events, the code will look similar to the following:

Code Snippet
  1. <body>
  2.  
  3. <form id="form2" runat="server">
  4.  
  5. <asp:ScriptManager ID="ScriptManager1" runat="server">
  6.  
  7. </asp:ScriptManager>
  8.  
  9. <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
  10.  
  11. <ContentTemplate>
  12.  
  13. <asp:Button runat="server" Text="PostBackFirst" ID="btnPostF" onclick="btnPostF_Click"/>
  14.  
  15. <asp:Button runat="server" Text="PostBackSecond" ID="btnPostS" onclick="btnPostS_Click"/>
  16.  
  17. <asp:Button runat="server" Text="AbortPostBack" ID="btnAbort"/>
  18.  
  19. <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
  20.  
  21. </ContentTemplate>
  22.  
  23. </asp:UpdatePanel>
  24.  
  25. </form>
  26.  
  27. </body>
  28.  
  29. In the event handlers, add the following code:
  30.  
  31. C#
  32.  
  33. protected void btnPostF_Click(object sender, EventArgs e)
  34.  
  35.     {
  36.  
  37.         System.Threading.Thread.Sleep(4000);
  38.  
  39.         Label1.Text = "PostBack 1 Completed";
  40.  
  41.     }
  42.  
  43. protected void btnPostS_Click(object sender, EventArgs e)
  44.  
  45.     {
  46.  
  47.         System.Threading.Thread.Sleep(4000);
  48.  
  49.         Label1.Text = "PostBack 2 Completed";
  50.  
  51.     }
  52.  
  53. VB.NET
  54.  
  55. Protected Sub btnPostF_Click(ByVal sender As Object, ByVal e As EventArgs)
  56.  
  57.             System.Threading.Thread.Sleep(4000)
  58.  
  59.             Label1.Text = "PostBack 1 Completed"
  60.  
  61. End Sub
  62.  
  63. Protected Sub btnPostS_Click(ByVal sender As Object, ByVal e As EventArgs)
  64.  
  65.             System.Threading.Thread.Sleep(4000)
  66.  
  67.             Label1.Text = "PostBack 2 Completed"
  68.  
  69. End Sub

Here, we are introducing a delay of 4 seconds when a button click occurs. You can replace this with your processing code, like retrieving results from a database or a similar operation.

Step 3: To the <head> element on the page, add the following javascript code:

Code Snippet
  1. <script type="text/javascript">
  2.  
  3. function pageLoad()
  4.  
  5.         {        
  6.  
  7.             Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(cancelPostBack);
  8.  
  9.         }
  10.  
  11. function cancelPostBack(sender, args)
  12.  
  13.         {
  14.  
  15. if (Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack())         
  16.  
  17.             {
  18.  
  19.                 alert('One postback at a time please');
  20.  
  21.                 args.set_cancel(true);
  22.  
  23.             }
  24.  
  25.         }   
  26.  
  27. </script>

As already explained in the introduction of this article, the code above demonstrates how to use and register the ‘initializeRequest’ event to determine whether an asynchronous postback is currently executing by using the ‘isInAsyncPostBack’ property. You can also cancel the current request by using the cancel property of the Sys.CancelEventArgs class.

Note: You can get the ID of the element which has initiated a new postback by ‘postBackElement’ property of the ‘Sys.WebForms.InitializeRequestEventArgs’ class. Something similar to: var ctrl = args.get_postBackElement() which returns the postback element that initiated the asynchronous postback.

Step 4: The last step left is to build functionality to abort the current postback by using the ‘abortPostBack()’ of the ‘PageRequestManager’ class. To do so, add the following code to the onClientClick() of the btnAbort as shown below:

Code Snippet
  1. <asp:Button runat="server" Text="AbortPostBack" ID="btnAbort"
  2.  
  3. OnClientClick="Sys.WebForms.PageRequestManager.getInstance().abortPostBack();
  4.  
  5.                         alert('Postback Cancelled');"/>
  6.  
  7. The entire source will look similar to the following:
  8.  
  9. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  10.  
  11. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  12.  
  13. <html xmlns="http://www.w3.org/1999/xhtml">
  14.  
  15. <head id="Head1" runat="server">
  16.  
  17. <title>Cancel Async PostBack</title>
  18.  
  19. <script type="text/javascript">
  20.  
  21. function pageLoad()
  22.  
  23.         {        
  24.  
  25.             Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(cancelPostBack);
  26.  
  27.         }
  28.  
  29. function cancelPostBack(sender, args)
  30.  
  31.         {
  32.  
  33. if (Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack())         
  34.  
  35.             {
  36.  
  37.                 alert('One postback at a time please');
  38.  
  39.                 args.set_cancel(true);
  40.  
  41.             }
  42.  
  43.         }   
  44.  
  45. </script>
  46.  
  47. </head>
  48.  
  49. <body>
  50.  
  51. <form id="form2" runat="server">
  52.  
  53. <asp:ScriptManager ID="ScriptManager1" runat="server">
  54.  
  55. </asp:ScriptManager>
  56.  
  57. <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
  58.  
  59. <ContentTemplate>
  60.  
  61. <asp:Button runat="server" Text="PostBackFirst" ID="btnPostF"
  62.  
  63. onclick="btnPostF_Click"/>
  64.  
  65. <asp:Button runat="server" Text="PostBackSecond" ID="btnPostS"
  66.  
  67. onclick="btnPostS_Click"/>
  68.  
  69. <asp:Button runat="server" Text="AbortPostBack" ID="btnAbort"
  70.  
  71. OnClientClick="Sys.WebForms.PageRequestManager.getInstance().abortPostBack();
  72.  
  73.                         alert('Postback Cancelled');"/>
  74.  
  75. <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
  76.  
  77. </ContentTemplate>
  78.  
  79. </asp:UpdatePanel>
  80.  
  81. </form>
  82.  
  83. </body>
  84.  
  85. </html>

In order to test the functionality, follow these steps:

1. Run the application.

2. Click on ‘PostBackFirst’. Now immediately click on PostBackSecond’. You will receive a message ‘One postback at a time please’. So our script has successfully discovered that there is an async postback currently in progress and hence does not allow the other.

3. Now to check how to abort a current async postback, click on either the ‘PostBackFirst’ or on PostBackSecond’ and wait for 4 seconds. The default behavior is that when the current thread wakes up (remember we did Thread.Sleep()), a message is displayed ‘PostBack Completed’. Now click on the button again and this time, click on the ‘AbortPostBack’ button. You will see that the postback has aborted and the ‘PostBack Completed’ message is never displayed.

Posted by Rahul at 1:45 AM

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
Sponsored Ad

More Related Articles

Website Update

Followers