Home > Articles > ASP.NET Ajax Articles > Programmatically Update the UpdatePanel using ASP.NET

Programmatically Update the UpdatePanel using ASP.NET

by Shiva murugan   on May 15, 2011   Category: ASP.NET Ajax  | Level: Intermediate  |  Views: 22453    |  Points: 100   
Like this article? Bookmark and Share:
I’m going to describe how to update the Asp.net Ajax Update panel control programmatically. I’m using visual studio 2008 with this sample code

 

Introduction


Sometime we need to update the update panel from another update panel or within the update panel using programmatically C# code behind. Here I will show you how to update the update panel from another panel. By clicking the button from one update panel, which should update the date and time in another update panel.

ScriptManager and UpdatePanel


So we need to have script manager control and update panels as shown below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="updatepanel.aspx.cs" Inherits="WebApplication2.updatepanel" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Update Panel test</title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

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

        </asp:ScriptManager>

        <table border="1">

            <asp:UpdatePanel ID="UpdPnlTime" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">

                <ContentTemplate>

                    <tr >

                        <td style="width:100px;height:30px">

                            <asp:Label ID="lblTime" runat="server" Text="Current Time"></asp:Label>

                           

                        </td>

                        <td>

                            <asp:Label ID="lblPrintTime" runat="server" Text=""></asp:Label>

                        </td>

                    </tr>

                </ContentTemplate>

            </asp:UpdatePanel>

            <asp:UpdatePanel ID="UpdPnlBtn" runat="server">

                <ContentTemplate>

                    <tr>

                        <td style="width:100px;height:30px" colspan="2" align="center">

                            <asp:Button ID="btnGetTime" runat="server" Text="GetTime" OnClick="btnGetTime_Click" />

                        </td>

                    </tr>

                </ContentTemplate>

            </asp:UpdatePanel>

        </table>

    </div>

    </form>

</body>

</html>

 


The ScriptManager will handle the all AJAX related calls and update panel. As shown above add the ScriptManager and two update panels, the UpdPnlTime contain the label and UpdPnlBtn contain the btnGetTime button.

We need to set the update panel attribute UpdateMode as Conditional because no need to update all the postbacks and ChildrenAsTriggers as false to avoid updates.In the btnGetTime button click event will get current date and time and assign into the lblPrintTime label as shown below.

Refresh UpdatePanel using Update method

 

protected void btnGetTime_Click(object sender, EventArgs e)

{

   lblPrintTime.Text = DateTime.Now.ToString();

   UpdPnlTime.Update();

}

 

Update(); method from UpdatePanel will used to update UpdPnlTime panel after assign the value into label.

Now if you click the GetTime button, the current date and time details are assigned to the label and Update() method will refresh the UpdPnlTime update panel.

Conclusion


So now we know how to programmatically update the update panel easily.





Like this article? Bookmark and Share:

Most viewed Articles

User Comments


No response found, be the first to review this article.

Submit feedback about this article

Please sign in to post feedback

Latest Posts