Home > Ajax, ASP.NET > The AJAX UpdatePanel Is it your worst enemy?

The AJAX UpdatePanel Is it your worst enemy?

November 17th 2009 | Kevin Jones

The AJAX UpdatePanel: Is it your worst enemy?

A recent code camp presentation I did sparked a debate about the “UpdatePanel” in AJAX. It’s no secret I believe it barely qualifies as real AJAX at all.

Most AJAX Frameworks have the UpdatePanel, and they are all similar in function, but I’m referring specifically to the one built into the Microsoft AJAX Framework. If you haven’t used AJAX before, it’s a useful tool to know and understand, but I wouldn’t recommend going much further than that.

The UpdatePanel is a control that simply designates its contents as an asynchronous callback, or “AJAX” call. Take a look at this ubiquitous example of updating a label with the servers time – sans a postback:

<asp:ScriptManager runat="server" ID="MyScriptMap" EnablePartialRendering="true" />
<asp:UpdatePanel runat="server" ID="TimeUpdatePanel">
    <ContentTemplate>
        <asp:Label runat="server" ID="TimeLabel" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="UpdateTimeButton" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>
<asp:Button runat="server" ID="UpdateTimeButton" OnClick="UpdateTimeButton_Click" Text="Update Time" />

The code behind it looks like this:

protected void Page_Load(object sender, EventArgs e) {
    SetTime();
}

private void SetTime() {
    TimeLabel.Text = DateTime.Now.ToString("G");
}

protected void UpdateTimeButton_Click(object sender, EventArgs e) {
    SetTime();
}

Pretty simple. When we click the UpdateTimeButton the label updates the time with the current time, and without causing a postback. Great, right? It’s easy and requires little knowledge of advanced AJAX functionality.

Then what’s the problem?

Firstly, it’s slow and cumbersome. Secondly, it’s not very flexible. Let’s use our trusty tool – Firebug – to see what the AJAX Framework is really doing under the covers.

Here’s the post:

MyScriptMap MyScriptMap|UpdateTimeButton
UpdateTimeButton Update Time
__ASYNCPOST True
__EVENTARGUMENT
__EVENTTARGET
__EVENTVALIDATION /wEWAgLsi+LQBwLJqc+YBE5RYQbIcM8reKtnUnkQkSFh4HRl
__VIEWSTATE /wEPDwULLTE4MzQ0ODUyNDIPZBYCAgMPZBYCAgMPZBYCZg9kF

gICAQ8PFgIeBFRleHQFFDExLzgvMjAwOSA3OjEzOjEwIFBNZG

RktDZ2TbaSW4PmU5zi/+6LeFQPeOA=

According to IIS, this is about 344 bytes. That’s a lot of data to post just to get a new date. So why did we need to post so much information?

The ViewState is the biggest part of this. ASP.NET fundamentally uses the ViewState for a whole slew of reasons, but in order for ASP.NET to process the request it needs the ViewState. There is also a field called the EventValidation. It contains information that ensures the ViewState hasn’t been tampered with. Since the EventValidation goes together with the ViewState, the AJAX call needs to send this information too. The rest of the data tells the ASP.NET runtime exactly what happened: which button was clicked; the name of the ScriptManager; etc.

That’s quite a bit of information. This is what the server sent back:

55|updatePanel|TimeUpdatePanel|<span id=”TimeLabel”>11/8/2009 7:13:35 PM</span>|128|hiddenField|__VIEWSTATE|/wEPDwULLTE4M

zQ0ODUyNDIPZBYCAgMPZBYCAgMPZBYCZg9kFgICAQ8PFgI

eBFRleHQFFDExLzgvMjAwOSA3OjEzOjM1IFBNZGRkbHZ0Gxr67

EAa/bNdqZfXC6A7YPA=|48|hiddenField|__EVENTVALIDATION|

/wEWAgLUiOrpBgLJqc+YBK3kgBaC8Pr4C9SpWuCECT5qBkBH|16|

asyncPostBackControlIDs||UpdateTimeButton|0|postBackC

ontrolIDs|||16|updatePanelIDs||tTimeUpdatePanel

|0|childUpdatePanelIDs|||15|panelsToRefreshIDs||TimeUpda

tePanel|2|asyncPostBackTimeout||90|20|formAction|

|UpdatePanelTime.aspx|

Much more than just a simple date and time. ASP.NET is sending back a lot of information in the form of a single string that is delimited by pipes, and parsing it. The total size of it as IIS is 556 bytes. After the third pipe you’ll find the content of the label we were updating – HTML and all. This is the essence of the UpdatePanel. It works by sending its content to the server and the server sends back new content. The client framework then replaces the old content with the new content.

Clever enough, but it can lead to poor performance and bad design.

Is there a different way?

Yes, and though it can be a little inconvenient you gain more in the long term.

AJAX is Asynchronous JavaScript and XML. Ironically, XML is becoming the less popular means of AJAX communication. JSON (pronounced Jason) has become the primary means of AJAX based requests. JSON is easy to work with, and more compact than XML. Here is a simple example of a key and value pair.

[
    {"Key":"The Key 1","Value":"The Value 1"},
    {"Key":"The Key 2","Value":"The Value 2"}
]

In .NET, it’s fairly easy to return JSON data from a web service so long as all of the types returned can be serialized. If we were to create a simple web service that returns the date and time, we could use JavaScript to request it from the web service. The Microsoft AJAX Framework includes a framework to make this much easier than hand coding requests from JavaScript. Here is what our web service method looks like:

[WebMethod]
[ScriptMethod(UseHttpGet = false)]
public string GetDateAndTime()
{
    return DateTime.Now.ToString("G");
}

It looks like a typical web service method, but notice the addition of the ScriptMethod attribute on the method. In order to wire AJAX into a web service, additions to the web.config file are required. Visual Studio 2008 will create a new web.config file with all of the correct settings in place to get you started with AJAX.

Calling it from our client side script is very simple:

<div>
    <asp:ScriptManager runat="server" ID="MyScriptMap" EnablePartialRendering="true">
        <Services>
            <asp:ServiceReference Path="~/DataSource.asmx" />
        </Services>
    </asp:ScriptManager>
</div>
<script language="javascript" type="text/javascript">
    function updateTime() {
        var service = new Ajax4Samples.DataSource();
        service.GetDateAndTime(iHaveDateAndTime, null, null);
    }

    function iHaveDateAndTime(theTime) {
        var myTimeSpan = $get('MyTimeSpan');
        myTimeSpan.innerHTML = theTime;
    }
</script>
<span>The Server's Time is: </span>
<span id="MyTimeSpan"><%= DateTime.Now.ToString("G") %></span>
<input type="button" onclick="updateTime();" value="Update Time" />

This is a page that updates a span—MyTimeSpan—with the response from what the web service returns. We do this by adding our web service as a ServiceReference. It generates a large piece of JavaScript that allows communication with the web service. From there, a few lines of JavaScript request the data from the service. When we click Update Time, we don’t actually send any data to the server. And why should we?

The response is as simple as this:

{“d”:”11/8/2009 8:22:26 PM”}

Just a date and a time that totals 28 bytes. The “d” is a little bit of magic that the AJAX Framework itself is using. However when you consume it you needn’t worry about the “d”. The AJAX Framework includes some metadata in responses to make things easier, such as type names, to allow for a typing system.

Sure there’s a little more coding to it but it allows a greater degree of freedom and functionality with AJAX. There are other frameworks that complement the Microsoft AJAX one, including jQuery which allows for easy manipulation of the DOM and finding controls.

My conclusion: avoid the update panel at all costs. It’s cheap and easy to implement, but it’s slow and doesn’t allow adequate flexibility.

Kevin Jones is a Team Lead at Thycotic Software, an agile software services and product development company based in Washington DC. Secret Server is our flagship password management software product. On Twitter? Follow Kevin

Categories: Ajax, ASP.NET
  1. No comments yet.
  1. November 19, 2009 at 1:08 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: