Csharp Code Samples

In most asp.net applications users experience post backs as a result of submit action by the client browsers. These post backs can be quite annoying when just a small part of the page needs to be refreshed. Update panels are designed to perform partial post back eliminating the need for doing a complete post back for updating a part of the page.

But are these post backs truly partial? In this article we try to find out if Update panels actually improve performance by doing partial post backs or do they end up degrading it.

Need for using update panels

Update panels are generally used in cases where a certain action by the user causes a part of the page to be updated. For example a user selects a value from a DropDownList and based on the selected value some database flag needs to be updated. For achieving this request has to be made to the server to invoke the OnSelectedIndexChanged handler of the DropDownList.

Traditionally this would cause a post back when a selected index is changed. However if the DropDownList is wrapped in an update panel, the user will not experience the entire page refresh or post back. The page will appear as it is; only the DropDownList will refresh.

Comparing Request Objects

To test the bandwidth utilization in both cases with and without update panels, we develop a small web application.

Two DropDownLists are added to the page. Both have the same list items. And they cause a post back when the selected index is changed. The post back is handled by the same event handler. Both the DropDownLists are identical except for the fact that the second one is placed inside an update panel.

The SelectedIndexChanged handler writes a JavaScript to display the content length of the request. Note that response write will not work in the case of update panel.

Download the attached sample to test yourself

The Result

As you can see from the result using the update panel the request is always about 60 to 70 bytes more than it is in the normal case.

You would expect the request to be smaller as only one DropDownList is refreshing. But in reality the request is same as it is in the normal case without an update panel. And additionally adds a few extra overhead bytes.

The request carries the ViewState information of all the controls on the page regardless of them being inside or outside the update panel. Even though the state of the controls that are outside the update panel will not get updated until an actual post back occurs.

JSON Alternative

A similar sort of functionality can be achieved by using JSON alternatives. JSON (JavaScript Object Notation) is a XML format which serializes data and transfers is between client and server. It is quite similar to web services and SOAP format.

We use PageMethods to execute a server side method using JavaScript. For supporting this we have to set the EnablePageMethods property of ScriptManager as true.

Show Code

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

In the .aspx.cs file create a WebMethod which will handle the request. In this example the request objects size is returned so that we can compare it with the previous update panel example.

Show Code

[WebMethod]
public static string SelectedIndexChanged(int selectedValue)
{
    return HttpContext.Current.Request.ContentLength.ToString();
}

And finally a JavaScript function is implemented which will be called on the ‘onchange’ event of the DropDownList. This function invokes the server side method.

Show Code

<script type="text/javascript">
function SelectedIndexChanged(selectedValue) {
    PageMethods.SelectedIndexChanged(selectedValue, OnSucceeded);
}
function OnSucceeded(result, userContext, methodName) {
    alert(result);
}
</script>

Using JSON the request size was just 21 bytes as compared to 400+ bytes using update panels.

Conclusion

Update panels are very convenient to use. They require hardly any knowledge of the complex JavaScript they implement to achieve the amazing functionality they provide. Update panels try to achieve refresh less post backs without interfering with the page life cycle. The developer does not have to handle events any differently.

However there is a trade off in performance as update panels use up more bandwidth. As a result it is advisable to limit the use of update panels. In fact completely avoid it if possible by using techniques such as JSON.

Download Sample
AjaxTest.zip