Un problema di listbox
Succede spesso di avere a che fare con problemi solo apparentemente semplici. Spesso
la soluzione è complicata dalle esigenze come dire "pratiche" che non ti consentono di
adottare la soluzione migliore. Quelle cose di cui i libri non parlano come "..non c'è tempo", "non
posso utilizzare ajax".
Vediamo uno di questi casi. Una pagina web a fronte di una ridotta larghezza di banda viene visualizzata
con estrema lentezza. Guardando l'HTML si vede che questa pagina contiene 5 listbox con
circa 5000 elementi ognuna. Oltre a questo il viewstate abilitato (ci troviamo in ambiente ASP.NET 2.0) aumenta notevolmente
le dimensioni. Se non avete fretta e una buona adsl
potete vedere l'esempio. Il risultato
finale, nel nostro esempio, è di 2224 Kb.
La prima cosa facile che viene in mente è disabilitare il viewstate e l'eventvalidation anche se questo comporta
una gestione manuale dei campi. Il risultato ci porta ad una pagina di 1191 Kb (l'esempio lento come il precedente è qui).
A questo punto la domanda sarebbe entrare meglio nella logica del programma. Ma di fronte ad una risposta
negativa non possiamo che continuare ad indagare.
Tentativo successivo: scaricare una sola lista e duplicarla in javascript.
Il risultato è apparentemente ottimo con 323 kb,
ma ora il tempo di avvio della pagina è inaccettabile (provare per credere). Abbiamo ridotto al minimo la
grandezza della pagina ma ora il processo consuma molto (troppo) tempo di CPU.
A questo punto non resta che affrontare il problema nel modo migliore. Dopo aver dimostrato che non ci
sono scappatoie, la soluzione ajax è l'unica percorribile ed è anche elegante e veloce. Potete vedere l'esempio qui.
(*) tempo di avvio elevato per attesa completamento javascript
Di seguito lo snippet per la duplicazione di una listbox in javascript.
function DupListbox() {
var lb = new Array();
lb[0]=document.getElementById("DropDownList1");
lb[1]=document.getElementById("DropDownList2");
lb[2]=document.getElementById("DropDownList3");
lb[3]=document.getElementById("DropDownList4");
lb[4]=document.getElementById("DropDownList5");
var i,j,lbitem;
var base = lb[0];
for(i=0;i<5000;i++) {
lbitem = base[i].value;
for(j=0;j<5;j++) {
var opt = document.createElement("option");
opt.text = lbitem;
lb[j].options.add(opt);
}
}
}