Corso ASP.NET: sesta puntata

Esempio funzionante | Sorgente | Scarica il sorgente (zip)

Se avete realizzato form per l’inserimento di dati, sapete che uno dei compiti più noiosi e complessi è la verifica delle informazioni inserite: campi obbligatori, indirizzo di email valido, valore compreso tra un massimo ed un minimo.

In ASP.NET sono disponibili i Validation Controls, un insieme di controlli che automatizzano queste operazioni e che sono altamente personalizzabili.

I Validation Controls sono utilizzati nelle form per verificare se:

• tutti i campi obbligatori sono stati compilati
• il valore di un campo ha un valore fisso stabilito
• il valore di un campo rientra in un intervallo
• il valore inserito in un campo è uguale a quello di un altro controllo
• il valore inserito rispetta un algoritmo (ad esempio un numero primo)

Campi obbligatori

L’esempio seguente introduce il ruolo dei Validation Control e in particolare del RequiredFieldValidator Control.

È visualizzata una form con due campi obbligatori: nome e cognome.

Se compilate correttamente i campi, la pagina vi ringrazia:

Se invece vi siete dimenticati di inserire un valore, siete subito avvisati:

Analizziamo ora il codice sorgente della pagina.

Sono presenti due controlli di tipo RequiredFieldValidator, usati per verificare la presenza di un valore per il campo.

Sono definiti in questo modo:

e

Con l’attributo ControlToValidate viene indicato il nome (id) del controllo da verificare.

Display=”static” indica invece che lo spazio video normalmente utilizzato dal messaggio di errore (* campo obbligatorio) viene occupato anche quando l’errore non si verifica. Questa soluzione, soprattutto nel caso di tabelle, consente di evitare il fastidioso “effetto fisarmonica” in presenza di celle che si adattano alla dimensione del contenuto.

Dhtml e convalida lato client

In generale, la verifica delle validità dei campi dovrebbe avvenire sia lato client, sia lato server:

• Lato client: si evita di inviare dati al server quando il browser può controllarne la validità con funzioni Javascript
• Lato server: se il browser non interpreta Javascript oppure Javascript è disabilitato, il server si preoccupa di verificare la validità dei dati inseriti

I Validation Control sono in grado di generare automaticamente codice Javascript e Dhtml per la verifica lato client dei campi compilati.

Questo tipo di soluzione:

• consente ad Internet Explorer 5+ di verificare lato client la validità dei dati
• non funziona con Netscape: il controllo dei valori passa al server

Se utilizziamo Netscape e compiliamo in modo incompleto la pagina, la risposta è leggermente diversa:

In questo caso compare infatti il messaggio Devi compilare correttamente tutti i campi, cosa che con Internet Explorer non si verifica.

Questo si verifica perché il browser ha contattato direttamente il server per la convalida.

Il codice eseguito dalla pagina ASP.NET lato server è il seguente:

L’oggetto Page dispone della proprietà IsValid: è posta a true quando si verificano errori di convalida per uno o più controlli.

Esistono altre due interessanti proprietà non utilizzate nell’esempio:

• Enabled: disabilita la convalida sul controllo
• EnableClientScript: se posta a false disabilita il controllo lato client

Conclusione

I Validation Controls sono un ottimo strumento per controllare e verificare i dati inseriti dagli utenti. Permettono la verifica sia lato server sia lato client, anche se quest’ultimo caso è vero solo per gli utenti di Internet Explorer.

Corso ASP.NET: quinta puntata

Esempio funzionante | Sorgente | Scarica il sorgente (zip)

I Web Form Controls sono dei tipi di controllo alternativi rispetto agli Html Controls.

Mentre gli Html Controls sono il modo preferibile per convertire con velocità un’applicazione ASP in una ASP.NET, i Web Form Controls sono più complessi e completi. È possibile per esempio realizzare un checkbox che effettua il submit di una form non appena viene premuto.

In particolare, ogni controllo Web Form può generare più tag Html e anche codice Javascript.

I Web Form Controls si riconoscono perché preceduti da un prefisso (namespace) di tipo “asp” seguito dai due punti.

Vantaggi

• la nomenclatura delle proprietà è coerente (a differenza di quello che succede con gli attributi dei tag Html)
• consentono di realizzare con un solo oggetto compiti complessi
• si astrae dal codice Html della pagina preoccupandosi invece delle logiche di programmazione

Un esempio

Il prossimo esempio visualizza una form realizzata con controlli di tipo Web Form.
Sono visualizzati 4 controlli di tipo asp:TextBox.

Con lo stesso controllo ASP.NET sono stati realizzati quelli che in Html sono due tag diversi: <input> e <textarea>.

In particolare i 4 controlli realizzano:

• un textarea senza barre di scorrimento
• un input box di tipo testo
• un input box di tipo password
• un textarea con barre di scorrimento

Il codice che li genera è il seguente:

TextBox 1

TextBox 2

TextBox 3

TextBox 4

Questi controlli usano un insieme di proprietà davvero coerente. Ad esempio:

• TextMode indica il tipo di tag da creare (input di tipo testo, password o textarea)
• Text è l’eventuale testo da visualizzare nel controllo

Gli eventi

Come gli Html Controls, anche i Web Form Controls dispongono di un modello di programmazione ad oggetti ed è pertanto possibile programmarne gli eventi. Anche in questo caso le potenzialità dei Web Form Controls si dimostrano superiori rispetto agli Html Controls.

L’evento OnTextChanged è eseguito quando il testo in uno dei primi due TextBox è modificato.

Provate ad esempio a posizionarvi sul primo TextBox e a modificare la scritta “Primo TextBox“. A questo punto premete il pulsante di Invio.

Vi compare una pagina con la scritta “È cambiato il valore di txtTextBox1”.

Provate a fare la stessa cosa con il secondo TextBox. Questa volta però non premete il pulsante di invio, ma spostatevi con il mouse o con il tasto tab in un altro controllo. Noterete che il submit della form è realizzato automaticamente. La causa è la proprietà AutoPostBack, che se posta a true provoca l’invio automatico della form.

È un metodo comodo per simulare quanto avviene con le tradizionali applicazioni desktop, anche se dobbiamo prestare attenzione al fatto che la comunicazione tra client e server è destinata ad intensificarsi.

Come abbiamo già avuto modo di studiare, le funzionalità date dalla proprietà AutoPostBack sono realizzate da codice Javascript lato client.

Conclusione

I Web Form Control superano i limiti dei tag Html perché rendono disponibile un modello ad oggetti coerente e funzionalità più complete. Lo sviluppatore non si preoccupa dell’Html generato, ma utilizza controlli simili a quelli disponibili nella tradizionale programmazione Windows.