To read the article online, visit http://www.4GuysFromRolla.com/articles/090209-1.aspx

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

By Scott Mitchell


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!

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
  • Article Information
    Article Title: ASP.NET.Building Interactive User Interfaces with Microsoft ASP.NET AJAX: Triggering Full Page Postbacks From An UpdatePanel
    Article Author: Scott Mitchell
    Published Date: September 2, 2009
    Article URL: http://www.4GuysFromRolla.com/articles/090209-1.aspx


    Copyright 2017 QuinStreet Inc. All Rights Reserved.
    Legal Notices, Licensing, Permissions, Privacy Policy.
    Advertise | Newsletters | E-mail Offers