Introduction

AJAX enables the ASP.Net web pages for the Partial-Page rendering to update the content of server controls placed inside the UpdatePanel. AJAX UpdatePanel control separates the controls collection inside it from other controls of the web page. There are some properties of UpdatePanel that controls the asynchronous postbacks that stops the whole page refresh to update the desired content bound to any ASP.Net server control.

AJAX UpdatePanel Triggers

UpdatePanel triggers: A collection of trigger events that can cause the UpdatePanel to be updated.

Above code displays the AsyncPostBackTrigger associated with the button control with ControlID Button1 and trigger EventName = ”Click”. When associated button control is clicked it causes the asynchronous postback and updates the related UpdatePanel without refreshing the whole web page.

AJAX UpdatePanel UpdateMode

UpdatePanel UpdateMode supports 2 values i.e. Always or Conditional
UpdateMode Always causes the UpdatePanel to be updated when any postback event is fired.
UpdateMode Conditional causes the UpdatePanel to be updated only when its associated trigger is fired.

Implementing the Partial-Page Updates

To implement the Partial Page Updates with ASP.Net AJAX place 2 UpdatePanel controls on your web page. These UpadatePanel controls will help you to differentiate the content updated visually by asynchronous postbacks without refreshing the whole page. This approach increases the speed of web pages as well as reduces the server load and provides well user experience.

You can download the sample below this article to learn the code for implementing partial page rendering using AJAX UpdatePanel control by just setting the few of its attributes such as UpdateMode and Triggers collection.

HTML code for Partial Page Update

You can use the similar code for placing the second UpdatePanel. Notice the UpdateMode of above UpdatePanel, also the controlID of AsyncPostBackTrigger associated with button control outside the UdpatePanel.

These settings enable the Partial Page Update by updating only the content of Label control placed inside the above UpatePanel.

Download the sample code here:

ajax partial update.zip (1.36 kb)