Pages Web ASP.NET - Formulaires HTML


Un formulaire est une section d'un document HTML dans laquelle vous placez des contrôles de saisie (zones de texte, cases à cocher, boutons radio et listes déroulantes).


Création d'une page d'entrée HTML

Exemple de rasoir

<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>


Razor Exemple - Affichage d'images

Supposons que vous ayez 3 images dans votre dossier d'images et que vous souhaitiez afficher les images dynamiquement selon le choix de l'utilisateur.

Cela se fait facilement avec un petit code Razor.

Si vous avez une image appelée "Photo1.jpg" dans votre dossier d'images sur votre site Web, vous pouvez afficher l'image en utilisant un élément HTML <img> comme ceci :

<img src="images/Photo1.jpg" alt="Sample" />

L'exemple ci-dessous montre comment afficher une image sélectionnée que l'utilisateur sélectionne dans une liste déroulante :  

Exemple de rasoir

@{
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>

Exemple expliqué

Le serveur crée une variable appelée imagePath .

La page HTML a une liste déroulante (un élément <select>) nommée Choice . Il permet à l'utilisateur de sélectionner un nom convivial (comme Photo 1 ) et transmet un nom de fichier (comme Photo1.jpg ) lorsque la page est soumise au serveur Web.

Le code Razor lit la valeur de Choice by Request["Choice"] . S'il a une valeur, le code construit un chemin vers l'image images/Photo1.jpg et le stocke dans la variable imagePath .

Dans la page HTML, il y a un élément <img> pour afficher l'image. L'attribut src est défini sur la valeur de la variable imagePath lorsque la page s'affiche.

L'élément <img> est dans un bloc if pour éviter d'essayer d'afficher une image sans nom (comme la première fois que la page est affichée).