The numbers don’t lie
Yesterday I talked about my hatred of postbacks and third party controls. Looking back on it, I didn’t include any numbers to back me up. Well, here are some numbers. In this scenario, I have a page that contains two dropdown controls. One is populated with the numbers one through 10. The second one is empty. The goals is to populate the second dropdown when a selection is made on the first dropdown. The first way we are going to implement this is through the typical postback method.
Full Page Postback
When an end user selects an item in the first dropdown, the browser will postback the entire page and code on the server will populate the second dropdown with data and send the updated html markup back to the browser to render again. When there is just a small portion of the page that needs to be updated (as is the case in our example), that can be quite expensive! In this example, I have various javascript, css, and image files that have to be downloaded from the server to the client on every load of the back.
Server-side VB.Net Code
'this method is executed when the page posts back after a selection is made in the first dropdown
Private Sub drp1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles drp1.SelectedIndexChanged
Dim letters As New List(Of String)
letters.Add("A")
letters.Add("B")
letters.Add("C")
letters.Add("D")
letters.Add("E")
letters.Add("F")
letters.Add("G")
letters.Add("H")
letters.Add("I")
letters.Add("J")
letters.Add("K")
letters.Add("L")
letters.Add("M")
letters.Add("N")
letters.Add("O")
letters.Add("P")
letters.Add("Q")
letters.Add("R")
letters.Add("S")
letters.Add("T")
letters.Add("U")
letters.Add("V")
letters.Add("W")
letters.Add("X")
letters.Add("Y")
letters.Add("Z")
drp2.DataSource = letters
drp2.DataBind()
End Sub
The Server-side Numbers
When running this, we get a total of 218,049 bytes being sent from the server back to the browser. This number includes the actual html of the entire page, and any necessary javascript, css, or image files that are needed on the page. That is a lot of data!
Ajax Post
When an end user selects an item in the first dropdown, a javascript handler will call the server with a request for data to populate the second dropdown. The server gets the request and sends back just the data requested. The browser gets that data and puts it in the second dropdown. There is no page refreshing. There is no html, javascript, css, or image files being sent back to the client, because they are already there. It is very light!
jQuery Code
$(document).ready(function() {
$("#").change(function() {
//when a selection is made in the dropdown
//do an ajax post back to the page and get a list of strings
$.ajax({
type: "POST",
url: "WebForm1.aspx/GetNextCombobox",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
//we convert it into an array
var arr = jQuery.makeArray(msg.d);
//we find the dropdown we want to populate with data
var dd = $("#");
//let us empty it first of any existing data
dd.empty();
$.each(arr, function(i, v) {
//for each item in the array we got from the server, place it into the dropdown
dd.append($("").val(v).text(v));
});
}
});
});
});
Server-side VB.Net Code
I am still trying out different syntax highlighters for my blog. This one is sometimes adding extra tags when not needed. Please excuse my malformed webmethod tag(s).
'this method is executed when the javascript ajax call requests the data for the second dropdown
_
Public Shared Function GetNextCombobox() as List(Of String)
Dim letters As New List(Of String)
letters.Add("A")
letters.Add("B")
letters.Add("C")
letters.Add("D")
letters.Add("E")
letters.Add("F")
letters.Add("G")
letters.Add("H")
letters.Add("I")
letters.Add("J")
letters.Add("K")
letters.Add("L")
letters.Add("M")
letters.Add("N")
letters.Add("O")
letters.Add("P")
letters.Add("Q")
letters.Add("R")
letters.Add("S")
letters.Add("T")
letters.Add("U")
letters.Add("V")
letters.Add("W")
letters.Add("X")
letters.Add("Y")
letters.Add("Z")
Return letters
End Function
The Ajax Numbers
With this implementation, the server is only passing 111 bytes of data back.
Recap
The postback implementation cost us 218,049 bytes of data being sent from the server to the browser, while the jQuery implementation cost us only 111 bytes! That is 1,964 times less data. Why anyone would be fine with dealing with 1964 times of overhead is beyond me, but the numbers don’t lie.
