Building Interactive User Interfaces with Microsoft ASP.NET AJAX: Triggering Full Page Postbacks From An UpdatePanelBy Scott Mitchell
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.
Adding a PostBackTrigger to an UpdatePanel via this dialog box results in the following declarative markup:
The demo available for download at the end of this article includes a page named
DeclarativeApproach.aspx that contains two UpdatePanels named
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
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.
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
This code allows for the GridView's sorting to still enjoy partial page postbacks while ensuring that the "Download" links will work as expected.
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.