OdeToCode IC Logo

AJAX UpdatePanels and ContentPlaceHolders

Thursday, January 4, 2007

I've seen the following model popup frequently:

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

asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">
NavigateUrl="~/Default.aspx" Text="Default.aspx" />
NavigateUrl="~/Default2.aspx" Text="Default2.aspx"  />

asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"/>

This is an ASP.NET MasterPage with a content placeholder wrapped inside an UpdatePanel. A menu control provides links to default.aspx and default2.aspx - both content pages that use this master page.

The misconception is that the update panel will magically reload only the area inside the ContentPlaceHolder control when the user clicks on a navigation link in the menu. This example uses a menu, but we could substitute any type of control that generates hyperlinks to a new page. Since both pages use the same master page, this behavior seems plausible.

The behavior described above isn't how AJAX and MasterPages work, however.

First, the hyperlink forces the browser to navigate to an entirely new page. There is no opportunity for the partial page rendering magic of AJAX to work. When the user clicks a navigational link, the browser will load 100% of the new page. If you want to update just the content area then you need the browser to stay on the same content page.

Secondly, ASP.NET always mashes the MasterPage and ContentPage into a single piece of output. From the client browser's perspective, it's all coming from the same resource. Each new page request will require ASP.NET to recreate both the master page and content page (assuming there is no caching). If you want to embed the contents of a new page into an existing page, then HTML IFRAME element still wants to be your friend.