Helpers en ASP.NET MVC

Introducción Los helpers son una herramienta muy potente para generar nuestro propio código HTML dentro de las vistas. Los helpers nos van a permitir crear campos en un formulario de una manera muy cómoda y relativamente sencilla.

Introducción Lo primero que vamos a ver es como crear un campo HTML para editar (o mostrar) una propiedad específica del model que recibe la vista. Supongamos que tenemos esta 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 Activo{ get; set; } }

Introducción 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 (<input type="xxx">) vamos a usar helpers: @using NombreProyecto.Models @model Trabajador <form method=“post” action=“@Url.Action(“EdicionTrabajador”,”Trabajo”)> Nombre: @Html.TextBoxFor(x=>x.Nombre) <br /> Apellido: @Html.TextBoxFor(x=>x.Apellido) <br /> Fecha Nacimiento: @Html.TextBoxFor(x=>x.FechaNacimiento) <br /> Sueldo: @Html.TextBoxFor(x => x.Sueldo) <br /> Es Activo: @Html.CheckBoxFor(x=>x.Activo) <br /> <input type="submit" value="Enviar"/> </form>

@Html.TextBoxFor(x=>x.Nombre) Helpers 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 Hay un helper por cada control HTML que habitualmente usamos en formularios, como por ejemplo Html.TextAreaFor, Html.LabelFor, Html.DropDownListFor, etc. ¿Cómo se indica a cada helper que propiedad debe renderizar el control? @Html.TextBoxFor(x=>x.Nombre) Con esto logramos que cuando el formulario le envíe la información al ActionMethod del controller esta pueda ser recibido en un objeto de tipo Trabajador.

Helpers 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 (ver en el uso la directiva @model).

Como recibe el controller los datos del form? [HTTPPost] Public ActionResult EdicionTrabajador(Trabajador UnTrabajador) { // Aca puedo hacer lo que quiera con el objeto, por ejemplo: UnTrabajador.Modificar(); // Incluso puedo enviar los datos del objeto a otra vista, de la siguiente manera: Return View(“DetalleTrabajador”,UnTrabajador); } Como mostramos los datos en la vista DetalleTrabajador?

Vista del detalle enviado

Helpers También podemos utilizar un helper para la creación del formulario. @Html.BeginForm([Action], [Controller], [Method]) { <!-- Codigo del formulario --> } Al usar BeginForm() debemos tener un poco más de cuidado con Razor. La razón es que Razor interpreta que debe ejecutar el código que se encuentra entre las llaves. Por supuesto, Razor es lo suficientemente inteligente para "ignorar" el código HTML (como <br />) pero no el texto plano. Es decir, Razor intentará ejecutar el código Apellido: (o Es Activo:) que un código totalmente inválido en C#, de ahí el error. Para eso podemos reemplazarlo utilizando Html.Label

Esto en realidad, más que una validación, es un manejo de errores. Helpers ¿Y qué ventajas obtenemos utilizando Helpers? Siguiendo la clase creada anteriormente, al ejecutarlo verán que los helpers también manejan los mensajes de error: El sistema nos mostrará 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 que requieren un valor y por lo tanto nunca pueden valer nulo o vacío. Esto en realidad, más que una validación, es un manejo de errores.

Helpers – Validación de datos ModelState: El ModelState es un objeto, gestionado por el framework de ASP.NET MVC que indica cual es el estado del modelo.  Contiene una propiedad llamada IsValid que nos indica si el modelo es correcto, es decir, si no hay errores. [HttpPost] public ActionResult EdicionTrabajador(Trabajador UnTrabajador) { if (!ModelState.IsValid) {                 return View(UnTrabajador);       }       else {       return View(“DetalleTrabajador”);       }  }

Helpers – Validación de datos Que el ModelState no sea válido significa que alguna entrada del usuario no es correcta, por lo tanto devolvemos de nuevo la vista que contiene el formulario con los datos. Si el ModelState es válido eso significa que las entradas del usuario son correctas por lo que procedemos a realizar la acción que querramos.

Helpers Hay muchos más casos en los que nos puede interesar decirle al usuario que los datos ingresados no son validos : Por ejemplo: Campos Obligatorios Cadenas con un determinado formato (un email) Dos campos que deben ser iguales (contraseña y repetir contraseña) Valores que deben estar dentro de un determinado rango (puntuación del 1 al 10) ¿COMO HACEMOS?

Helpers - Validación de datos - DataAnnotations Hasta ahora vimos el mecanismo que utiliza el framework de MVC para indicarnos que hay algún error. Ahora vamos a ver cómo podemos añadir nuestras validaciones a este mecanismo. Aunque ASP.NET MVC es muy flexible en este punto, vamos a ver la forma más común de hacerlo: usando DataAnnotations. (necesitamos hacer un using con System.ComponentModel.DataAnnotations y otro con System.Web.Mvc) Para añadir validaciones usando DataAnnotations simplemente debemos completar en la propiedad que deseemos, alguno de los atributos que veremos a continuación:

Helpers – Validación de datos Por ejemplo, si tenemos la siguiente Clase: public class Trabajador     {             public string Nombre { get; set; }             public int Edad { get; set; }     } Podemos hacer que Nombre sea obligatorio agregando el atributo [Required]: public class Trabajador     { [Required]             public string Nombre { get; set; }             public int Edad { get; set; }     }

Helpers – Validación de datos ¡Y listos! Solo con añadir el atributo Required, el framework sabe que el Nombre es requerido y si el usuario no lo ingresa se mostrará un error: (ModelState devolverá false en su propiedad IsValid)

Helpers – Validación de datos ¿Y podemos mostrar un mensaje de error para explicarle al usuario que ha completado incorrectamente? Pues si, con un helper del que todavía no habíamos hablado:  Html.ValidationMessageFor Ej: @Html.Label(“Nombre”) @Html.TextBoxFor(x=>x.Nombre) @Html.ValidationMessageFor(x => x.Nombre) <br />

Helpers – Validación de datos ¿Y podemos cambiar el texto del mensaje de error? El mensaje que vemos es el que genera el framework por defecto, pero podemos modificarlo por uno nuestro usando la propiedad ErrorMessage que tienen todos los atributos de validación: Lo hacemos al crear la validación en la clase public class Trabajador { [Required(ErrorMessage = "¡Aquí todo el mundo tiene un nombre!")]           public string Nombre { get; set; }           public int Edad { get; set; } }

Helpers – Validación de datos Hay varios atributos para distintas validaciones y todos se usan igual: anticipando a las propiedades. Si tu aplicación exige que sus usuarios tengan entre 18 y 65 años, se puede usar Range: Ej: [Range(18,65)] StringLength: Para limitar el número de caracteres de un campo texto (p.ej. el password debe tener entre 6 y 15 caracteres). Ej: [StringLength(15, MinimumLength = 6)] Compare: Para que dos campos tengan el mismo valor (p.ej. password y repetir password) Ej: [Compare(CompareField = Password)] RegularExpression: Para validar contra una expresión regular

Helpers – Validación de datos public class Trabajador { [Required(ErrorMessage = “Nada de anónimos. ¡Aquí todo el mundo tiene un nombre!")]  public string Nombre { get; set; }  [Range(18,65, ErrorMessage = “Aca hay xxx, nada de menores de edad ni de jubilados")] public int Edad { get; set; } [StringLength(15, MinimumLength = 6, ErrorMessage = “Uff, entre 6 y 15 caracteres papá!")] public string password; }