ASP.NET AJAX - Control Toolkit

Articolo
03/19/2008

Il compagno ideale per il nostro sviluppo con ASP.NET 2.0 AJAX Extensions è sicuramente l’AJAX Control Toolkit. Nato da un progetto di collaborazione tra Microsoft e le community, ha come obiettivo quello di diventare la più grande collezione di componenti web disponibile; traguardo raggiungibile grazie alla formula adottata per la sua realizzazione. Il progetto, infatti, è ospitato all’interno di Codeplex ed è aperto a collaborazioni di chiunque voglia condividere i propri componenti web, basati sull’implementazione AJAX di Microsoft, con la comunità degli sviluppatori. Per collaborare basta seguire le indicazioni riportate nel Contributor Playbook di questo progetto.

In questa pagina

Per iniziare
Il contenuto del package d’installazione
Creare un riferimento al Custom Toolkit nella Toolbar di Visual Studio
Controlli ed Extender
Esempi di utilizzo
Conclusioni
Riferimenti utili

Per iniziare

Per iniziare a utilizzare questo toolkit sono necessarie alcune operazioni preliminari che possiamo riassumere in:

Scaricare e installare le estensioni ASP.NET 2.0 AJAX Extensions;
Scaricare il package d’installazione del ASP.NET AJAX Control Toolkit.
Creare i riferimenti nella toolbar di Visual Studio
Installare i template per Visual Studio (opzionale. Dipende da che versione di Visual Studio si utilizza)

La forma di distribuzione scelta, nel caso del Control Toolkit, è quella di un archivio compresso in formato .zip. Vengono fornite due diverse opzioni di download:

AjaxControlToolkit.zip (include i sorgenti)
AjaxControlToolkit-NoSource.zip (senza sorgenti)

Come il nome fa intuire, il contenuto dei due package è leggermente diverso: il primo è pensato per chi vuole approfondire, tramite l’analisi dei sorgenti, il funzionamento dei controlli contenuti nel kit; il secondo, invece, si adatta meglio a chi vuole limitarsi al solo uso dei componenti. In entrambi i package è presente un’applicazione web che dimostra come si possano utilizzare componenti e controlli inclusi in questa distribuzione.

Dopo aver scelto quale file scaricare sul vostro computer, basterà estrarre, nella posizione che riterrete più opportuna, il contenuto dell’archivio compresso.

Il contenuto del package d’installazione

In questo articolo prenderemo in considerazione il file di distribuzione più completo pur evidenziando, dove necessario, quali parti siano ugualmente presenti nel package AjaxControlToolkit-NoSource.zip.

La struttura delle directory che ci apparirà, dopo l’estrazione, è la seguente:

Le directory AjaxControlExtender e SampleWebSite sono le uniche comuni ai due package di installazione; le altre sono contenuto esclusivo del file AjaxControlToolkit.zip. Le principali, che meritano un approfondimento, sono:

Directory: AjaxControlExtender

Questa directory contiene il file AjaxControlExtender.vsi che può essere utilizzato per creare i template di progetto per agevolare la creazione di nuovi exstenders e controlli. Per questo motivo il file non può essere utilizzato con Visual Web Developer , ma solamente con Visual Studio, Visual C# o Visual Basic.

Eseguendo il file .vsi ci comparirà il seguente wizard:

dal quale sarà possibile scegliere quali elementi installare. Dopo aver selezionato gli elementi è possibile procedere con l’installazione ed attendere il suo completamento. Da questo momento sarete pronti per utilizzare questi template e procedere alla creazione di vostri extenders e controlli.

Directory: AjaxControlToolkit

Questa directory contiene i sorgenti di tutti i componenti distribuiti con questo toolkit inseriti in un progetto C#. È quindi possibile navigare tra le diverse cartelle in essa contenute per visualizzare le parti costituenti ogni singolo controllo (file .cs, fogli di stile .css, file script ,js, ecc).

Directory: SampleWebSite

Non c’è niente di meglio che un bel set di esempi per chiarirsi le idee. Per tale motivo, il contenuto di questa directory è probabilmente il primo su cui dovremmo focalizzarci: un insieme di esempi su come utilizzare i controlli ed i componenti presenti nel Control Toolkit.Ora che abbiamo esaminato i principali contenuti delle cartelle (le altre directory contengono i file ed i progetti di test e di creazione dei template) possiamo dedicarci alla preparazione di Visual Studio per agevolare l’uso di questo toolkit.

La libreria contenente i controlli e gli extender, da referenziare nella toolbox di Visual Studio, si trova nella directory \bindell’applicazione web di esempio contenuta nella directory SampleWebSite.

Il primo passo è creare un nuovo tab all’interno del quale inseriremo i controlli del Custom Toolkit.

Per creare il nuovo tab sarà sufficiente seguire questi semplici passi:

Selezionare la toolbar;
Cliccare con il pulsante destro del mouse e selezionare Add Tab.
Inserire il nome da attribuire al nuovo tab (per esempio AJAX Control Toolkit).
Selezionare il nuovo tab
Cliccare nuovamente con il pulsante destro del mouse e selezionare Choose items…
Nella finestra di selezione degli assemblies .NET selezionare Browse.
Dalla finestra di selezione file, posizionarsi nella directory Bin contenuta all’interno della cartella SampleWebSite nella directory in cui avete estratto il contenuto del package di installazione (per esempio: [MioPercorso]\ AjaxControlToolkit\SampleWebSite\Bin)
Selezionare quindi il file AjaxControlToolkit.dll e confermare.

In questo modo otterremo un tab popolato, come si può vedere nella seguente immagine:

Ora la configurazione è completata e siamo pronti per utilizzare il Control Toolkit nelle nostre applicazioni web basate su ASP.NET AJAX. Tra i controlli e gli extender disponibili troviamo:

Accordion

AlwaysVisibleControl

Animation

AutoComplete

Calendar

CascadingDropDown

CollapsiblePanel

ConfirmButton

DragPanel

DropDown

DropShadow

DynamicPopulate

FilteredTextBox

HoverMenu

MaskedEdit

ModalPopup

MutuallyExclusiveCheckBox

NoBot

NumericUpDown

PagingBulletedList

PasswordStrength

PopupControl

Rating

ReorderList

ResizableControl

RoundedCorners

Slider

Tabs

TextBoxWatermark

ToggleButton

UpdatePanelAnimation

ValidatorCallout

Controlli ed Extender

Per completezza d’informazione e al fine di facilitarne l’utilizzo, è bene fare una distinzione tra le due tipologie di componenti che troviamo nel Control Toolkit: i controlli e gli extender.

I primi sono dei veri e propri controlli autonomi che possono funzionare senza alcuna dipendenza da altri WebControls; i secondi sono invece, delle estensioni che richiedono la presenza di WebControls ASP.NET ai quali aggiungono funzionalità e comportamenti.

Prima di passare a un esempio pratico, vediamo sommariamente le caratteristiche di questi controlli ed extender:

Accordion

È un controllo web che fornisce un set di pannelli e ne mostra uno per volta. Risulta essere una sorta di contenitore di altri controlli di tipo AccordionPane. Ogni pannello ha un template per la sua intestazione e per il suo contenuto. Tra i comportamenti di questo controllo c’è la capacità di memorizzare quale pannello è visualizzato per garantirne la visualizzazione attraverso i diversi postback di una pagina.

AlwaysVisibleControl

Questo è un semplice extender che permette di fissare un controllo in una pagina, in modo che appaia sempre sopra al contenuto del corpo della pagina stessa.

Animation

Grazie alla Potenza del framework di animazione è possible, con questo extender, inserire in modo dichiarativo animazioni all’interno di una pagina esistente.

AutoComplete

Questo extender, associato ad una controllo di tipo TextBox, permette di visualizzare un pannello popup che visualizza le parole che iniziano con il testo, man mano digitato nella TextBox. Il suo funzionamento è normalmente associato ad un Web Service che fornisce i contenuti per il pannello popup.

Calendar

Anche questo extender può essere associato ad un controllo ASP.NET di tipo TextBox. È in grado di fornire una funzionalità client side per la selezione di una data da un calendario personalizzabile per formato e stile.

CascadingDropDown

Grazie a questo extender è possible popolare automaticamente un set di controlli di tipo DropDownList. Ogni volta che cambia la selezione in una DropDownList, viene eseguita una chiamata ad un Web Service per recuperare la lista di valori necessari ad un corretto popolamento della DropDownList successiva nell’insieme di DropDownList.

CollapsiblePanel

La flessibilità di questo extender permette di aggiungere facilmente delle sezioni “collassabili” alle nostre pagine web. Il CollapsiblePanel può essere collegato a qualsiasi controllo di tipo Panel e allo sviluppatore non resta che specificare quale controllo o quali controlli siano responsabili dell’apertura/chiusura per un determinate pannello; oppure far si che questi comportamenti siano associati a particolari eventi come il passaggio del cursore sul pannello, etc.

ConfirmButton

Il ConfirmButton è un semplice extender che cattura i click di un Button (o di qualsiasi istanza che deriva da un Button) e visualizza un messaggio all’utente tramite una classica Confirmation Window. Se l’utente conferma il messaggio premendo sul pulsante "OK", vengono eseguite le operazioni associate, previste dall’evento. Viceversa, l’evento click è catturato dall’extender e il Button non esegue alcuna ulteriore azione. Un tipico scenario di utilizzo si può avere in caso di cancellazione di record in cui si volesse richiedere un esplicito consenso all’utente.

DragPanel

Con questo extender è possible aggiungere funzionalità di “drag & drop” ai propri controlli di tipo Panel. Una volta inizializzato, l’utente è in grado di muovere un pannello nella pagina web.

DropDown

Il DropDown extender permette di collegare ad un controllo ASP.NET un menu a discesa con uno stile simile a quello usato da SharePoint.

DropShadow

Questo extender permette di applicare un’ombreggiatura ad un controllo di tipo Panel. È possibile specificare la profondità dell’ombreggiatura, oltre al livello di opacità. Le sue funzionalità permettono un riposizionamento durante le operazioni di ridimensionamento o riposizionamento del pannello a cui è associato l’extender.

DynamicPopulate

È un semplice extender che permette di sostituire il contenuto di un controllo con il risultato di una chiamata da un metodo di pagina o ad un web service. Il risultato della chiamata, in formato HTML, viene posizionato all’interno del controllo esteso.

FilteredTextBox

Il FilteredTextBox, associato ad un controllo di tipo TextBox, permette di prevenire l’inserimento di caratteri indesiderati. Bisogna tener presente che essendo basato su javascript, potrebbe essere raggirato spegnendo il supporto del browser per il javascript. Quindi il suo utilizzo dovrebbe essere visto come un mero supporto all’utenza e non come sostituto di un sistema di controllo del contenuto digitato in una TextBox.

HoverMenu

È un extender che può essere collegato a qualsiasi WebControl di ASP.NET al fine di visualizzare un pannello di popup per visualizzare contenuti addizionali.

MaskedEdit

Permette di estendere un controllo di tipo TextBox. Quando utilizzato, permette di mascherare l’imput digitato e di avviare una validazione client side per verificare la compatibilità con il tipo di dati selezionato.

ModalPopup

L’extender ModalPopup permette ad una pagina, di visualizzare del contenuto in modo “esclusivo”, modale, rendendo impossibile, per l’utente, l’interazione con il resto della pagina. Per chi di voi ha un’esperienza di programmazione in ambiente WindowsForms, può paragonare il comportamento di questo extender ad una Modal Form.

MutuallyExclusiveCheckBox

Questo extender può essere associato a qualsiasi controllo di tipo CheckBox. Aggiungendo un numero di CheckBox ad una stessa chiave “Key”, solamente una checkbox potrà essere selezionata nell’insieme di CheckBox associate a quella chiave. Il funzionamento è quindi simile a quello di un insieme di RadioButton con la differenza, non trascurabile, che in questo caso è possibile anche deselezionare una CheckBox, cosa non possibile con un RadioButton.

NoBot

Questo è un controllo che cerca di fornire una protezione contro bot e spam senza richiedere un’interazione dell’utente. Un tipico esempio può essere quello di una form dedicata all’inserimento di un commento dove, per evitare bot e spam, viene normalmente inserita un’immagine contenente caratteri e numeri che l’utente deve digitare prima di inviare il suo commento. Bene, con l’uso di questo controllo, questo sistema viene semplificando rimuovendo la necessità di digitare caratteri e numeri mascherati in un’immagine.

NumericUpDown

È un extender che può essere collegato a un controllo di tipo TextBox per aggiungere dei pulsanti “su” e “giù” ed incrementare o ridurre il valore contenuto nella TextBox. Fornisce diversi sistemi per indicare l’intervallo di valori (numeri, mesi, liste custom, ecc).

PagingBulletedList

Permette di aggiungere un ordinamento paginato a un controllo di tipo BulletedList. Questo extender è molto flessibile e consente un elevato livello di personalizzazione.

PasswordStrength

L’extender PasswordStrenght può essere collegato a qualsiasi controllo di tipo TextBox, utilizzato per l’inserimento di una password, per verificare quanto la password digitata sia efficace.

PopupControl

Il PopupControl permette di visualizzare del contenuto addizionale in una finestra di popup. Questa finestra può contenere qualsiasi contenuto, inclusi controlli ASP.NET, elementi HTML, ecc.

Rating

Il controllo Rating fornisce un efficiente e intuitivo sistema per la valutazione di contenuti in una pagina web. La sua rappresentazione è composta da un numero di stelle che l’utente può usare per dare la sua valutazione.

ReorderList

Questo controllo implementa una lista, collegabile ad una fonte dati, con elementi che possono essere ordinati in modo interattivo.

ResizableControl

L’extender ResizableControl può essere collegato a qualsiasi element in una pagina web e permette agli utenti di ridimensionare un controllo in modo interattivo. Basterà tenere il puntatore del mouse sull’angolo in basso a destra e premere il pulsante di sinistra per ridimensionare il controllo a proprio piacimento.

RoundedCorners

Questo extender permette di arrotondare gli angoli di un elemento esistente.

Slider

Lo Slider extender consente di aggiornare il contenuto di un controllo di tipo TextBox utilizzando un indicatore grafico (barra di scorrimento). Tramite le sue proprietà è possibile definire l’intervallo di valori da utilizzare, il suo orientamento (orizzontale o verticale) ecc.

Tabs

Il controllo TabContainer permette la creazione di un insieme di Tab che possono essere utilizzati per organizzare il contenuto di una pagina. Il TabContainer si comporta come contenitore per un numero n di controlli di tipo TabPanel.

TextBoxWatermark

L’extender TextBoxWatermark può essere collegato ad un controllo di tipo TextBox per fornire una sorta di filigrana al controllo. Quanto il controllo di tipo TextBox è vuoto, questa “filigrana” viene visualizzata scomparendo non appena si inizia ad inputare del testo.

ToggleButton

Il ToggleButton è un extender che può essere utilizzato con un controllo di tipo CheckBox per associare delle immagini personalizzate allo stato di selezionato o deselezionato.

UpdatePanelAnimation

Questo semplice extender permette di utilizzare la potenza del framework d’animazione all’interno di pagine esistenti utilizzando una sintassi dichiarativa. Viene utilizzato per visualizzare animazioni sia mentre un UpdatePanel viene aggiornato, che dopo il termine dell’aggiornamento.

ValidatorCallout

Il ValidatorCallout è un extender che accresce le funzionalità dei Validators di ASP.NET.

Esempi di utilizzo

Ora che tutto il nostro ambiente è pronto, non ci resta che prova a utilizzare alcuni di questi controlli per verificarne comportamenti e caratteristiche.

Iniziamo creando un’applicazione web basata sul template ASP.NET AJAX–Enabled Web Application installato con le ASP.NET 2.0 AJAX Extensions.

In questo modo si avrà un’applicazione con tutto l’occorrente necessario per il funzionamento dei controlli che vogliamo provare. Per rendere la nostra applicazione di esempio meno minimalista, mutuiamo master.page, foglio di stile e immagini dal SampleWebSite installato con il Control Toolkit e procediamo nella realizzazione di un esempio di prova per prendere confidenza con questi nuovi controlli.

Con questo esempio proviamo a dimostrare come sia possibile impostare un intervallo di date, normalmente utile in form di ricerca, utilizzando, oltre al necessario ScriptManager, i seguenti controlli:

UpdatePanel
CalendarExtender
ConfirmButtonExtender
TextBox
Label

Button

Il CalendarExtender ci permette di selezionare una data da un controllo di tipo calendar semplicemente associandolo ad una TextBox. Il ConfirmButtonExtender, associato ad un controllo di tipo Button, viene invece utilizzato per inserire una finestra di conferma prima che sia eseguito un’eventuale azione prevista al click del controllo associato. La pagina ottenuta è la seguente:

ovvero:

<%@ Page Language="C#" MasterPageFile="~/Default.Master" AutoEventWireup="true" Codebehind="FromToSamples.aspx.cs"
    Inherits="AjaxCTSamples.Samples.FromToSamples" Title="Untitled Page" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="SampleContent" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <h3>Imposta intervallo di date"></h3>
    <p>Questo esempio utilizza UpdatePanel, CalendarExtender e ConfirmButtonExtender.</p>
    <br />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Label ID="Label1" runat="server" Text="Dal" />
            <asp:TextBox ID="txtFrom" runat="server" />
            <asp:Label ID="Label2" runat="server" Text="Al" />
            <asp:TextBox ID="txtTo" runat="server" />
            &nbsp;<asp:Button ID="ButtonSet" runat="server" Text="Imposta" OnClick="ButtonSet_Click" />
            <cc1:CalendarExtender ID="CalendarFrom" runat="server" TargetControlID="txtFrom"
                Format="dd/MM/yyyy">
            </cc1:CalendarExtender>
            <cc1:CalendarExtender ID="CalendarTo" runat="server" TargetControlID="txtTo" Format="dd/MM/yyyy">
            </cc1:CalendarExtender>
            <cc1:ConfirmButtonExtender ID="ConfirmButton" runat="server" TargetControlID="ButtonSet"
                ConfirmText="Confermi l'impostazione dell'intervallo?">
            </cc1:ConfirmButtonExtender>
            <br /><br />
            <asp:Label ID="lblLast" runat="server"></asp:Label>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

Per completare il funzionamento dell’esempio, creiamo un metodo delegato all’evento Click del Button ButtonSet come qui indicato:

protected void ButtonSet_Click(object sender, EventArgs e)
{
    this.lblLast.Text = String.Format("L'intervallo di date selezionato inizia dal {0} e termina il {1}", 
        this.txtFrom.Text, this.txtTo.Text);
}

Il metodo ButtonSet_Click si limita a impostare la proprietà Text della Label lblLast con un testo predefinito in cui vengono inserite la data di inizio e fine intervallo.

L’esempio non è però nato allo scopo di dimostrare come sia possibile inserire questi valori in una stringa, bensì a verificare il funzionamento dei due extender utilizzati e che fanno parte del Control Toolkit oggetto di questo articolo.

Il primo, il CalendarExtender, richiede l’impostazione di poche proprietà per funzionare.

<cc1:CalendarExtender 
    ID="CalendarExtender1" 
    runat="server"
    TargetControlID="txtFrom"
    Format="dd/MM/yyyy">
</cc1:CalendarExtender>

Quelle di maggior interesse, per capirne il suo funzionamento sono:

TargetControlID – rappresenta l’identificativo del controllo di tipo TextBox che si vuole estendere;
Format – rappresenta il formato con cui si desidera visualizzare la data selezionata nel controllo calendario;
PopupButtonID – se impostato con l’identificativo di un controllo di tipo Button, richiede la pressione di quest’ultimo prima di visualizzare il calendario.

Il secondo, il ConfirmButtonExtender, è stato configurato come segue:

<cc1:ConfirmButtonExtender 
ID="ConfirmButton" 
runat="server" 
TargetControlID="ButtonSet"
    ConfirmText="Confermi l'impostazione dell'intervallo?">
</cc1:ConfirmButtonExtender>

In questo caso, le proprietà da impostare sono:

TargetControlID – rappresenta l’identificativo del controllo di tipo Button (per sempio) che si vuole estendere;
ConfirmText – rappresenta il testo del messaggio che sarà visualizzato all’utente per richiedere la conferma o l’annullamento dell’azione richiesta.

Come si può notare dall’esempio sopra riportato, l’uso di questi controlli è molto semplice e si allinea perfettamente alla programmazione che abbiamo adottato fino ad oggi in ASP.NET.

Conclusioni

L’ASP.NET AJAX Control Toolkit è un’insieme di risorse fondamentali per accelerare il nostro sviluppo basato sulle ASP.NET 2.0 AJAX Extensions. Il set di controlli ed extender attualmente disponibile è destinato a crescere nel tempo, quindi non dimenticatevi di controllare periodicamente.

Riferimenti utili

Per scaricare l’esempio utilizzato in questo articolo, cliccate qui.

Per un approfondimento e per un continuo aggiornamento su questa tecnologia si consigliano i seguenti link: