Introducción a programación web Martin Esses

Formularios HTML se utilizan para pasar datos a un servidor. Un formulario HTML puede contener elementos de entrada como campos de texto, casillas de verificación, botones de radio, botones de envío y más. El formulario también puede contener listas de selección, textarea, fieldset, legend y elementos de etiquetado.

Hay dos métodos principales por los cuales un navegador interactúa con un servidor web. El más común es el método GET, en el que el navegador simplemente solicita el contenido de un URL en particular. El segundo es el método POST, en el que el navegador "envía" datos a un URL en particular. Por ejemplo, puede enviar algunos datos que un usuario ha entrado en un formulario en una página web.

GET es como tu navegador baja la mayoría de los archivos, como archivos HTML e imágenes. Puede ser usado también en la mayoría de los envíos si no hay muchos datos (el límite varía de navegador a navegador). Esta diseñado principalmente para obtener información del servidor. Ejemplo:

POST es usado para enviar un datos al servidor para ser procesado. Cuando un formulario HTML se envía usando POST, los datos del formulario se agregan al final de la petición POST. Esto no es tan rápido como al usar GET, pero es mucho más versátil. Por ejemplo, puedes enviar un archivo completo usando POST. El tamaño de los datos es ilimitado a diferencia de GET.

Los helpers nos van a permitir crear campos para crear un formulario de una manera muy cómoda y son sin duda alguna la manera preferida de hacerlo.

Lo primero que vamos a ver es como crear un campo HTML para editar (o mostrar) una propiedad específica del models que recibe la vista. Supongamos que tenemos esa clase: public class Trabajador{ public string Nombre { get; set; } public string Apellido { get; set; } public DateTime FechaNacimiento { get; set; } public double Sueldo { get; set; } public bool EsFijo { get; set; } }

Ahora vamos a crear una vista que muestre cuatro campos de texto (para nombre, apellido, fecha de nacimiento y sueldo) y una casilla de verificación para indicar si es fijo o no. Pero en lugar de crear los controles a mano ( ) vamos a usar los helpers:

@using Trabajador Fecha => x.Sueldo) Es

Estamos usando los helpers: Html.TextBoxFor que muestra un campo de texto para la propiedad indicada Html.CheckBoxFor que muestra una casilla de verificación para la propiedad indicada Ver como se indica a cada helper para que propiedad debe renderizar el

El parámetro en forma x=>x.Nombre es una expresión lambda. La ventaja de usar una expresión lambda antes que una cadena (algo como TextBoxFor("Nombre")) es que las expresiones lambda son evaluadas en tiempo de compilación y no de ejecución (si nos equivocamos en el nombre de la propiedad el código no compila). Esto requiere que la vista sea tipada con el tipo de ViewModel (fijaos en el uso de la

Siguiendo el codigo utilizado anteriormente, al ejecutarlo podran ver que los helpers tambien manejan los mensajes de error. En concreto el sistema nos muestra un error si FechaNacimiento o Sueldo están vacíos. ¿Y por qué esos dos campos y no los otros? Muy sencillo: porque esos dos campos están declarados como DateTime y double que son tipos por valor y por lo tanto nunca pueden valer null.

Hemos visto TextBoxFor y CheckBoxFor pero hay un helper por cada control HTML que habitualmente usamos en formularios, así tenemos Html.TextAreaFor, Html.LabelFor, Html.DropDownListFor, etc.

El uso de Html.LabelFor porque es otro que se usa muchísimo. Ese genera un campo vinculado a una propiedad. Así Nos genera el código HTML: Nombre La etiqueta se renderiza como texto plano. La ventaja de usarla es que al pulsar sobre la label el navegador da el foco al control indicado en el atributo for (en ese caso el textbox de al lado).

Este helper lo que genera es el tag De hecho el tag y su respectivo Es por ello que ese helper se "usa" de una forma un poco (Html.BeginForm()) { }

El código que genera el formulario se incluye dentro de las llaves de apertura y cierre. Cuando se encuentre la llave de cierra se generará el tag. Al usar BeginForm() debemos tener un poco más de cuidado con Razor.

El siguiente código da => => x.Nombre) => x.Apellido) Fecha => x.FechaNacimiento) => x.Sueldo) Es => x.EsFijo) }

La razón es que Razor interpreta que debe ejecutar el código que se encuentra entre las llaves. Por supuesto, como ya vimos, Razor es lo suficientemente inteligente para "ignorar" el código HTML (como ) pero no el texto plano. Es decir, Razor intentará ejecutar el código Apellido: (o Es Fijo:) que un código totalmente inválido en C#, de ahí el error.

O bien o bien usamos la etiqueta ficticia para indicarle a Razor que este texto plano es eso, “texto (Html.BeginForm()) => => => x.FechaNacimiento) => x.Sueldo) Es => x.EsFijo) }