How to optimize a page with multiple Ajax Update Panels

Note: Please read first the article How to optimize Ajax partial rendering.

By default, the server sends the HTML for the all UpdatePanels, which are used for Ajax partial rendering, in the page to the client. If the page has two UpdatePanels and when a button is clicked in the first one, a value in the second one is updated. If the server sent HTML for the first panel only, the second one would never be updated and the Web application would end up showing stale data.

Sometimes this behavior is unnecessary and causes a significant performance slowdown. For those cases, Web developer can set the UpdateMode property to Conditional. This setting instructs the UpdatePanel to be updated only when a control inside it or one specified in the Triggers collection causes a PostBack.

<asp:UpdatePanel runat=”server” UpdateMode=”Conditional”>

Now, when a control in an UpdatePanel issues a PostBack, the server sends to the client the HTML code for that UpdatePanel only and Web page performance is improved.

Depending on the runtime condition, Web developer might need to update another panel. In these cases, he/she can programmatically cause the other panel to be updated by calling the Update method of the UpdatePanel class:

In C#:

otherPanelField.Text = “Value”;
otherPanel.Update();

 

In VB.NET:

otherPanelField.Text = “Value”
otherPanel.Update()

 

The result of this code is that the first panel is updated because a control inside it caused the PostBack, and the second one is updated because it was explicitly marked via code.

 

If you want to host ASP.NET AJAX application then you will need ASP.NET AJAX hosting provider which supports AJAX Framework.