Home  »  Code Snippets  »  AJAX  »

Multiple Update Panels in single aspx page

 Posted By : Manoranjan SahooPosted Date : 24/11/2010 06:02:58 AM Category : AJAX Points : 6

We knew about Update Panel and how it works in simple form.  Let us explore the scenarios where we have multiple Update Panels.

One of the main properties of an UpdatePanel is UpdateMode property.  The UpdateMode property is by default set to "Always".
When we have more than one update panel or when you want to control the refresh action of the Update Panel, then setting the UpdateMode property to "Conditional".

Let us consider a scenario where we have 2 Update Panels in a single page.  For simplicity I am attaching one Label to Display Current DateTime. See below example : 

aspx page :


 <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div>
        <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <b><u>Panel-1</u></b>
                <br />
                <br />
                <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
                <br />
                <br />
                <asp:Button ID="Button1" runat="Server" Text="Refresh" OnClick="Button1_Click" />
            </ContentTemplate>
            </asp:UpdatePanel>
            </td>
            <td>
            <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <b><u>Panel-2</u></b>
                <br />
                <br />
                <asp:Label ID="Label2" runat="server" Text=""></asp:Label>
                <br />
                <br />
                <asp:Button ID="Button2" runat="Server" Text="Refresh" OnClick="Button2_Click" />
            </ContentTemplate>
            </asp:UpdatePanel>
            </td>
        </tr>
        </table>
    </div>
    </form>


Note : For all the UpdatePanels, I have set the UpdateMode to conditional. you can set as per your need.

aspx.cs page :

 protected void Page_Load(object sender, EventArgs e)
 {
    Label1.Text = DateTime.Now.ToString();
    Label2.Text = DateTime.Now.ToString();
 }
 protected void Button1_Click(object sender, EventArgs e)
 {
 }
 protected void Button2_Click(object sender, EventArgs e)
 {
 }


When you run the above code, you will notice that there are two panels - Panel-1 and Panel-2.  When you click on the Refresh button of a specific panel, the date time value gets refreshed only for that particular panel.  The other panel doesn't get changed.

If you remove the UpdateMode="Conditional" from any of the UpdatePanel declarations, then you will notice that the Labels of that panel get refreshed at all the time.

Hence, setting the UpdateMode as Conditional is important if you like to control the way the UpdatePanels get refreshed.

Thank You.

Responses
No responses found for this thread. Be the first to respond this thread.
Post Reply
Login to post Response.