ASP.Net  »  Guide  »  Guida C# 

I controlli Web



Come per le Windows Form anche nello sviluppo di Web Form troviamo l'aiuto di controlli che prendono il nome di Web Controls (Controlli Web).

Al pari dei controlli Windows, anche i controoli Web sono raggruppati in categorie nella Casella degli strumenti. In questa guida ci limiteremo a parlare dei controlli della categoria Standard, che comprende, tra gli altri:

  • Label, TextBox, Button (che abbiamo già incontrato);
  • DropDownList, ListBox;
  • CheckBox, RadioButton;
  • CheckButtonList, RadioButtonList, che consentono di raggruppare, rispettivamente, un insieme di CheckBox oppure di RadioButton;
  • Image, ImageMap, ImageButton;
  • table.
Figura 1. Toolbox di Visual Web Developer
Toolbox di Visual Web Developer

Come al solito ci aiuteremo con un esempio pratico. Realizziamo una Web Form in cui inserire i propri dati personali, che verranno poi inviati ad un indirizzo di posta elettronica.

Dopo aver creato un nuovo progetto Web, aggiungiamo i controlli alla Web Form in modo da ottenere un'interfaccia analoga a quella visibile in figura:

Figura 2. Il layout della pagina
Il layout della pagina

Le proprietà degli oggetti sono riassunte nella tabella seguente:

Controllo (Classe) Proprietà Valore
lblNome (Label) Text Nome:
txtNome (TextBox)    
lblMail (Label) Text e-mail:
txtMail (TextBox)    
lblEta (Label) Text Età:
ddlEta (DropDownList) Items cliccando sul pulsante visualizzato a destra della proprietà inseriamo alcuni intervalli di età
rblSesso (RadioButtonList) Items cliccando sul pulsante a destra della proprietà ed inseriamo le voci "Maschio" (con la proprietà Selected uguale a true) e "Femmina"
Repeatdirection Horizontal
lblHobby (Label) Text Hobby:
lstHobby (ListBox) Items cliccando sul pulsante a destra della proprietà ed inseriamo alcune voci, l'ultima deve chiamarsi "(Altro)" (vedi figura)
AutoPostBack true
lblIndicaHobby (Label) Text Indicare l'hobby:
Visible False
txtHobby (TextBox) Visible False
btnInvia (Button) Text Invia

Il titolo della form è un testo scritto direttamente nella pagina all'interno del Designer.

È possibile scaricare qui la Web Form creata finora.

Passiamo alla scrittura del codice. Selezionando l'ultima voce della lista che contiene gli hobbies, vogliamo che appaia la casella di testo in cui digitare il nome del passatempo. Allo stesso modo, se si clicca su un'altra opzione, questa TextBox deve essere nascosta.

Clicchiamo due volte sul controllo «lstHobby» per definire l'event handler predefinito, ovvero SelectedIndexChanged, quindi scriviamo:

protected void lstHobby_SelectedIndexChanged(object sender, EventArgs e)
{

   // funziona solo se "(altro)" è l'ultma voce del menù

   if (lstHobby.SelectedIndex == lstHobby.Items.Count - 1)
   {
       lblIndicaHobby.Visible = true;
       txtHobby.Visible = true;
   }
   else
   {
       lblIndicaHobby.Visible = false;
       txtHobby.Visible = false;
   }
}

Avviamo l'applicazione. Cliccando su "(Altro)" compare la casella di testo, mentre con qualsiasi altra selezione essa viene nascosta.

La form si comporta in questo modo perché abbiamo impostato la proprietà AutoPostBack della ListBox su true.

Infatti AutopostBack è a true qualunque evento il controllo scateni viene provocato un Submit() ovvero in PostBack e viene ricaricata la pagina.

In questo caso, ogni volta che si seleziona un elemento diverso della lista viene effettuata una richiesta al server, il quale esegue il codice corrispondente all'evento SelectedIndexChanged.

Lasciando tale proprietà su false (valore predefinito) invece il PostBack viene causato da un altro evento, tipicamente la pressione di un bottone.

Talvolta, per forzare l'invio anche in seguito ad altre azioni, si ricorre a codice JavaScript introducento una chiamata a Submit(). Anche ASP .NET usa questo metodo, ma lo "nasconde" nella proprietà AutoPostBack: quando vale true, tra i tag del controllo viene automaticamente aggiunta una chiamata a Submit()

Per verifica impostiamo la proprietà AutoPostBack del controllo «lstHobby» su false ed eseguiamo nuovamente l'applicazione. Questa volta, la selezione degli elementi non determina una richiesta al server. L'evento SelectedIndexChanged sarà generato solo in seguito alla pressione del pulsante Invia.

Aggiungiamo il codice da eseguire sul «Click» del pulsante, che deve inviare via mail le informazioni inserite nella Web Form:

protected void btnInvia_Click(object sender, EventArgs e)
{
  string Dest= "";
  string MailServer = "";

  MailMessage msg = new MailMessage(txtMail.Text, Dest);

  msg.Subject = "Questionario";

  msg.Body = "Nome: " + txtNome.Text + "nEtà: ";
  msg.Body += ddlEta.SelectedValue + "nSesso: ";
  msg.Body += rblSesso.SelectedValue + "nHobby: ";

  if (lstHobby.SelectedIndex == lstHobby.Items.Count - 1)
  {
    //L'utente ha indicato un hobby che non è nell'elenco:
    //Va a leggere il testo digitato nella casella.
    msg.Body += txtHobby.Text;
  }
  else
  {
    //L'utente ha selezionato un hobby dell'elenco.
    msg.Body += lstHobby.SelectedValue;
  }
  
  SmtpClient client = new SmtpClient(MailServer);
  client.Send(msg);
}

Per utilizzare la classi MailMessage e SmtpClient, è necessario aggiungere una clausola

using System.Net.Mail;

Per completare l'applicazione, è sufficiente indicare il valore delle variabili «Destinatario» e «MailServer», che devono contenere, rispettivamente, l'indirizzo di posta a cui verranno spediti i dati inseriti nella form e il server mail usato per l'invio, ad esempio news.tin.it.

Per scaricare la Web Form completa, cliccare qui.

Sono disponibili anche dei controlli per la verifica degli input degli utenti. Si usano come tutti i controlli e permettono, ad esempio, la verifica che il nome e l'indirizzo di mail siano stati effettivamente digitati ed il formato degli indirizzi.

Ultimi articoli ASP.Net

LINQ e la trappola della 'deferred execution'

Una "trappola" in cui si può incappare utilizzando il risultato di...

C#, le Custom Type Conversion

Conversioni personalizzate tra classi, creare metodi particolari per...

Introduzione a Entity Framework

Il framework ORM messo a disposizione da .NET

Repeater: visualizzare un feed RSS

Utilizzare il controllo XMLDataSource e sfruttare il metodo XPath()...

Repeater, il server control "semplice"

Cos'è e come funziona il controllo Repeater

Altri articoli

Guide ASP.Net

Guida ASP.NET MVC Best Practices

Un workflow dettagliato e ricco di suggerimenti pratici per...

Guida ASP.NET Starter Kit

Un modo semplice per imparare ad utilizzare le tecnologie Microsoft...

Guida Visual Studio 2010

L'ambiente di sviluppo di riferimento per sviluppare applicazioni su...

Altre guide

Newsletter @Microsoft Dev

Ogni giovedì, direttamente nella tua e-mail: articoli, guide, tutorial e script ASP, ASP.Net, SQL server e IIS.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Progettazione database

11 Maggio 2012 a Milano
Disponibilità: 6 Posti

Amministratore di Reti Windows Server 2008

11 Giugno 2012 a Milano
Disponibilità: 5 Posti

Nessun corso previsto