Páginas Web ASP.NET - Formulario HTML

El formulario (plantilla) es el lugar donde coloca los controles de entrada (cajas de texto, casillas de verificación, opciones de radio y menús desplegables) en el documento HTML.

Crear página de entrada HTML

Razor Instancia

<html>
<body> 
@{
if (IsPost) { 
string companyname = Request["companyname"]; 
string contactname = Request["contactname"]; 
<p>Ingrese: <br />
Nombre de Empresa: @companyname <br />
Nombre de Contacto: @contactname </p>
}
else
{
<form method="post" action="">
Nombre de Empresa:<br />
<input type="text" name="NombreEmpresa" value="" /><br />
Nombre de Contacto:<br />
<input type="text" name="NombreContacto" value="" /><br /><br />
<input type="submit" value="Enviar" class="enviar" />
</form>
}
} 
</body> 
</html>

Ejemplo de ejecución

Ejemplo de Razor - Mostrar imagen

Supongamos que en su carpeta de imágenes hay tres imágenes y desea mostrar estas imágenes dinámicamente según la elección del usuario.

Se puede lograr fácilmente con un pequeño fragmento de Razor.

Si el nombre de la imagen en la carpeta de imágenes del sitio web es "Photo1.jpg", puede usar el elemento HTML <img> para mostrar esta imagen, como así:

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

El siguiente ejemplo muestra cómo mostrar la imagen seleccionada por el usuario desde una lista desplegable:

Razor Instancia

@{
var imagePath=""; 
if (Request["Choice"] != null)
   {imagePath="images/" + Request["Choice"];} 
} 
<!DOCTYPE html> 
<html> 
<body> 
<h1>Mostrar Imágenes</h1> 
<form method="post" action=""> 
Quiero ver: 
<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="Enviar" /> 
@if (imagePath != "")
{
<p>
<img src="@imagePath" alt="Sample" />
</p>
}  
</form> 
</body> 
</html>

Ejemplo de ejecución

Ejemplo de explicación

El servidor crea una variable llamada imagePath

En la página HTML hay una variable llamada Choice deLista desplegable（elemento <select>）。Permite al usuario seleccionar un nombre amigable (nota del editor: fácil de leer) (por ejemplo Photo 1），al enviar la página al servidor web, se transmite el nombre del archivo (por ejemplo, Photo1.jpg) al servidor.

Razor a través Request["Choice"] Leer el valor de Choice. Si el valor existe, el código construye una ruta hacia la imagen (images/Photo1.jpg) y almacena la ruta en la variable imagePath 。

El elemento <img> en la página HTML muestra esta imagen. Cuando se muestra la página, el atributo src se configurará con el valor de la variable imagePath.

Si el valor de la variable imagePath está vacío, se evitará que el elemento <img> muestre una imagen inexistente (por ejemplo, cuando la página se carga por primera vez).