Mabaloo - Using UpdatePanel In Visual Web Developer

Using UpdatePanel In Visual Web Developer

Written by deepesh

This article aims at giving you a brief overview of using Update Panel(Available with AJAX Toolkit) for partial page rendering.
Before reading this tutorial you should be familiar with ASP.NET and C#.

Requirements

Visual Web Developer 2005 Express Edition (Available freely from the Microsoft website).
AJAX Extension (Available at www.asp.net).

Creating The Application
Now we can create our first AJAX-Enabled website with a timer control.

Open Visual Web Developer 2005 Express Edition and create a new Web Site. In the "New Web Site" dialog chose "ASP.NET AJAX-Enabled Web Site".

This template is installed in Visual Web Developer 2005 Express Edition because we've previously installed the AJAX Extension.
When the new project is created you can see, in the Design mode, that the newly created ASP.NET page already has an ScriptManager. Every page that uses Microsoft AJAX needs to have a ScriptManager instance (and only one).
Drag a Label from the Toolbox into the page and name it lblTime, and a Button called btnUpdate which has the Text property set to "Update".

Now, to display the current time in the label add the following code to that PageLoad event handler.

protected void Page_Load(object sender, EventArgs e)
{
lblTime.Text = DateTime.Now.ToString();
}

The end result should look something like image bellow.

This is a simple page with a label and a button with the label showing the time when the page was loaded. When we hit the Update button the whole page refreshes and displays the current time in the label. What really happens is that clicking on the button triggers a postback so the Page Load handler is reached and the lblTime's Text property is updated with the current time.

Ok until now we have created a simple page without any AJAX and that only displays the current time that too on a button click. Truly this is not what we are here for.

Let's now modify a bit the application, so it makes use of Microsoft AJAX.

The installation of AJAX Extension on the system creates a new tab in the Toolbox with some items.

One of the most used controls among them is the "UpdatePanel". UpdatePanel is a very powerful control because all the controls that are nested within this control are automatically updated without page reload.

Drag an UpdatePanel in the page and move the lblTime and the btnUpdate controls in this control so the code behind looks something like this:

Now re-run the application. the Update button updates the time in but without reloading the entire page so that the change happens smoothly. This is a bit of improvement over the above application.

But what helpful is a time indicator if it only displays the current time and only when a button is clicked. So, let’s further improve the application.

Delete the btnUpdate control from the page and add a Timer control from the AJAX Extensions Toolbar tab to the UpdatePanel in the page and set its "Interval" property to 1000.

The Timer control in the AJAX Extensions triggers a postback at a specified amount of time. This is what we've done here: we're telling the page to reload itself every second. But thanks to the UpdatePanel in which this Timer is located only the UpdatePanel is reload.

Now the aspx code should look like this:

And now the page displays a fully functional clock: it updates each second to display the current time. This is possible because the default value of the "UpdateMode" property is set to "Always": this tells the UpdatePanel to update itself each time one of its child controls causes a postback. The other option for the UpdateMode property is "Conditional". In order to build rich interactive user interfaces you must fully understand the functionality of the UpdatePanel. So let's modify a little bit our application and observe the changes.

The Update Panel

Let me now explain the update panel using the previous example:-
Place the timer outside the UpdatePanel. In certain application (which are quite frequent) we can't always have a control reside inside an UpdatePanel or we want al control placed outside the update panel to update the UpdatePanel.
In this situation the timer updates each second but the whole page is reloading.
To make the page more appealing or having a partial rendering of the page we have to add a AsyncPostBackTrigger element to the Triggers property of the UpdatePanel and add Timer1 as the trigger element and the EventName to Tick(Tick is the event raised by the timer each time it triggers a postback).
Now the aspx code should look something like this:

This is a basic example of how to use UpdatePanel and Timer controls and the Partial page update pattern to convert a classic ASP.NET page into an AJAX-enabled one.