Pagine Web ASP.NET - Moduli HTML
Un modulo è una sezione di un documento HTML in cui vengono inseriti i controlli di input (caselle di testo, caselle di controllo, pulsanti di opzione ed elenchi a discesa).
Creazione di una pagina di input HTML
Esempio di rasoio
<html>
<body>
@{
if (IsPost) {
string companyname = Request["CompanyName"];
string contactname = Request["ContactName"];
<p>You entered: <br />
Company Name: @companyname <br />
Contact Name: @contactname </p>
}
else
{
<form method="post" action="">
Company Name:<br />
<input type="text" name="CompanyName" value="" /><br />
Contact Name:<br />
<input type="text" name="ContactName" value="" /><br /><br />
<input type="submit" value="Submit" class="submit" />
</form>
}
}
</body>
</html>
Esempio di rasoio - Visualizzazione delle immagini
Supponiamo di avere 3 immagini nella cartella delle immagini e di voler visualizzare le immagini in modo dinamico a scelta dell'utente.
Questo può essere fatto facilmente da un piccolo codice Razor.
Se hai un'immagine chiamata "Photo1.jpg" nella cartella delle immagini sul tuo sito web, puoi visualizzare l'immagine usando un elemento HTML <img> come questo:
<img src="images/Photo1.jpg" alt="Sample" />
L'esempio seguente mostra come visualizzare un'immagine selezionata che l'utente seleziona da un elenco a discesa:
Esempio di rasoio
@{
var imagePath="";
if (Request["Choice"] != null)
{imagePath="images/" + Request["Choice"];}
}
<!DOCTYPE html>
<html>
<body>
<h1>Display Images</h1>
<form method="post" action="">
I want to see:
<select name="Choice">
<option value="Photo1.jpg">Photo 1</option>
<option value="Photo2.jpg">Photo 2</option>
<option value="Photo3.jpg">Photo 3</option>
</select>
<input type="submit" value="Submit" />
@if (imagePath != "")
{
<p>
<img src="@imagePath" alt="Sample" />
</p>
}
</form>
</body>
</html>
Esempio spiegato
Il server crea una variabile chiamata imagePath .
La pagina HTML ha un elenco a discesa (un elemento <select>) denominato Choice . Consente all'utente di selezionare un nome descrittivo (come Photo 1 ) e passa un nome file (come Photo1.jpg ) quando la pagina viene inviata al server web.
Il codice Razor legge il valore di Choice by Request["Choice"] . Se ha un valore, il codice costruisce un percorso per l'immagine images/Photo1.jpg e lo memorizza nella variabile imagePath .
Nella pagina HTML è presente un elemento <img> per visualizzare l'immagine. L'attributo src è impostato sul valore della variabile imagePath quando viene visualizzata la pagina.
L'elemento <img> si trova in un blocco if per evitare di provare a visualizzare un'immagine senza nome (come la prima volta che viene visualizzata la pagina).