Ajax code is faster or updatepanel is faster to populate dropdown in asp.net - asp.net

Question

I have 20 ajax editable drop-downs in a form. Each drop-down binds with respect to other's selectedindex change.
I have lots of record coming from the database for binding, and some operations. What will perform better?
Should I use this code to bind the drop-down:
var XmlHttp;
//Creating object of XMLHTTP For AJAX Method
function CreateXmlHttp() {
//Creating object of XMLHTTP in IE
try {
XmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (oc) {
XmlHttp = null;
}
}
//Creating object of XMLHTTP in Mozilla and Safari
if (!XmlHttp && typeof XMLHttpRequest != "undefined") {
XmlHttp = new XMLHttpRequest();
}
}
function GetAppStoreLnk(id) {
var txtnameid = document.getElementById(id);
CreateXmlHttp();
var requestUrl = "Default2.aspx?id="+txtnameid+"";
if (XmlHttp) {
XmlHttp.onreadystatechange = function() { getschemename(txtnameid) };
XmlHttp.open("GET", requestUrl, true);
XmlHttp.send(null);
}
}
function getschemename(id)
{
// To make sure receiving response data from server is completed
if(XmlHttp.readyState == 4) {
// To make sure valid response is received from the server, 200 means response received is OK
if(XmlHttp.status == 200) {
var strData = XmlHttp.responseText;
if(strData != "") {
var arrscheme = strData.split("|");
id.length = 0;
for(i=0; i<arrscheme.length-1; i++) {
var strscheme = arrscheme[i];
var arrschnm = strscheme.split("~");
id.options[i] = new Option();
id.options[i].value = arrschnm[0];
id.options[i].text = arrschnm[1];
}
} else {
id.length = 0;
id.options[0] = new Option();
id.options[0].value = "";
id.options[0].text = "Scheme Name is not available";
}
document.body.style.cursor = "auto";
}
else {
id.length = 0;
id.options[0] = new Option();
id.options[0].value = "";
id.options[0].text = "server is not ready";
document.body.style.cursor = "auto";
}
}
}
Or should I go for UpdatePanel?
Which one will be the better option for me?
Or is there a better spolution?
I want very good performance as this page is used frequently by our client, and we want to make sure it is fast.
I am using vs2010.

Answer 1

The AJAX route will be faster. UpdatePanels make things look like partial page loads, but in fact, it returns the whole page and just updates the section inside your UpdatePanel.

Answer 2

UpdatePanel does not provide the efficiency that we normally associate with AJAX. Did you know, for example, that when UpdatePanel control performs asynchronous AJAX callback to the server to update its content, the request contains all the content of a publication automatically ASP. NET conventional, including status display.
An application is more effective preferring to use asynchronous calls to WebMethods or page methods instead of using UpdatePanel.
Link : http://msdn.microsoft.com/fr-fr/magazine/cc163413.aspx

Answer 3

I agree with the rest of the answers, the evil UpdatePanel decreases the overall performance of the page because in order to work, it must send the whole page ViewState back and forth in order to execute the whole page life cycle on every async post
With simple AJAX calls this is totally different, the calls only get the data you need and the performance is considerably better
However - danger danger DR Robinson
Since you are using WebForms and your intention is to populate 20 DropDownLists, you can try doing it with AJAX calls and you will notice that apparently that works correctly. but if you try to post your page with one value added to a DropDownList via javascript/jquery, an exception will be thrown.
This is because ASP.Net WebForms by default validates the values posted to the server, if the values are not registered in the ViewState, a security exception will be thrown because of an attempt to tamper the page content.
Sadly you cannot disable this option at control level, you would have to disable it at page level:
<%# Page EnableEventValidation="false" ....
In WebForms this is not recommended though...