Different methods for creating partial page updates

In the typical ASP.NET model, a web form is submitted and the entire page is posted back to the server. The server then generates a response which is then sent back to the client. With the widespread adoption of Ajax and Ajax frameworks, developers can create pages that do not undergo full page refreshes, thus enhancing the user experience. There are different methods for partial page updates and this article will examine two of these methods.

A very easy way that many ASP.NET developers are using to achieve partial page updates is adding an UpdatePanel control to the page. The UpdatePanel has made it dead simple to ajaxify ASP.NET pages. All we need to to do to add Ajax magic to an ASP.NET page is first add a ScriptManager control. Then we add an UpdatePanel and inside the UpdatePanel's <ContentTemplate> region we put the content we wish to enhance with Ajax as inthe following example. Note in this example it takes 5 controls - the ScriptManager, UpdatePanel, Textbox, Button, and Literal controls. In the Button1_Click event, i simply am setting the Label text equal to the value of the textbox.

<div id="divUpdatePanel" class="partialpageupdates">
    <ajax:UpdatePanel runat="server" ID="upTest">
        <ContentTemplate>
        <p>Partial page updates in this div requires a ScriptManager control, an UpdatePanel, a Textbox, a Literal, and Button control - 5 controls in all. </p>
           Type your name: <asp:TextBox ID="TextBox1" runat="server" />
            <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
            <p><strong><asp:label ID="Label2" runat="server"></asp:Literal></strong></p>
        </ContentTemplate>
    </ajax:UpdatePanel>
</div>

Below is a screen shot of what is transmitted over the wire when using an UpdatePanel. You can click to see the larger version. Note the size of the viewstate when using the UpdatePanel in Firebug.

Now it is time to look at an alternative method for creating partial page updates using the Gaia Web Widgets Framework. Gaia is alternative Ajax framework that is 100% compatible with MS Ajax. It uses the well known and widely used Prototype library. Using Gaia we can acheive partial page updates using just 3 controls. In the example enter your name and click the button and you'll see the label update with your name - all without a full page refresh and all without the UpdatePanel and ScriptManager controls. In the Gaia example we can also use a gaia:linkbutton or a gaia:imagebutton control. Here i am also using the Click Event to set the Label's text equal to the value of the textbox.

You can see a live demo here: http://riderdesign.com/demos/partialpageupdates.aspx. Note that this page uses MS Ajax and Gaia on the same page and that they play very nicely together.

<div id="divGaia" class="partialpageupdates">
<p>Partial Pages updates in this div are accomplished used the Gaia Web Widgets Framework. Three controls are needed - a gaia:textbox, gaia:button, and gaia:label. </p>
    Your name: <gaia:TextBox ID="TextBox2" runat="server"></gaia:TextBox>
    <gaia:Button ID="Button2" runat="server" Text="Submit" />
    <p><gaia:Label ID="Label1" runat="server"></gaia:Label></p>
</div>

Below is the screen shot showing the data sent over the wire with Gaia in Firebug. Clearly, we can see much less information is sent back to the server. Only a fraction of the data is transmitted between the client and server. These bandwidth savings will become cumulative across an entire Ajax enabled site, especially as page complexity increases.

The two examples have used essentially the same controls to keep the testing as consistent as possible. In both examples we a used a textbox, label.

Gaia does not require any javascript coding. All coding is done using the server side methods in VB.NET or C#. Gaia consumes much less bandwith than other Ajax frameworks since eveything is done on an "on-demand" basis.

This article has attempted to provide an objective comparison of MS Ajax and Gaia Web Widgets Framework. Gaia is a promising and viable alternative for the ASP.NET Ajax developer. This comparison clearly shows the difference between the two Ajax frameworks and how much lighter the Gaia Web Widgets Framework truly is.

You can try Gaia for free. You can download Gaia from http://ajaxwidgets.com. I advise you to give it a try and see for yourself.