Archivi tag: corso

ASP.NET: Web Form Controls e gli eventi – Codice sorgente dell’esempio

Pubblicato il da

Sorgenti: TextBox.aspx

Scarica i sorgenti: aspnet05.zip

Articolo a cui si riferisce il codice: ASP.NET: Web Form Controls e gli eventi

TextBox.aspx – Prova l’esempio [nuova finestra]

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3 
  4 <%@Page Language="VB"%>
  5 <%@Register TagPrefix="ANet" TagName="Footer" Src="includes/footer.ascx"%>
  6 
  7 <!—
  8 # nome: TextBox.aspx
  9 # scritto da: Antonio Volpon
 10 # data creazione: 25 Ottobre 2001
 11 # ultima modifica: 25 Ottobre 2001
 12 # copyright: Antonio Volpon
 13 —>
 14 
 15 <script language="vb" runat="server">
 16   sub txtTextBox_Changed(sender as Object, e as EventArgs)
 17     risposta.InnerHtml +="E’ cambiato il valore di " + sender.ID + "<br />"
 18   end sub
 19 </script>
 20 
 21 <html>
 22   <head>
 23     <link rel="stylesheet" href="css/aspnet.css" type="text/css">
 24     </link>
 25     <title>I Web Form Controls: TextBox</title>
 26   </head>
 27   <body>
 28     <div class="titolo">
 29       I Web Form Controls: TextBox
 30     </div>
 31     
 32     <hr noshade="noshade" size="1" width="100%">
 33     
 34     
 35     <form runat="server">
 36     
 37     <table border="1" cellpadding="5" cellspacing="0" bordercolor="#999999" align="center">
 38       <tr>
 39         <td>Primo TextBox</td>
 40         <td>
 41  <asp:TextBox runat="server"
 42  id="txtTextBox1"
 43  Text="Primo TextBox"
 44  BackColor="#99ccff"
 45  TextMode="MultiLine"
 46  Rows="5"
 47  OnTextChanged="txtTextBox_Changed" />
 48         </td>
 49       </tr>
 50       <tr>
 51         <td>Secondo TextBox</td>
 52         <td>
 53  <asp:TextBox runat="server"
 54  id="txtTextBox2"
 55  Text="Secondo TextBox"
 56  TextMode="SingleLine"
 57  AutoPostBack="true"
 58  OnTextChanged="txtTextBox_Changed"/>
 59         </td>
 60       </tr>
 61       <tr>
 62         <td>Terzo TextBox</td>
 63         <td>
 64  <asp:TextBox runat="server"
 65  id="txtTextBox3"
 66  TextMode="Password"/>
 67         </td>
 68       </tr>
 69       <tr>
 70         <td>Quarto TextBox</td>
 71         <td>
 72  <asp:TextBox runat="server"
 73  id="txtTextBox4"
 74  TextMode="MultiLine"
 75  ScrollBars="Both"
 76  Wrap="false"
 77  ReadOnly="true" />
 78         </td>
 79       </tr>
 80       <tr>
 81         <td colspan="2"><input type="submit" value="Invia" alt="invia"></td>
 82       </tr>
 83     </table>
 84     
 85     </form>
 86 
 87  <div id="risposta" class="risposta" runat="server" EnableViewState="false"></div>
 88 
 89  <ANet:Footer id="Menu" runat="server" />
 90     
 91   </body>
 92 </html>

ASP.NET: Validation Controls – Controllare l’input dell’utente

Pubblicato il da

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.

La form con i campi per il nome e il cognome

Se compilate correttamente i campi, la pagina vi ringrazia:

La form compilata correttamente

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

La form avvisa della mancanza di un valore

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:

 53  <asp:RequiredFieldValidator id="reqNome"
 54  ControlToValidate="txtNome"
 55  Display="Static"
 56  runat="server">

e

 65  <asp:RequiredFieldValidator id="reqCognome"
 66  ControlToValidate="txtCognome"
 67  Display="Static"
 68  runat="server">

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:

La pagina di risposta con Netscape

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:

 16 <script language="vb" runat="server">
 17 
 18  Sub Button_Click(objSender as object, objArgs as EventArgs)
 19 
 20      If Page.IsValid Then
 21        risposta.InnerText = "Grazie per i tuoi dati."
 22      Else
 23        risposta.InnerText = "Devi compilare correttamente i campi."
 24      End If
 25      
 26  End Sub
 27 
 28 </script>

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.

Facilitare la lettura

Pubblicato il da

Questo articolo fa parte di un corso gratuito di design web ospitato su questo sito.

Leggere una pagina web non è facile, gli occhi si stancano molto più rapidamente della lettura su carta, se poi ci sono dei problemi di vista diventa quasi impossibile.

Parliamo di come fare l’editing di un testo in Internet considerando le esigenze dei navigatori, ma non dimentichiamo coloro che non navigano per problemi alla vista.

I caratteri – Per lo schermo, per la stampa e le dimensioni

Nonostante l’enorme varietà di font a disposizione, nelle macchine degli utenti sono installati solo alcuni tipi di carattere, quelli più comuni. Quando dovete scegliete il font di una pagina tenete presente che in Internet si legge più agevolmente se il testo è scritto con un carattere a bastone, cioè con un carattere lineare: le lettere sono più grandi, tonde e staccate e si distinguono bene le une dalle altre.

Per la pagina destinata alla stampa il tipo di font più adatto è invece quello a grazie come ad esempio Times New Roman, dove le lettere sono generalmente più piccole, ma le linee sono più curve e armoniose.

Due font, uno per il testo e uno per il titolo, aiutano il visitatore a distinguere immediatamente le diverse parti della pagina, attenzione però a non usare diversi caratteri all’interno del testo: non è soltanto brutto da vedere ma obbliga il visitatore ad abituarsi improvvisamente ad un altro carattere e rallenta la lettura.

In generale consigliamo non più di tre tipi di carattere per pagina: uno per il testo, uno per il titolo e sottotitolo ed eventualmente uno per le didascalie, l’ordine della pagina stimola la lettura. L’editing scelto deve essere coerente in tutto il sito.

Dimensione dei font

La dimensione dovrebbe essere stabilita in percentuale per dare la possibilità d’ingrandire il testo con le opzioni dei browser e permettere a tutti di leggere.

Risalto – Colore e grassetto per evidenziare

In Internet la prima lettura si fa scansionando lo schermo. Inevitabilmente l’occhio cade sulle frasi o sulle parole evidenziate. Per dare rilievo ad una frase o ad una parola chiave consigliamo di usare il grassetto.

Attenzione a non usare la sottolineatura poiché si confonde con i link, lo stesso vale per l’aggiunta di colore; una parola o una frase colorata possono essere lette come link, se così non è l’utente è deluso di non poter avere ulteriori informazioni.

Il colore può essere usato per evidenziare parti di un testo. Una frase o un titolo possono essere riquadrati, staccati dal testo ed evidenziati con uno sfondo colorato, questa è stata la scelta di Fucinaweb.com per mettere in rilievo i diversi articoli di ogni sezione.

Sconsigliamo il MAIUSCOLO che uniforma le lettere in una massa compatta e poco distinguibile per l’occhio ed è sinomimo di “URLARE”.

Alcuni buoni consigli per facilitare la lettura – Allineamento, larghezza delle righe, spazi bianchi

  • Allineamento a sinistra (a bandiera) aiuta ad ancorare l’occhio in un lato e accorcia la lunghezza delle righe
  • Righe brevi, massimo 50 caratteri, la lettura rallenta se si deve cercare l’inizio della riga successiva
  • Organizzare il testo secondo dei contrasti visivi in modo da aiutare la comprensione immediata del testo: gli spazi bianchi aiutano ad organizzare la pagina e gli elenchi puntati o numerati permettono la scansione dei contenuti.
  • Gli spazi bianchi sono consigliati:
    • per facilitare la lettura allo schermo
    • per permettere la scansione della pagina
    • per distinguere i paragrafi
    • per metter in evidenza una frase staccandola visivamente dal testo
  • L’interlinea consigliato per la leggibilità è di 2 punti in più del carattere (es. carattere 10, interlinea 14)
  • I rientri sono utili per far capire l’inizio di un nuovo paragrafo o per mettere in evidenza una frase. Modificando la larghezza delle righe di una frase si comunica una particolarità del testo