Making Good Use of the UpdatePanel

Let's first review the basic interaction between a browser and a web server. First, responding to an HTTP GET request, the server returns an HTML page to be displayed by the browser. From there, the user can interact with the page, causing an HTTP POST of the page's FORM to be sent back to the server.

A traditional approach used by ASP.NET developers is to initialize the page's content upon receiving the HTTP GET request, and to skip this costly step when the page is postbacked:

/// <summary>
/// Occurs when the page is loaded.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Load(object sender, EventArgs e)
{
// Do not consider postbacks.
if (this.IsPostBack)
{
return;
}
// Initialize the page's data.
this.DisplayAnimals();
this.DisplayPlaces();
}

If the page needs to be updated following an HTTP POST, only the required part is updated, thus minimizing the usage of resources on the server:

/// <summary>
/// Occurs when the Animals buttons is clicked.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void btnAnimals_Click(object sender, EventArgs e)
{
// Update only the required page's data.
this.DisplayAnimals();
}

The strategy described above makes no use of Ajax, yet it does partial page rendering. Following an HTTP POST, only the parts of the page that need to be updated are rendered, while the rest of the page is kept as initialized by the ViewState mechanism.

So we have a solution that is nice to the server resources, but not as so on the bandwidth. First, the server respond to every HTTP POST with the full HTML of the page, even if we have changed only part of it. Second, the ViewState mechanism bloats the page's HTML and only aggravates the situation.

The advent of ASP.NET Ajax introduces the concept of partial page updates. While the web server still renders the whole page to respond to an HTTP POST request, only a part of the page's HTML can now be returned. This HTML is then dynamically replaced in the browser page by clever client scripts.

Combined with our partial page rendering strategy, the UpdatePanel provides a strong solution to prevent page refreshes in the browser. First, only the required HTML is rendered by the server, and then, only the rendered HTML is sent back to the browser.