When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
ASPFAQs.com
Message Board
Related Web Technologies
User Tips!
Coding Tips
Search

Sections:
Book Reviews
Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Security
Stump the SQL Guru!
Web Hosts
XML
Information:
Advertise
Feedback
Author an Article

ASP ASP.NET ASP FAQs Message Board Feedback
 
Print this Page!
Published: Wednesday, September 2, 2009

Building Interactive User Interfaces with Microsoft ASP.NET AJAX: Triggering Full Page Postbacks From An UpdatePanel

By Scott Mitchell


A Multipart Series on ASP.NET AJAX
Over the past several years web developers have started using JavaScript to make asynchronous postbacks to the web server that only transmit and receive the necessary data; these techniques are commonly referred to as AJAX. Microsoft has released a free AJAX framework for ASP.NET developers named Microsoft ASP.NET AJAX. This article series examines using Microsoft's ASP.NET AJAX framework to build responsive user interfaces.

  • AJAX Basics and Getting Started with Microsoft's ASP.NET AJAX Framework - examines AJAX basics and looks at installing Microsoft ASP.NET AJAX; includes a demo of the UpdatePanel control.
  • Using the UpdatePanel - provides more in-depth and real-world examples of using the UpdatePanel.
  • Providing Visual Feedback with the UpdateProgress Control - shows how to use the UpdateProgress control to display visual feedback to the user when a partial page postback is in progress.
  • Performing Client Actions in Response to Partial Page Postbacks - learn how to execute client-side script in response to events raised by the partial page postback life-cycle.
  • Using the Timer Control - see how to asynchronously update a portion of the screen every n milliseconds.
  • Enabling Bookmarking and the Browser's Back Button - learn how to add history points to an AJAX-enabled web page so that your visitors can use their browsers' Back and Forward buttons and bookmarks.
  • Retrieving Server-Side Data Using Web Services - call Web Services from an ASP.NET AJAX application with a sprinkle of JavaScript.
  • A Look at JSON Serialization - explore the serialization format used by the ASP.NET AJAX Framework when calling Web Services from client-side script.
  • Triggering Full Page Postbacks From An UpdatePanel - learn how to override an UpdatePanel's default behavior and trigger a full page postback.
  • Refreshing An UpdatePanel With JavaScript - see how to refresh the contents of an UpdatePanel via JavaScript.
  • Rebinding Client-Side Events After a Partial Page Postback - discover how to automatically rebind client-side event handlers to HTML elements in an UpdatePanel after a partial page postback.
  • (Subscribe to this Article Series! )

    Introduction


    The ASP.NET AJAX UpdatePanel provides a quick and easy way to implement a snappier, AJAX-based user interface in an ASP.NET WebForm. In a nutshell, Web controls within the UpdatePanel that would normally cause a full page postback trigger a partial page postback, instead. For example, a Button Web control, when clicked, submits the form, causing the browser to start a full page postback. However, if the Button control is within an UpdatePanel then the UpdatePanel short-circuits the full page postback and performs a partial page postback, using JavaScript to make an HTTP request to the server. The server realizes that the request is a partial page postback (and not a full page postback) and only returns the markup for the UpdatePanels on the page. When this response is returned to the browser, JavaScript code parses it and seamlessly updates the user interfaces in the UpdatePanels. (For a more in-depth look at the UpdatePanel control, refer back to the Using the UpdatePanel installment in this article series.)

    While we usually want controls within the UpdatePanel to perform a partial page postback, there are scenarios where we need a full page postback. ASP.NET AJAX allows us two techniques for specifying that certain controls within the UpdatePanel should cause a full page postback. The simplest approach is to define the controls declaratively using the UpdatePanel's Triggers collection. It is also possible to programmatically specify that a particular control should perform a full page postback, which is useful when the control(s) that need to perform a full page postback are not created until runtime (such as the Buttons in a GridView).

    This article looks at how to configure full page postbacks for particular controls within an UpdatePanel, exploring both the declarative and programmatic techniques. Read on to learn more!

    - continued -

    The Impetus For Full Page Postbacks Within An UpdatePanel


    At first blush, it may seem odd to be discussing how to trigger a full page postback from within an UpdatePanel. After all, if you wanted a full page postback to occur when, say, a Button was clicked, wouldn't you simply put it outside of the UpdatePanel in the first place?

    Admittedly, the vast majority of the time an UpdatePanel is used you want all of the controls within it to use partial page postbacks. However, there are a few edge scenarios that do routinely pop up in real-world projects where you'll need to have a full page postback occur. The one that I've bumped into the most has to do with the FileUpload control. The FileUpload control does not work with partial page postbacks. You can certainly place a FileUpload control within (or outside) of an UpdatePanel control, but when a partial page postback is triggered the file the user select is not uploaded to the server. Therefore, if you have a FileUpload control on the page and want the selected file's contents uploaded when a Button is clicked, that Button must trigger a full page postback. If the Button in question is within an UpdatePanel then you must make sure that that Button triggers a full page postback rather than a partial page postback.

    Another scenario that I ran into in my last project occurred when building a page for managing an order. Each order can have optional "attachments" associated with it and on the order management page we had a grid that listed the attachments. Each row in the grid had a "Download" LinkButton that, when clicked, would stream down the file contents to the user's browser in such a fashion that the browser would display the Open / Save / Cancel dialog box, allowing the user to save the file to their hard drive (or open it for viewing). Once we put this GridView into an UpdatePanel, the Download functionality stopped working. To get it to work we needed to have the "Download" buttons trigger a full postback. Rather than ripping out the UpdatePanel altogether (and thereby losing the responsive sorting and paging), we programmatically configured the "Download" LinkButton controls to trigger a full page postback.

    The download available at the end of this article includes demos in both C# and Visual Basic that illustrate these two scenarios and show how to declaratively and programmatically specify that a particular control within an UpdatePanel should cause a full page postback instead of a partial page postback (the default).

    Declaratively Specifying Full Page Postback Triggers


    By default, any control within an UpdatePanel that would normally cause a full page postback instead triggers a partial page postback. You can override this default behavior by adding a PostBackTrigger to the UpdatePanel. The PostBackTrigger indicates a set of controls within the UpdatePanel that should continue to cause regular, full page postbacks rather than partial page postbacks.

    To configure the UpdatePanel's Triggers collection go to the Designer in Visual Studio, select the UpdatePanel, and view its Properties. Select the Triggers section and click the ellipses button. This launches the UpdatePanelTrigger Collection Editor dialog box (shown below). There are two types of triggers:

    • AsyncPostBackTrigger - use these triggers to specify a control within or outside of the UpdatePanel that, when clicked, should trigger a partial page postback.
    • PostBackTrigger - use these triggers to have a control within the UpdatePanel cause a full page postback rather than a partial page postback.
    To add triggers from the UpdatePanelTrigger Collection Editor dialog box click the Add button and then define the control name in the ControlID textbox. Note that by default the Add button adds an AsyncPostBackTrigger. To add a PostBackTrigger you need to click the little arrow on the right side of the Add button and then pick the PostBackTrigger option from the drop-down, as the figure below illustrates.

    Use the UpdatePanelTrigger Collection Editor dialog box to add AsyncPostBackTrigger or PostBackTrigger triggers to an UpdatePanel.

    Adding a PostBackTrigger to an UpdatePanel via this dialog box results in the following declarative markup:

    <asp:UpdatePanel ID="upPanelWithFullPostbackTrigger" runat="server">
       <ContentTemplate>
          ... UpdatePanel Content ...
       </ContentTemplate>

       <Triggers>
          <asp:PostBackTrigger ControlID="ID_Of_Control_That_Causes_Full_Postback" />
       </Triggers>

    </asp:UpdatePanel>

    The demo available for download at the end of this article includes a page named DeclarativeApproach.aspx that contains two UpdatePanels named upNormalPanel and upPanelWithFullPostbackTrigger. Both contain a Label, a FileUpload control, and a Button and both Button's have server-side Click event that display information about the just-uploaded file in the UpdatePanel's Label. The upPanelWithFullPostbackTrigger includes a PostBackTrigger that causes its Update button to cause a full page postback; the upNormalPanel UpdatePanel has no such trigger and therefore its Upload Button causes a partial page postback.

    Selecting a file and clicking the Upload button in the upNormalPanel UpdatePanel reports that no file was uploaded because even though the user has chosen a file from their hard drive, its contents are not sent to the server when a partial page postback occurs. However, selecting a file and clicking the Upload button in the upPanelWithFullPostbackTrigger UpdatePanel displays the just-uploaded file's name, as the file contents are sent to the server on a full page postback.

    Programmatically Adding PostBackTriggers


    The UpdatePanelTrigger Collection Editor dialog box makes it possible to declaratively add PostBackTriggers to an UpdatePanel with just a few mouse clicks. You can also set PostBackTriggers programmatically. This technique is useful if the controls that need to trigger a full page postback are not created until runtime, such as the Buttons in a GridView control.

    To programmatically add a PostBackTrigger to an UpdatePanel call the ScriptManager class's RegisterPostBackControl method, passing in the control that triggers the full page postback.

    // C#
    ScriptManager current = ScriptManager.GetCurrent(Page);
    if (current != null)
       current.RegisterPostBackControl(controlToTriggerFullPagePostback);


    ' VB
    Dim current As ScriptManager = ScriptManager.GetCurrent(Page)
    If current IsNot Nothing Then
       current.RegisterPostBackControl(controlToTriggerFullPagePostback)
    End If

    The demo in the download named ProgrammaticApproach.aspx uses the above code to programmatically trigger a full page postback for certain controls within an UpdatePanel. Specifically, the demo has a GridView control in an UpdatePanel that displays images. In addition to showing the actual image using an <img> element in one of its columns, the GridView also includes a "Download" LinkButton in each row that, when clicked, streams the picture's binary contents down to the browser in such a way that the browser displays an Open / Save / Cancel dialog box. (For a discussion on how to accomplish this, see How To Raise a "File Download" Dialog Box for a Known MIME Type.)

    In order to stream down the data to the client correctly it is essential that clicking the "Download" button causes a full page postback and not a partial page postback. Consequently, we need to add a PostBackTrigger for each "Download" LinkButton in the GridView, which is done programmatically in the GridView's RowDataBound event.

    // C#
    protected void gvPictures_RowDataBound(object sender, GridViewRowEventArgs e)
    {
       if (e.Row.RowType == DataControlRowType.DataRow)
       {
          LinkButton lbDownload = e.Row.FindControl("lbDownload") as LinkButton;

          ScriptManager current = ScriptManager.GetCurrent(Page);
          if (current != null)
             current.RegisterPostBackControl(lbDownload);

       }
    }


    ' VB
    Protected Sub gvPictures_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvPictures.RowDataBound
       If e.Row.RowType = DataControlRowType.DataRow Then
          Dim lbDownload As LinkButton = CType(e.Row.FindControl("lbDownload"), LinkButton)

          Dim current As ScriptManager = ScriptManager.GetCurrent(Page)
          If current IsNot Nothing Then
             current.RegisterPostBackControl(lbDownload)
          End If

       End If
    End Sub

    This code allows for the GridView's sorting to still enjoy partial page postbacks while ensuring that the "Download" links will work as expected.

    Conclusion


    There are times when certain controls within an UpdatePanel need to trigger full page postbacks rather than partial page postbacks. The UpdatePanel allows developers to define PostBackTriggers, which specify what controls within the UpdatePanel will cause a full page postback. As this article showed, these PostBackTriggers can be set declaratively or programmatically. Be sure to download the demo to see the above code in action.

    Happy Programming!

  • By Scott Mitchell


    Attachments:


  • Download the Demo Code Used in this Article

    Further Reading


  • Using the UpdatePanel
  • How To Raise a "File Download" Dialog Box for a Known MIME Type
  • A Multipart Series on ASP.NET AJAX
    Over the past several years web developers have started using JavaScript to make asynchronous postbacks to the web server that only transmit and receive the necessary data; these techniques are commonly referred to as AJAX. Microsoft has released a free AJAX framework for ASP.NET developers named Microsoft ASP.NET AJAX. This article series examines using Microsoft's ASP.NET AJAX framework to build responsive user interfaces.

  • AJAX Basics and Getting Started with Microsoft's ASP.NET AJAX Framework - examines AJAX basics and looks at installing Microsoft ASP.NET AJAX; includes a demo of the UpdatePanel control.
  • Using the UpdatePanel - provides more in-depth and real-world examples of using the UpdatePanel.
  • Providing Visual Feedback with the UpdateProgress Control - shows how to use the UpdateProgress control to display visual feedback to the user when a partial page postback is in progress.
  • Performing Client Actions in Response to Partial Page Postbacks - learn how to execute client-side script in response to events raised by the partial page postback life-cycle.
  • Using the Timer Control - see how to asynchronously update a portion of the screen every n milliseconds.
  • Enabling Bookmarking and the Browser's Back Button - learn how to add history points to an AJAX-enabled web page so that your visitors can use their browsers' Back and Forward buttons and bookmarks.
  • Retrieving Server-Side Data Using Web Services - call Web Services from an ASP.NET AJAX application with a sprinkle of JavaScript.
  • A Look at JSON Serialization - explore the serialization format used by the ASP.NET AJAX Framework when calling Web Services from client-side script.
  • Triggering Full Page Postbacks From An UpdatePanel - learn how to override an UpdatePanel's default behavior and trigger a full page postback.
  • Refreshing An UpdatePanel With JavaScript - see how to refresh the contents of an UpdatePanel via JavaScript.
  • Rebinding Client-Side Events After a Partial Page Postback - discover how to automatically rebind client-side event handlers to HTML elements in an UpdatePanel after a partial page postback.
  • (Subscribe to this Article Series! )



    ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article