F9 Group Marketing and Technology Blog

The UpdatePanel is the workhorse of the ASP.NET Ajax library. It is responsible for defining regions of a web page that trigger partial page postbacks (as opposed to full page postbacks). Such partial page postbacks transfer less information between the client and server and have their user interfaces updated seamlessly, thereby leading to a more interactive user experience. (For more information on UpdatePanels, refer to Using the UpdatePanel .) One side-effect of a partial page postback is that the HTML elements within the UpdatePanel are replaced with the markup returned on postback. This behavior is not noticeable and is not an issue unless you have client-side event handlers wired up to the elements within the UpdatePanel. Such client-side event handlers are lost after a partial page postback.

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, UpdatePanels allow page developers to refresh selected parts of the page (instead of refreshing the entire page). Typically, an UpdatePanel contains user interface elements that would normally trigger a full page postback – controls like Buttons or DropDownLists that have their AutoPostBack property set to True. Such controls, when placed inside an UpdatePanel, cause a partial page postback to occur. On a partial page postback only the contents of the UpdatePanel are refreshed, avoiding the “flash” of having the entire page reloaded. (For a more in-depth look at the UpdatePanel control, refer back to the Using the UpdatePanel installment in this article series.) Triggering a partial page postback refreshes the contents within an UpdatePanel, but what if you want to refresh an UpdatePanel’s contents via JavaScript? Ideally, the UpdatePanel would have a client-side function named something like Refresh that could be called from script to perform a partial page postback and refresh the UpdatePanel. Unfortunately, no such function exists. Instead, you have to write script that triggers a partial page postback for the UpdatePanel you want to refresh

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

AJAX applications offer a more interactive user experience by replacing traditional full page postbacks with leaner and more efficient partial page postbacks. These partial page postbacks are executed asynchronously using JavaScript code in the browser. When a web surfer clicks on a link or submits a form (via a full page postback) the browser automatically adds the page being left to the browser’s history