Documentation for: ASP.NET Ajax Version 1.0

This documentation is for a previous version. For the current released version, see the ASP.NET Ajax documentation on MSDN.

 

 

 

 

 

 

 

Skip Navigation Links.
Tutorials
Sample ASP.NET AJAX Application
ASP.NET AJAX and JavaScript
Extending JavaScript with ASP.NET AJAX
Creating Custom Client Script in ASP.NET AJAX
Dynamically Assigning ASP.NET AJAX Script References
Globalizing a Date by Using Client Script
Embedding a JavaScript File as a Resource in an Assembly
Embedding Localized Resources for a JavaScript File
Adding Localized Resources to a JavaScript File
Creating Custom Client Events
The UpdatePanel Control
Introduction to the UpdatePanel Control
Creating a Simple ASP.NET Page with Multiple UpdatePanel Controls
Using the UpdatePanel Control with Data-Bound Controls
Using the UpdatePanel Control with Master Pages
Using the UpdatePanel Control with User Controls
Using the UpdatePanel Control with a Web Service
Customizing Error Handling for UpdatePanel Controls
Animating UpdatePanel Controls
Canceling an Asynchronous Postback
Giving Precedence to a Specific Asynchronous Postback
Working with PageRequestManager Events
The UpdateProgress Control
Introduction to the UpdateProgress Control
Programming UpdateProgress Controls in Client Script
The Timer Control
Introduction to the Timer Control
Using the Timer Control with Multiple UpdatePanel Controls
ASP.NET Application Services
Using Forms Authentication
Using Profile Information
Web Services
Exposing Web Services to Client Script
Calling Web Services from Client Script
ASP.NET AJAX Extensibility
Creating Custom ASP.NET AJAX Non-Visual Client Components
Creating Custom ASP.NET AJAX Client Controls
Creating an Extender Control
Adding Client Capabilities to a Web Server Control
Creating a Client Component Class Using the Prototype Model
Defining Custom Component Properties and Raising PropertyChanged Events
Releasing Component Resources

Canceling an Asynchronous Postback

Introduction

Asynchronous postbacks are implemented in Microsoft ASP.NET AJAX by using ASP.NET UpdatePanel Web server controls on the page. The UpdatePanel control removes the requirement to refresh the whole page with each postback, which improves the user experience. In the browser, the Sys.WebForms.PageRequestManager class in the Microsoft AJAX Library manages events in the client page life cycle for asynchronous postbacks. You can customize how asynchronous postbacks occur by handling events exposed by the PageRequestManager class.

In this tutorial you will use the initializeRequest event of the PageRequestManager class to cancel the currently executing asynchronous postback.

For information about the sequence of events raised in the PageRequestManager class, see Working with PageRequestManager Events.

You can see the code in action in this tutorial by clicking the Run It buttons. To implement the procedures in your own development environment you need:

  • Microsoft Visual Studio 2005 or Microsoft Visual Web Developer Express Edition.

  • The latest release of Microsoft ASP.NET AJAX installed and configured. For more information, see Installing ASP.NET AJAX.

  • An ASP.NET AJAX Web site.

Creating Script That Cancels Postbacks

You will start by creating ECMAScript (JavaScript) code that manages the asynchronous postback in the browser.

To create JavaScript code to cancel a postback

  1. In the ASP.NET Web site, add a new JScript file and name it CancelPostback.js.

  2. Add the following script to the file:

    CS

    var divElem = 'AlertDiv';
    var messageElem = 'AlertMessage';
    
    Sys.Application.add_load(ApplicationLoadHandler)
    function ApplicationLoadHandler(sender, args)
    {
         Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(CheckStatus);
    }
    function CheckStatus(sender, args)
    {
      var prm = Sys.WebForms.PageRequestManager.getInstance();
      if (prm.get_isInAsyncPostBack() & args.get_postBackElement().id == 'CancelRefresh') {
         prm.abortPostBack();
      }
      else if (prm.get_isInAsyncPostBack() & args.get_postBackElement().id == 'RefreshButton') {
         args.set_cancel(true);
         ActivateAlertDiv('visible', 'Still working on previous request.');
     }
      else if (!prm.get_isInAsyncPostBack() & args.get_postBackElement().id == 'RefreshButton') {
         ActivateAlertDiv('visible', 'Retrieving headlines.');
      }
    }
    function ActivateAlertDiv(visString, msg)
    {
         var adiv = $get(divElem);
         var aspan = $get(messageElem);
         adiv.style.visibility = visString;
         aspan.innerHTML = msg;
    }
    if(typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();
    
    

    VB

    var divElem = 'AlertDiv';
    var messageElem = 'AlertMessage';
    
    Sys.Application.add_load(ApplicationLoadHandler)
    function ApplicationLoadHandler(sender, args)
    {
         Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(CheckStatus);
    }
    function CheckStatus(sender, args)
    {
      var prm = Sys.WebForms.PageRequestManager.getInstance();
      if (prm.get_isInAsyncPostBack() & args.get_postBackElement().id == 'CancelRefresh') {
         prm.abortPostBack();
      }
      else if (prm.get_isInAsyncPostBack() & args.get_postBackElement().id == 'RefreshButton') {
         args.set_cancel(true);
         ActivateAlertDiv('visible', 'Still working on previous request.');
     }
      else if (!prm.get_isInAsyncPostBack() & args.get_postBackElement().id == 'RefreshButton') {
         ActivateAlertDiv('visible', 'Retrieving headlines.');
      }
    }
    function ActivateAlertDiv(visString, msg)
    {
         var adiv = $get(divElem);
         var aspan = $get(messageElem);
         adiv.style.visibility = visString;
         aspan.innerHTML = msg;
    }
    if(typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();
    
    

    The script performs the following tasks:

    • Defines a handler for the load event of the Sys.Application class. This handler in turn registers a handler named CheckStatus for the initializeRequest event of the PageRequestManager class.

    • Defines the CheckStatus handler to check whether an asynchronous postback is currently executing, and to determine the name of the element that caused the postback.

    • Defines an ActivateAlertDiv function that toggles the visibility of a <div> element that is used to display messages.

Using the Script with an UpdatePanel Control

In this procedure you will use the script you created in a page that contains an UpdatePanel control. The script cancels the postback if the user clicks a link while the asynchronous postback is underway.

To create a page where users can cancel a postback

  1. Create a new single-file ASP.NET Web page named Default.aspx and switch to Design view.

  2. In the AJAX Extensions tab of the toolbox, double-click the ScriptManager control to add it to the page.

    UpdatePanel Tutorial
  3. In the toolbox, double-click the UpdatePanel control to add it to the page.

    UpdatePanel Tutorial
  4. Switch to Source view and add the following style rules to a <style> block in the <head> element of the page:

    CS

        <style type="text/css">
        body {
            font-family: Tahoma;
        }
        #UpdatePanel1{
           width: 400px;
           height: 200px;
           border: solid 1px gray;
        }
        div.AlertStyle {
          font-size: smaller;
          background-color: #FFC080;
          width: 400px;
          height: 20px;
          visibility: hidden;
        }
    	</style>
    
    

    VB

        <style type="text/css">
        body {
            font-family: Tahoma;
        }
        #UpdatePanel1{
           width: 400px;
           height: 200px;
           border: solid 1px gray;
        }
        div.AlertStyle {
          font-size: smaller;
          background-color: #FFC080;
          width: 400px;
          height: 20px;
          visibility: hidden;
        }
    	</style>
    
    

    The style rules define the height and width of the <div> element that is rendered by the UpdatePanel control. The rules also define the appearance of the nested <div> element that displays a progress message.

  5. Add the following markup inside the <ContentTemplate> element of the <asp:UpdatePanel> element:

    CS

    <asp:DataList ID="HeadlineList" runat="server">
        <HeaderTemplate>
        <strong>Headlines</strong>
        </HeaderTemplate>
        <ItemTemplate>
             <%# Eval("Value") %>
        </ItemTemplate>
        <FooterTemplate>
        </FooterTemplate>
        <FooterStyle HorizontalAlign="right" />
    </asp:DataList>
    <p style="text-align:right">
    <asp:Button ID="RefreshButton" 
                Text="Refresh" 
                runat="server" 
                OnClick="NewsClick_Handler" />
    </p>
    <div id="AlertDiv" class="AlertStyle">
    <span id="AlertMessage"></span> 
    &nbsp;&nbsp;&nbsp;&nbsp;
    <asp:LinkButton ID="CancelRefresh" runat="server">
    Cancel</asp:LinkButton>                      
    
    

    VB

    <asp:DataList ID="HeadlineList" runat="server">
        <HeaderTemplate>
        <strong>Headlines</strong>
        </HeaderTemplate>
        <ItemTemplate>
             <%# Eval("Value") %>
        </ItemTemplate>
        <FooterTemplate>
        </FooterTemplate>
        <FooterStyle HorizontalAlign="right" />
    </asp:DataList>
    <p style="text-align:right">
    <asp:Button ID="RefreshButton" 
                Text="Refresh" 
                runat="server" 
                OnClick="NewsClick_Handler" />
    </p>
    <div id="AlertDiv" class="AlertStyle">
    <span id="AlertMessage"></span> 
    &nbsp;&nbsp;&nbsp;&nbsp;
    <asp:LinkButton ID="CancelRefresh" runat="server">
    Cancel</asp:LinkButton>                      
    
    

    The markup performs the following tasks:

    • Defines a DataList control whose items are bound to a Value field, which will be defined later in this procedure as a SortedList object.

    • Defines a Button control that causes an asynchronous postback.

    • Defines a <div> element that will be used to display a message during an asynchronous postback. The <div> element also contains a LinkButton control that enables the postback to be canceled.

  6. In the <script runat="server"> element, add the following server code as the Click event handler, which is for the Refresh button in the UpdatePanel control.

    CS

    protected void NewsClick_Handler(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(2000);
        HeadlineList.DataSource = GetHeadlines();
        HeadlineList.DataBind();
    }
    
    

    VB

    Protected Sub NewsClick_Handler(ByVal sender As Object, ByVal e As EventArgs)
        System.Threading.Thread.Sleep(2000)
        HeadlineList.DataSource = GetHeadlines()
        HeadlineList.DataBind()        
    End Sub
    
    

    The code uses data binding to read and display a list of headlines in the DataList control.

    note

    The handler for the Click event intentionally introduces a delay for this tutorial. In practice, you would not introduce a delay. Instead, the delay would be the result of server traffic or of server code that takes a long time to process, such as a long-running database query.

  7. Inside the <script> element, add the following code for the page's Load event:

    CS

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            HeadlineList.DataSource = GetHeadlines();
            HeadlineList.DataBind();
        }
    }
    
    

    VB

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        If Not (IsPostBack) Then
            HeadlineList.DataSource = GetHeadlines()
            HeadlineList.DataBind()
        End If
    End Sub
    
    

    The code checks whether the current request is a postback. If the request is not a postback, the DataList control is bound to a list of headlines. (During asynchronous postbacks, data binding occurs in the NewClick_Handler method that you created in the previous step.)

  8. Inside the <script> element, add the following code to generate headlines:

    CS

    // Helper method to simulate news headline fetch.
    private SortedList GetHeadlines()
    {
        SortedList headlines = new SortedList();
        headlines.Add(1, "This is headline 1.");
        headlines.Add(2, "This is headline 2.");
        headlines.Add(3, "This is headline 3.");
        headlines.Add(4, "This is headline 4.");
        headlines.Add(5, "This is headline 5.");
        headlines.Add(6, "(Last updated on " + DateTime.Now.ToString() + ")");
        return headlines;
    }
    
    

    VB

    ' Helper method to simulate news headline fetch.
    Private Function GetHeadlines() As SortedList
        Dim headlines As New SortedList()
        headlines.Add(1, "This is headline 1.")
        headlines.Add(2, "This is headline 2.")
        headlines.Add(3, "This is headline 3.")
        headlines.Add(4, "This is headline 4.")
        headlines.Add(5, "This is headline 5.")
        headlines.Add(6, "(Last updated on " & DateTime.Now.ToString() & ")")
        Return headlines
    End Function
    
    

    The headlines in this tutorial are created as a static list. In a real application they would be generated dynamically.

  9. Switch to Design view and make sure that the page resembles the following figure.

    UpdatePanel Tutorial
  10. Select the ScriptManager control.

  11. In the Properties window, select the Scripts property and click the ellipsis (…) button to display the ScriptReference Collection Editor dialog box.

  12. Click Add to add a script reference.

  13. Set the Path property of the script reference to CancelPostback.js, which is the JavaScript file that you created previously.

    Adding a script reference by using the Scripts collection of the ScriptManager makes sure that the script is loaded after the Microsoft AJAX Library has loaded.

    UpdatePanel Tutorial
  14. Click OK to close the ScriptReference Collection Editor dialog box.

  15. Save your changes and press CTRL+F5 to view the page in a browser.

  16. Click the Refresh button and wait for the panel to refresh.

    A message is displayed with an option to cancel the postback.

  17. Click the Refresh button again and after the message appears, click the Refresh button again and wait for the panel to refresh.

    The text of the message changes to indicate that the previous refresh is still in progress. The second refresh is ignored.

  18. Click the Refresh button again, and when the message appears, click the Cancel link to cancel the postback.

    This time, the time displayed in the UpdatePanel control does not change, because the asynchronous postback was canceled.

Review

This tutorial shows how to write JavaScript code that cancels an asynchronous postback. The script provides a handler for the initializeRequest event of the PageRequestManager class. In the initializeRequest event, you can determine which element caused the postback and whether a postback is already underway. You can then take appropriate action. In the tutorial, the code displays a <div> element that contains a cancel button.

To display UpdatePanel control status automatically, you can use the UpdateProgress control. For more information, see Introduction to the UpdateProgress Control.