Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Altri Html Controls

Altri controlli gestibili
Altri controlli gestibili
Link copiato negli appunti

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"
       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"   /></td>
</tr>
<tr>
<td>Dato2</td>
<td><img runat="server" id="pix2" src="blupix.gif"   /></td>
</tr>
<tr>
<td>Dato3</td>
<td><img runat="server" id="pix3" src="blupix.gif"  ></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.


Ti consigliamo anche