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.