Introduction

In this article we'll try to find a solution for a common problem that arise when we try to create a client-side control associated to a server control contained in an UpdatePanel: the reference to the associated DOM element is loosed after the first partial postback.

Scenario

The UpdatePanel control is one of the most used server controls provided by the MS ASP.NET Extensions. It allows to update a portion of a web page without the need to refresh the whole page, thanks to the AJAX infrastructure provided by the MS AJAX Library.

If you have never heard about the UpdatePanel, please check this tutorial.

Often, when designing the logic for our application, we need to associate a client-side counterpart (a MS AJAX control) to a server control contained in an UpdatePanel. Consider the following code snippet:

In the above snippet, we have created an UpdatePanel (be sure to drop a ScriptManager control with EnablePartialRendering="true" in the page) and dropped three server controls inside its ContentTemplate: a TextBox, a Label and a Button. Outside the UpdatePanel we have a simple HTML button.

Our purpose is to "echo" the text typed in the TextBox by displaying it in the Label. If we click the asp:Button, the Label's text will be updated on server-side through a partial postback, thanks to the following code, that handles the Button1's Click event:

If we click on the HTML button, the same thing happens, but this time the Label's text is updated via JavaScript. To do this, we have to add the following code in a JavaScript block:

As you can see, in the pageLoad() function (that is called when the page has finished loading) we are associating a MS AJAX control to each of the server controls contained in the UpdatePanel. Then, we are handling the click event of button2 and displaying in the Label the text typed in the TextBox.

Troubles

The above code seems to be correct, but try to run it and type something into the TextBox. Now, click on the "server-side echo" button; at this point, a partial postback occurs and the text is displayed in the Label. Nice. Finally, modify the TextBox's text and, this time, click on the "client-side echo" button. Surprisingly, a JavaScript error occurs and the application crashes unexpectedly. What's happening there?

Solution

When a partial postback is fired, all the content in the ContentTemplate of the UpdatePanel is updated and the new HTML for that portion of the page is sent back to the client in the response to the asynchronous request. At this point, the new HTML replaces the old one, invalidating all the references saved previously. This means that the $("Label1"), $("TextBox1") and $("Button2") now contain invalid references, since the corresponding DOM elements have been recreated by replacing the old HTML with the new one. Plus, if one of the DOM elements was associated to a MS AJAX control, the associated control has been disposed before firing the partial postback.

A solution to this problem is to re-initialize the client-side controls whenever a partial postback occurs. This could be done by intercepting a change in the inPostBack property exposed by the PageRequestManager. This property is set to true before starting a partial postback, and set back to false when the update process is completed. The trick is to initialize all the client-side controls associated to the server controls inside an UpdatePanel in a separate function that is called when the page is loaded for the first time, and then whenever a partial postback occurs. This is the updated code to put into the JavaScript block:

Conclusions

If you run the updated code, you can verify that the text is correctly echoed from server-side and from client-side, without breaking the application, thanks to the initializeControls() method that restores the client-side controls whenever a partial postback occurs.

In this example, we showed how to solve the problem of restoring the client-side controls associated to server controls contained in the UpdatePanel, that are disposed during a partial postback.

About Alessandro Gallo

Alessandro "Garbin" Gallo is a Microsoft MVP in the Visual ASP/ASP.NET category and a .NET developer/consultant. He is a contributor for the Ajax Control Toolkit project, owned by Microsoft. Alessandro won the Grand Prize at the "Mash-it-up with ASP.NET AJAX" contest held by Micr... This author has published 23 articles on DotNetSlackers. View other articles or the complete profile here.