Ecco altri html controls. Dopo aver preso un po' di dimestichezza con i controls non troverete difficoltà ad utilizzare questi con i relativi metodi e proprietà.
HtmlInputText
Uno degli elementi più usati nei form è proprio l'elemento <input type="text" name="text1"> che può essere creato con il seguente codice:
<input type="text" id="Nome" runat="server" />
e di cui poi possiamo utilizzare le proprietà durante l'esecuzione dell'applicazione.
HtmlInputCheckBox e HtmlInputRadioButton
Per consentire all'utente una scelta tra opzioni si usano questi due
controls che si dichiarano:
<!-- Un gruppo di due radiobutton --> <input id="Rdio1" type="radio" runat="server" Name="Gruppo_di_Appartenenza">Testo del primo</input> <input id="Rdio2" type="radio" runat="server" Name="Gruppo_di_Appartenenza">Testo del secondo</input> <!-- Una checkbox --> <input id="chkbx" type="checkbox" runat="server">Testo della checkbox</input>
Per questi due elementi è la proprietà checked è fondamentale e essere variata durante l'esecuzione. Un'altra particolarità riguarda l'evento onServerChange che viene invocato quando nella pagina web, inviata al server tramite un bottone submit o altro, viene modificato lo stato di una checkbox o di un insieme di radiobutton.
HtmlInputFile
Concludiamo con un control che permette di all'utente di effettuare l'upload di un file sul server. Semplicemente dichiarando l'elemento:
<input id="File1" type="file" maxlength="30" runat="server" />
e avendo l'accortezza di specificare il valore corretto per l'attributo enctype del form:
<form enctype="multipart/form-data" runat="server" />
possiamo creare una pagina di upload del file. Ecco un esempio completo in cui si permette la scelta del nome con cui salvare il file:
<html>
<head>
<script language="C#" runat="server">
void Button1_Click(object Source, EventArgs e)
{
if (Text1.Value == "")
{
Span1.InnerHtml = "Error: inserisci il nome del file";
return;
}
if (File1.PostedFile != null)
{
try
{
File1.PostedFile.SaveAs("c:temp"+Text1.Value);
Span1.InnerHtml = "File uploadato con successo in <b>c:temp" + Text1.Value + "</b> sul Web server";
}
catch (Exception exc)
{
Span1.InnerHtml = "Errore nel salvataggio del file <b>c:temp" + Text1.Value + "</b><br>" + exc.ToString();
}
}
}
</script>
</head>
<body>
<h1>Esempio di Upload di file</h1>
<form enctype="multipart/form-data" runat="server" />
Seleziona il file da inviare al server:
<input id="File1" type="file" maxlength="30" runat="server" /><br />
Salva con nome(senza percorso):
<input id="Text1" type="text" runat="server" /><br />
<input type="button" id="Button1" value="Upload" OnServerClick="Button1_Click" runat="server" />
</form>
</body>
</html>
In questo esempio abbiamo indicato nella semplice riga
File1.PostedFile.SaveAs("c:temp"+Text1.Value);
di caricare il file nella posizione c:temp.
HtmlAnchor
Questo controllo serve per gestire i link, ovvero l'elemento <a> di HTML. Come per ogni hyperlink, è possibile linkare un segnalibro all'interno della pagina oppure un'altra pagina Web. Ecco un esempio:
<a id="link1" runat="server" href="http://aspnet.html.it" name="bookmarkname" OnServerClick="gestoredellevento" target="frameoppurewindow" title="suggerimento" >testo del link</a>
Tutte le proprietà sopra elencate sono accessibili dinamicamente quindi se ad esempio vogliamo generare dinamicamente l'attributo HREF possiamo prima dichiarare un HtmlAnchor control:
<a id="anchor1" runat="server" />
e poi scrivere un event handler che assegna un URL alla proprietà HRef:
void Page_Load(object sender, EventArgs e)
{
anchor1.HRef = "http://www.unbelsito.com";
}
HtmlImage
Ecco come dichiarare questo Control:
<img id="MyControl" runat="server"
src="Img12.jpg"
Height="226" Width="500" Border="5"
Align="center"
Alt="Immagine" />
Per ciascuna di queste proprietà è possibile specificare dinamicamente un valore quindi, ad esempio, il valore di src cioè l'indirizzo dell'immagine, le dimensioni etc.
Vediamo come generare semplici grafici a barre, utilizzando la proprietà Width:
<html>
<head>
<script language="C#" runat="server">
void Submit1_Click(Object sender, EventArgs e)
{
pix1.Width = Convert.ToInt32(Dato1.Value);
pix2.Width = Convert.ToInt32(Dato2.Value);
pix3.Width = Convert.ToInt32(Dato3.Value);
}
</script>
</head>
<body>
<h1>HtmlImage - Esempio</h1>
<form runat="server">
<p>Cambia i valori ed aggiorna il grafico a barre<p>
<table>
<tr>
<td>Dato1</td>
<td><img runat="server" id="pix1" src="blupix.gif" width="125" height="20" /></td>
</tr>
<tr>
<td>Dato2</td>
<td><img runat="server" id="pix2" src="blupix.gif" width="246" height="20" /></td>
</tr>
<tr>
<td>Dato3</td>
<td><img runat="server" id="pix3" src="blupix.gif" width="68" height="20"></td>
</tr>
</table>
<p>Dato1 <input runat="server" type="text" id="Dato1" size="4" maxlength="4" value="125" />
<br />
Dato2 <input runat="server" type="text" id="Dato2" size="4" maxlength="4" value="246" />
<br />
Dato3 <input runat="server" type="text" id="Dato3" size="4" maxlength="4" value="68" />
<br/>
<input type="submit" runat="server" Value="Aggiorna Grafico" OnServerClick="Submit1_Click" /></p>
</form>
</body>
</html>
La riga di comando:
pix1.Width= Convert.ToInt32(Dato1.Value);
imposta il valore della proprietà Width per ciascuna immagine al valore che l'utente ha digitato nel campo Dato1. In questo caso è necessaria una conversione del dato prelevato dal campo Dato1 (che è di tipo string) ad un valore intero.
HtmlInputButton
Questo controllo è usato per creare i tre classici bottoni dei form: <input,
type="submit"><input type="reset"> e <input type="button">. Per dichiarare questo control possiamo scrivere:
<input id="Nome" type="submit/reset/button" runat="server" />
Facciamo adesso un esempio con questo elemento e analizziamo la proprietà disabled:
<html>
<head>
<script language="C#" runat="server">
void Submit2_Click(Object sender, EventArgs e)
{
Btn1.Disabled=!Btn1.Disabled;
}
</script>
</head>
<body>
<h1>HtmlInputButton - Esempio</h3>
<form runat="server">
<p>Usa i bottoni per attivare o disattivare la proprietà Disabled del Bottone di esempio</p>
<p>
<input id="Btn1" type="submit" runat="server" Value="Bottone di esempio" /><br />
<input id="Btn2" type="submit" runat="server" Value="Attiva/Disattiva il Bottone di Esempio"
OnServerClick="Submit2_Click" />
</p>
</form>
</body>
</html>
La riga di comando
Btn1.Disabled=!Btn1.Disabled;
imposta il valore della proprietà Disabled all'opposto di come era in precedenza.
