Optimizing page updates with ASP.NET Panels

When you create a big ASP.NET page with a lot of different controls and make it AJAX-enabled using Ajaxium, you may notice a little flickering in some browsers during content updates. If you're sure that all your visitors are using IE, you may disregard it, since IE browsers perform off-screen layout composition and no visible flickering occurs when the page content changes. But if you want your website to be accessible, say, to FireFox or Safari visitors you have to find a way to eliminate this flickering nuisance. To start with, take a close look at the page you plan to optimize, since there might be no flickering at all and you have nothing to eliminate.

Now let's create an ugly page, which, being AJAX-ed, flickers in FireFox on each action. To make such a flickering page as easy as possible, let's use four calendar controls and one label which is changed when a date is selected in any of such calendar controls.

Looks quite crazy, doesn't? :) This page flickers noticeably in FireFox when you choose any date in any of the calendars -- so we have achieved our goal. Now let's see how we can get rid of this nasty thing.

Sure, you can just wrap each, quite separate, group of controls into a standard ASP.NET panel and forget about any analysis - Ajaxium will do the rest.

<asp:Panel id="Panel1" runat="server">

Any ASP.NET content

</asp:Panel>

But it will be better if we pinpoint which of the regions gets changed with a page update. Obviously, each calendar control is such a region, since you can change visible year and month of each control separately. And when you select any date in any of the calendar controls, a label at the top displays the current date. So we have five separate regions.

Note: You can place Panels anywhere you wish, since Ajaxium gracefully handles nested panels.

After placing panels on our calendar-saturated page, the source code will look as follows:

<%@ Page language="c#" Codebehind="Default.aspx.cs" AutoEventWireup="false" Inherits="CrazyCalendarsCS_vs2003.Default" %>

<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

<HEAD>

<title>Ajaxium - Optimizing page updates with Ajaxium Panels - C# VS 2003 Demo Project</title>

</HEAD>

<body>

<h4><asp:Label id="Label1" runat="server">Optimizing page updates with ASP.NET Panels</asp:Label></h4>

<asp:Panel id="Panel1" runat="server">

<asp:Label id="Label2" runat="server">Nothing selected</asp:Label>

<BR>

</asp:Panel>

<tr>

<td>

<asp:Panel id="Panel2" runat="server">

<asp:Calendar id="Calendar1" runat="server" BackColor="#C0FFFF"></asp:Calendar>

</asp:Panel>

</td>

<td>

<asp:Panel id="Panel3" runat="server">

<asp:Calendar id="Calendar2" runat="server" BackColor="#C0FFC0"></asp:Calendar>

</asp:Panel>

</td>

</tr>

<tr>

<td>

<asp:Panel id="Panel4" runat="server">

<asp:Calendar id="Calendar3" runat="server" BackColor="#FFC0FF"></asp:Calendar>

</asp:Panel>

</td>

<td>

<asp:Panel id="Panel5" runat="server">

<asp:Calendar id="Calendar4" runat="server" BackColor="#FFFFC0"></asp:Calendar>

</asp:Panel>

</td>

</tr>

</table>

</form>

</body>

</HTML>

Now if you open this page in a FireFox or Safari and play with the calendars no flickering will occur. The job is done, your FireFox and Safari visitors are happy and you deserve a cup of coffee to celebrate the event :)

Download full source code of the sample

ASP.NET 2.0 (C#)

ASP.NET 2.0 (Visual Basic .NET)

ASP.NET 1.1 (C#)

ASP.NET 1.1 (Visual Basic .NET)

Note: The source code is provided solely for education purposes. The code will neither compile nor run unless at least an Evaluation Edition of the Ajaxium server-side component is used.

Live Demo

See those calendars in action