Helpers en ASP.NET MVC3. Introducción Los helpers son una herramienta muy potente para generar nuestro propio código HTML dentro de las vistas. Los helpers.

Presentación del tema: "Helpers en ASP.NET MVC3. Introducción Los helpers son una herramienta muy potente para generar nuestro propio código HTML dentro de las vistas. Los helpers."— Transcripción de la presentación:

1 Helpers en ASP.NET MVC3

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

3 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 EsFijo { get; set; } }

4 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 ( ) vamos a usar los helpers: @using MvchelpersForms.Models @model Trabajador Nombre: @Html.TextBoxFor(x=>x.Nombre) Apellido: @Html.TextBoxFor(x=>x.Apellido) Fecha Nacimiento: @Html.TextBoxFor(x=>x.FechaNacimiento) Sueldo: @Html.TextBoxFor(x => x.Sueldo) Es Fijo: @Html.CheckBoxFor(x=>x.EsFijo)

5 Helpers También podemos utilizar un helper para la creación del formulario. @Html.BeginForm([Action], [Controller]) { } 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 ) 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. Para eso podemos reemplazarlo utilizando Html.LabelFor

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

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

8 Helpers ¿Y qué ventajas obtenemos utilizando Helpers? Siguiendo la clase creada anteriormente, al ejecutarlo podrán ver 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.

9 Helpers ¿Y qué ventajas obtenemos utilizando Helpers? Siguiendo la clase creada anteriormente, al ejecutarlo podrán ver 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.

10 Helpers ¿Y qué ventajas obtenemos utilizando Helpers? Siguiendo la clase creada anteriormente, al ejecutarlo podrán ver 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.

11 Helpers Hay muchos más casos en los que nos puede interesar decirle al usuario que los datos ingresados son incorrectos: 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)

12 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 Index(DemoModel data) { if (!ModelState.IsValid) { return View(data); } else { return View(); } }

13 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. Como vimos en la presentación anterior, si usamos los helpers para crear el formulario, estos mostrarán los errores (en color rojo con la CSS por defecto). 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.

14 Helpers – Validación de datos 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 la propiedad que deseemos con alguno de los siguientes atributos

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

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

17 Helpers – Validación de datos ¿Cómo hicimos para mostrar el mensaje de error al lado del campo? Pues con un helper del que todavía no habíamos hablado: Html.ValidationMessageFor Ej: @Html.LabelFor(x=>x.Nombre) @Html.TextBoxFor(x=>x.Nombre) @Html.ValidationMessageFor(x => x.Nombre)

18 Helpers – Validación de datos ¿Cómo validamos 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 DemoModel { [Required(ErrorMessage = "¡Aquí todo el mundo tiene un nombre!")] public string Nombre { get; set; } public int Edad { get; set; } }

19 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: StringLength: Para limitar el número de caracteres de un campo texto (p.ej. el password debe tener entre 6 y 15 caracteres). Compare: Para que dos campos tengan el mismo valor (p.ej. password y repetir password) RegularExpression: Para validar contra una expresión regular

20 Helpers – Validación de datos public class DemoModel { [Required(ErrorMessage = "¡Aquí todo el mundo tiene un nombre!")] public string Nombre { get; set; } [Range(18,65, ErrorMessage = "Solo mayores de edad no jubilados")] public int Edad { get; set; } [StringLength(6,15, ErrorMessage = "Flaco, mas de 6 letras y menos de 15")] public string password; }