UpdatePanel Control

1)UpdatePanel Control is available in ASP.NET AJAX package.

2)This control allows partial rendering of the page i.e.it AJAX'ify controls contained within it. This control allows to refresh selected parts of the page instead of refreshing the whole page with a postback. This is referred to as performing a partial-page update.For partial-page updates a Web page should contain a ScriptManager control and one or more UpdatePanel. One does not need to write custom javascript when this control is used.

3)The page behaviour becomes browser independent when UpdatePanel control is used, also reducing the amount of data that is transferred between client and server.

4)The tag has two childtags - the ContentTemplate and the Triggers tags.

The ContentTemplate: It contain content that is to be asynchronously updated while other parts of the page remain untouched. It can contain any HTML content with any ASP.Net server control.

The Triggers: The Triggers tag allows you to define certain triggers which will make the panel update it's content.

The ScriptManager is managing the client script for ASP.NET AJAX pages. This tag must be either in master page or asp.net page to show support of partial page updates.

Syntax of ScriptManager:

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

Syntax of UpdatePanel Control:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
     The content to be updated is placed here.
</ContentTemplate
</asp:UpdatePanel>

Example of UpdatePanel Control:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<Triggers>
<asp:AsyncPostBackTrigger controlid="UpdateButton2" eventname="Click" />
</Triggers>
<ContentTemplate>
<asp:Label runat="server" id="DateTimeLabel1" />
<asp:Button runat="server" id="UpdateButton1" onclick="UpdateButton&#95;Click"text="Update" />               
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" id="UpdatePanel2" updatemode="Conditional"><ContentTemplate>
<asp:Label runat="server" id="DateTimeLabel2" />
<asp:Button runat="server" id="UpdateButton2" onclick="UpdateButton&#95;Click" text="Update" />
</ContentTemplate>
</asp:UpdatePanel>

Code behind:

protected void UpdateButton_Click(object sender, EventArgs e)
        {
            DateTimeLabel1.Text = DateTime.Now.ToString();
            DateTimeLabel2.Text = DateTime.Now.ToString();

        }

Explanation of above program:

In this example two update panels UpdatePanel1 and UpdatePanel2 are created. UpdatePanel1 contain child tags ContentTemplate and Triggers.UpdatePanel2 contain only child tag ContentTemplate with property updatemode="Conditional". This property specifies that contents of UpdatePanel2 will be updated when UpdateButton2 is clicked not on every postback from the page.In UpdatePanel1 there is no such property so by default updatemode="always" which means contents inside this panel will be updated on every postback that originates from anywhere on the page. The triggers tag inside UpdatePanel1 ensures that on clicking button UpdateButton2, UpdatePanel1 will be also be updated.