ASP.NET Web Pages - HTML form

A form (a form) is the place where you put input controls (text boxes, checkboxes, radio buttons, and dropdown menus) in an HTML document.

Create HTML input page

Razor instance

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

Exécuter l'exemple

Razor instance - Displaying image

Assuming you have three images in your image folder and you want to display these images dynamically based on the user's selection.

This can be easily achieved with a short snippet of Razor.

If the name of the image in the website's image folder is "Photo1.jpg", you can use the HTML <img> element to display this image, like this:

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

The following example demonstrates how to display an image selected by the user from a dropdown list:

Razor instance

@{
var imagePath=""; 
if (Request["Choice"] != null)
   {imagePath="images/" + Request["Choice"];} 
} 
<!DOCTYPE html> 
<html> 
<body> 
<h1>Afficher des images</h1> 
<form method="post" action=""> 
Je veux voir : 
<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="Soumettre" /> 
@if (imagePath != "")
{
<p>
<img src="@imagePath" alt="Sample" />
</p>
}  
</form> 
</body> 
</html>

Exécuter l'exemple

Exemple d'explication

Le serveur crée un nom imagePath dans la page HTML.

Il y a une variable nommée Choice deListe déroulante（élément <select>）。Il permet à l'utilisateur de choisir un nom amical (note de l'éditeur : facile à lire) (par exemple Photo 1），quand la page est soumise au serveur web, le nom de fichier est transmis au serveur (par exemple Photo1.jpg).

Razor par Request["Choice"] Lire la valeur de Choice. Si la valeur existe, le code construit un chemin vers l'image (images/Photo1.jpg) et stocke ce chemin dans la variable imagePath 。

L'élément <img> dans la page HTML affiche cette image. Lorsque la page est affichée, l'attribut src est réglé sur la valeur de la variable imagePath.

Si la valeur de la variable imagePath est vide, cela empêchera l'élément <img> deAfficher une image inexistaite (par exemple lors du chargement initial de la page).