ASP.NET: i List Controls – Lavorare con gli insiemi di dati


Corso ASP.NET: settima puntata

Esempio funzionante | Sorgente | Scarica il sorgente (zip)

I List Controls sono dei controlli creati per agire sui dati. Sono utilizzati per visualizzare dati provenienti da collezioni e da database.

Anche se l’esempio che segue utilizza delle collezioni di dati fittizie per popolare i List Controls, il procedimento è il medesimo qualunque sia la sorgente dati a cui connettersi.

Una pagina con List Controls

Ecco alcuni List Controls:

Alcuni List Controls

Si tratta di ComboBox, CheckBox e Radio Buttons.

ASP.NET semplifica enormemente la costruzione del “legame” tra codice e dati, favorendo il più possibile la separazione tra codice e contenuto.

Analizziamo quindi il codice sorgente delle parti significative della pagina:

 90     <div class="titolo">DropDownList Control</div>
 91     
 92      <p>Selezionare una voce dall’elenco</p>
 93 
 94      <asp:DropDownList id="frutti" runat="server">
 95        <asp:ListItem value="Fr">Fragola</asp:ListItem>
 96        <asp:ListItem value="La">Lampone</asp:ListItem>
 97        <asp:ListItem value="Ci">Ciliegia</asp:ListItem>
 98      </asp:DropDownList>
 99 
100      <br /><br />
101 
102      <asp:Button id="button1" Text="Invia" OnClick="Button1_Click" runat="server"/>

Nel codice sopra riportato non è presente niente di eccezionale. È dichiarato un controllo di tipo DropDownList contenente alcuni controlli ListItem. Lo scopo è quello di realizzare una serie di tag di tipo select. Conclude il codice (riga 102) un pulsante per l’invio della selezione.

106     <div class="titolo">ListBox Control</div>
107 
108      <p>Selezionare una voce dall’elenco</p>
109 
110      <asp:ListBox id="artisti" rows="2" selectionmode="Multiple" runat="server">
111        <asp:ListItem value="Pi">Picasso</asp:ListItem>
112        <asp:ListItem value="Kl">Klee</asp:ListItem>
113        <asp:ListItem value="Mo">Modigliani</asp:ListItem>
114      </asp:ListBox>
115 
116      <br /><br />
117 
118      <asp:Button id="button2" Text="Invia" OnClick="Button2_Click" runat="server"/>

Qui è invece dichiarato un oggetto di tipo ListBox, molto simile al DropDownList, ma che presenta i dati su più righe. Notare la presenza dell’attributo selectionmode=”Multiple” che consente la selezione di più voci tenendo premuto il pulsante Ctrl.

Agire sui List Controls da codice

Se osserviamo con attenzione il codice e lo confrontiamo con il risultato a video, notiamo che:

  • a video la DropDownList contiene un valore “Mango” non presente nel codice
  • a video la ListBox contiene 3 artisti (Dalì, Magritte, Mirò) non presenti nel codice

Gli elementi mancanti sono stati aggiunti da codice, in particolare nell’evento Page_Load:

 17 Sub Page_Load(sender as Object, e as EventArgs)
 18 
 19   ‘Se il Mango non e’ gia’ presente, lo aggiungo
 20   Dim lsiFrutto as New ListItem("Mango","Ma")
 21   If Not frutti.Items.Contains(lsiFrutto) Then
 22    frutti.Items.Add(lsiFrutto)
 23  End If
 24 
 25   ‘Aggiungo altri artisti
 26  Dim i as integer
 27  Dim aArtisti As String(,) = New String(,) {{"Dal","Da"}, {"Magritte","Ma"}, {"Mir","Mi"}}
 28 
 29  For i = 0 to UBound(aArtisti)
 30     If Not artisti.Items.Contains(New ListItem(aArtisti(i,0),aArtisti(i,1))) Then
 31      artisti.Items.Add(New ListItem(aArtisti(i,0),aArtisti(i,1)))
 32    End If
 33   Next i
 34   
 35 End Sub

Nel primo caso è controllata la presenza di una voce “Mango” nell’insieme Items dell’oggetto “frutti”; nel caso non sia trovata è aggiunta all’elenco.

Nel secondo caso il procedimento è leggermente più complesso, ma la filosofia di fondo non cambia:

  • è dichiarato un array con i tre artisti
  • con un ciclo è controllata la presenza di uno dei tre artisti tra quelli già presenti
  • se l’artista non è già presente viene aggiunto alla lista

L’esempio ha evidentemente poco senso in un caso reale, ma dimostra una volta di più come il codice Visual Basic rimanga ben separato dal codice Html della pagina.

L’ultimo List Control presentato sulla pagina è il RadioButtonList Control. Niente di nuovo rispetto a quanto già visto, a parte la possibilità di ordinare verticalmente od orizzontalmente i radio button. Lo rende disponibile la linea:

137  <asp:CheckBox id="chkOrientamento" class="txt" OnCheckedChanged="chkOrientamento_CheckedChanged" AutoPostBack="true" Text="Orizzontale" runat="server" />

Non appena si clicca per cambiare l’ordinamento è richiamato l’evento chkOrientamento_CheckedChanged che alternativamente imposta la proprietà RepeatDirection:

 62 Sub chkOrientamento_CheckedChanged(sender As Object, e As EventArgs)
 63   If sender.Checked = True Then
 64     sport.RepeatDirection = RepeatDirection.Horizontal
 65   Else
 66     sport.RepeatDirection = RepeatDirection.Vertical
 67   End If
 68 End Sub

Invio della form

Ma che cosa succede quando premiamo “invia” nella form?

 37 Sub Button1_Click(sender As Object, e As EventArgs)
 38   risposta.Text = "Hai selezionato ‘" & frutti.SelectedItem.Text & "’ con valore ‘" & frutti.SelectedItem.Value & "’."
 39 End Sub

Nel primo caso (DropDownList) è utilizzato l’oggetto SelectedItem per risalire all’elemento selezionato.


 41 Sub Button2_Click(sender As Object, e As EventArgs)
 42   
 43   Dim objElemento as ListItem
 44   Dim strMessaggio as String
 45   
 46   For Each objElemento in artisti.Items
 47     If objElemento.Selected Then
 48       strMessaggio += "Hai selezionato ‘" & objElemento.Text & "’ con valore ‘" & objElemento.Value & "’.<br />"
 49     End If
 50   Next

Nel caso del ListBox control è necessario invece ciclare tra tutti i possibile elementi, perché ne possono essere stati selezionati più d’uno.

 56 Sub Button3_Click(Source As Object, e As EventArgs)
 57  If sport.SelectedIndex > – 1 Then
 58  risposta.Text = "Hai selezionato il radiobutton ‘" & sport.SelectedItem.Text & "’."
 59  End If
 60 End Sub

Infine, il RadioButtonList control ha un comportamento molto simile al DropDownList Control.

Sommario

I List Controls sono un comodo strumento per visualizzare insiemi di dati. Evitano la stesura di cicli contenenti codice ed Html, rappresentando un’ottima soluzione per praticare la separazione codice/contenuti.

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

Sorgenti: RequiredFieldValidator.aspx

Scarica i sorgenti: aspnet06.zip

Articolo a cui si riferisce il codice: ASP.NET: Validation Controls

RequiredFieldValidator.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 <!
  9 # nome: RequiredFieldValidator.aspx
 10 # scritto da: Antonio Volpon
 11 # data creazione: 25 Ottobre 2001
 12 # ultima modifica: 25 Ottobre 2001
 13 # copyright: Antonio Volpon
 14 >
 15 
 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>
 29 
 30 
 31 <html>
 32   <head>
 33 
 34     <link rel="stylesheet" href="css/aspnet.css" type="text/css">
 35     </link>
 36     <title>Input Validation Controls: RequiredFieldValidator</title>
 37     
 38   </head>
 39   
 40   <body>
 41     <div class="titolo">
 42       Input Validation Controls: RequiredFieldValidator
 43     </div>
 44     
 45     <hr noshade="noshade" size="1" width="100%" />
 46 
 47     <form runat="server">
 48     <table border="0" align="center">
 49     <tr>
 50       <td align="right">Nome:</td>
 51        <td><input type="text" id="txtNome" size="20" runat="server" /></td>
 52        <td>
 53  <asp:RequiredFieldValidator id="reqNome"
 54  ControlToValidate="txtNome"
 55  Display="Static"
 56  runat="server">

 57        * Campo obbligatorio
 58        </asp:RequiredFieldValidator>
 59       </td>
 60      </tr>
 61     <tr>
 62        <td align="right">Cognome:</td>
 63        <td><input type="text" id="txtCognome" size="20" runat="server" /></td>
 64        <td>
 65  <asp:RequiredFieldValidator id="reqCognome"
 66  ControlToValidate="txtCognome"
 67  Display="Static"
 68  runat="server">

 69            * Campo obbligatorio
 70           </asp:RequiredFieldValidator>
 71        </td>
 72     </tr>
 73     <tr>
 74        <td align="right" colspan="2" align="right">
 75        
 76        <input type="submit"
 77          runat="server"
 78          value="Invia"
 79          onServerClick="Button_Click" />
 80          
 81        </td>
 82        <td>&nbsp;</td>
 83     </tr>
 84     </table>
 85 
 86    </form>
 87   
 88    <div class="risposta" runat="server" id="risposta" EnableViewState="false" />
 89  <ANet:Footer id="Menu" runat="server" />
 90 
 91   </body>
 92 </html>

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

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>