L'AJAX Control Toolkit nasce dalla collaborazione di diversi sviluppatori di alcune community web con Microsoft per la realizzazione di controlli AJAX-enabled al fine di rendere agevole lo sviluppo delle applicazioni web che hanno la necessità di dialogare con il server per recuperare informazioni e mostrarle a video, senza dover ricaricare ad ogni richiesta l'intera pagina, ma solamente cambiando porzioni di codice HTML in ambito client tramite l'uso di Javascript.

Già con le prime versioni beta e successivamente con la versione definitiva di AJAX ASP.NET 1.0 è stata infatti resa disponibile una serie di controlli che sfruttano le nuove caratteristiche di questo framework, già molto apprezzato dagli sviluppatori. Al momento della pubblicazione di questo articolo i controlli disponibili nell'AJAX Control Toolkit sono ben 32, tutti compatibili con la versione finale di AJAX ASP.NET 1.0 e utilizzabili liberamente senza limitazioni. La maggior parte di questi sono extender per i controlli classici di ASP.NET.

Ovviamente la libreria è in continua espansione, dal momento che escono nuove versioni in continuazione; per questo motivo in futuro è possibile che rispetto a quanto riportato in questo articolo vi possano essere differenze più o meno sostanziali (per esempio: nuovi controlli o migliorie dei controlli esistenti).

Installazione

Per poter utilizzare la libreria di componenti occorre aver installato AJAX ASP.NET 1.0 e creare in Visual Studio un nuovo sito web AJAX-enabled.

Una volta creato il sito, occorre referenziare la libreria AjaxControlToolkit e aggiungere i relativi controlli nella toolbox di Visual Studio (tasto destro->choose->browse). È possibile aggiungere le estensioni AJAX anche ad un sito già esistente, impostando i parametri necessari nel web.config e inserendo il controllo ScriptManager all'interno delle pagine.

A questo punto siamo pronti per utilizzare i controlli della libreria nella nostra applicazione.

Premessa

Data la vastità di AJAX Control Toolkit, in questo articolo non possiamo affrontare in modo approfondito tutti i controlli. Pertanto ci limitiamo ad analizzare i controlli generalmente più usati dagli sviluppatori web. I controlli che verranno mostrati nel corso dell'articolo sono i seguenti:

• AutoCompleteExtender;
• CollapsiblePanelExtender;
• NumericUpDownExtender;
• Rating;
• SliderExtender;
• Tabs;
• TextBoxWatermarkExtender.

AutoCompleteExtender

Una casella di testo AutoComplete è sicuramente uno dei controlli più utilizzati dagli sviluppatori che utilizzano AJAX nelle loro applicazioni. Per rendersi di quanto questo controllo possa essere efficace ed utile, basta pensare al fatto che uno dei principali motori di ricerca esistenti ha impiegato una soluzione basata sull'auto-completamento del testo per l'immissione delle parole chiave.

Nell'AJAX Control Toolkit è presente un extender che permette di attivare l'auto-completamento del testo in una normale TextBox con il minimo sforzo. La procedura per utilizzare l'extender è infatti semplicissima. Basta aggiungere il controllo AutoCompleteExtender specificando quanto segue:

• la TextBox di input;
• il Web Service con il metodo che fornisce i dati per l'auto-completamento del testo;
• il numero minimo di caratteri da inserire per attivare il suggerimento delle possibili opzioni da inserire;
• il numero di risultati da mostrare.

Quelle elencate sopra sono le proprietà necessarie per poter cominciare ad utilizzare il controllo, ma esistono altre proprietà che permettono di definire ulteriori caratteristiche del controllo come la cache oppure l'intervallo temporale con cui deve essere effettuata la chiamata al Web Service.

Il blocco di codice seguente mostra una possibile implementazione. Il metodo del Web Service (nell'esempio CompleteMethod) deve restituire un'array di tipo String.

<asp:TextBox
  runat="server"
  ID="TheTextBox"
  Width="300"
  AutoComplete="off" />
<ajaxToolkit:AutoCompleteExtender
  runat="server"
  ID="TheAutoCompleteExtender"
  TargetControlID="TheTextBox"
  ServicePath="WSAutoComplete.asmx"
  ServiceMethod="CompleteMethod"
  MinimumPrefixLength="2"
  CompletionInterval="1000"
  EnableCaching="true"
  CompletionSetCount="12" />

CollapsiblePanelExtender

Il CollapsiblePanelExtender è un controllo che ci permette di mostrare e nascondere blocchi di codice HTML allo scatenarsi di un evento di un altro controllo. Infatti l'extender non fa altro che generare il codice Javascript necessario a modificare per un particolare elemento della pagina la proprietà CSS display da 'block' a 'none' e viceversa, ovviamente senza effettuare alcun postback.

Spesso nelle interfacce web sono presenti molte informazioni di diversa natura pensate per scopi differenti, il che implica un aumento della difficoltà in lettura della pagina nonchè un impatto brusco per l'utente. Racchiudendo le informazioni in box separati è possibile alleviare l'impatto visivo, migliorando in modo significativo l'usabilità della pagina. Il CollapsiblePanelExtender torna utile nei casi in cui si voglia mostrare questi contenitori di informazioni in modo dinamico, mostrando in un determinato istante solo i box di interesse e mascherando gli altri.