In AJAX, we can specify areas of a page to be refreshed without refreshing the whole page. For this, we use UpdatePanels, which also have the ability to make use of triggers. These triggers allow us to specify which control initiates a certain postback. We can choose to initiate a partial postback, or a full one.

In this example, we will look at how we can specify different controls to refresh the whole page, and parts of the page. We will create two UpdatePanels and see how we can refresh each of them as well as refresh the whole page with the triggers.

First, we will start off by adding the ScriptManager, if it’s not already there, like so:

This will handle all of our AJAX calls for us, which makes it a lot easier to develop AJAX applications.
Next, we add the UpdatePanel controls:

Each UpdatePanel has its own ContentTemplate, which is the area that will be refreshed upon an Asynchronous postback. We have included a label in each content, and will use the code-behind to display the current time. This will allow us to easily see what area of the page is being refreshed – we will also put a label and a button outside of the UpdatePanels so that we can see when the whole page is being refreshed – independent from the Panels.

We will use the button outside of the UpdatePanel to refresh the panel, and the button within the UpdatePanel to refresh the whole page. By default, a postback called within an UpdatePanel will be hijacked by AJAX. Using triggers, we can have more control.
We add another label and a button:

Now that we have a label and button on our page, and also in each UpdatePanel, we will add the code-behind:

This simply sets the current time to the labels we created when the page is loaded. This will also run when a partial postback is performed.

Buttons are not the only control we can use for triggers. We will also add a DropDownList:

Finally, we can add the triggers. We will use the button outside of the UpdatePanels to reload them, and the button inside the first Panel will reload the page. The DropDownList will reload the Panels:

The ASPX page will now look something like this:

Download Source Files