Update from One UpdatePanel Elements to Another by Programmatically in ASP.NET

Introduction

In this snippet I will explain how to update one updatepanel elements from updatepanel content by programmatically. Let’s say sometimes you have more than one update panel in your page in that time you may have to update one textbox within the first updatepanel  by button,which exists in second updatepanel.

Here is the scenario. There are two update panels in my html code in first update panel there is textbox hello world and another update panel there is a button called btnHelloWorld. Now I want to update textbox text in button click event without post back. But in normal scenario It will not update the textbox text as both are in different update panel. Here is the code for that.

Html Code

<form id="form1" runat="server">
       <asp:ScriptManager ID="myScriptManager" runat="server" EnableCdn="true"></asp:ScriptManager>
       <asp:UpdatePanel ID="firstUpdatePanel" runat="server" UpdateMode="Conditional">
           <ContentTemplate>
               <asp:TextBox ID="txtHelloWorld" runat="server"></asp:TextBox>
           </ContentTemplate>
       </asp:UpdatePanel>
       <asp:UpdatePanel ID="secondUpdatePanel" runat="server" UpdateMode="Conditional">
           <ContentTemplate>
               <asp:Button ID="btnHelloWorld" runat="server" Text="Print Hello World"
                   onclick="btnHelloWorld_Click" />
           </ContentTemplate>
       </asp:UpdatePanel>
</form>

Here comes magic!!. Lots of people don’t know that update panel are providing the Update method from which we can programmatically update the update panel elements without post back. Below is code for that.

C# Code

protected void btnHelloWorld_Click(object sender, System.EventArgs e)
      {
          txtHelloWorld.Text = "Hello World!!!";
          firstUpdatePanel.Update();
      }

That’s it here I have updated the firstUpdatePanel from the code. Hope you liked it.Happy Programming.