Introducción a programación web Martin Esses. En las presentaciones anteriores, vimos como enviar datos a un controlador usando POST y como generar formularios.

Presentación del tema: "Introducción a programación web Martin Esses. En las presentaciones anteriores, vimos como enviar datos a un controlador usando POST y como generar formularios."— Transcripción de la presentación:

1 Introducción a programación web Martin Esses

2 En las presentaciones anteriores, vimos como enviar datos a un controlador usando POST y como generar formularios utilizando Helpers. Tambien vimos que asp net, puede construir un objeto a partir de una petición, asociándolo directamente con el modelo definido. Por ultimo llegamos a ver que utilizando los helpers, obteníamos de forma fácil y sin escribir líneas de código propias, algunas validaciones. Por Ejemplo: Si declaramos un campo como int, ASP.NET MVC valida que no hayan caracteres alfanuméricos.

3 Sin embargo, lo que vemos automáticamente al usar los helpers no son validaciones, son errores. 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. Si introducimos una cadena alfanumérica en un campo que se ha declarado como int, cuando el Model Binder debe enlazar los datos genera un error.

4 Los errores que el Model Binder encuentra al intentar enlazar los valores del request con las propiedades del viewmodel son guardados en el ModelState y pueden ser consultados desde el propio controlador y también desde la vista. Intentar convertir una cadena alfanumérica en un int es un error, pero hay muchos más casos en los que nos puede interesar decirle al usuario que los datos ingresados son incorrectos:

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

6 Estos son los casos cuando nos referimos a validaciones. Sin embargo aunque nosotros diferenciemos entre errores y validaciones ASP.NET MVC no lo hace. Ambos son tratados igual, es decir ambos son guardados en el ModelState. Antes de profundizar más, veamos exactamente que es el ModelState.

7 Que es el ModelState? El ModelState es un objeto, gestionado por el framework de ASP.NET MVC que indica cual es el estado del modelo. En este contexto por modelo entendemos el objeto que recibe un controlador (lo que generalmente llamamos view model) y por estado entendemos si es correcto o no. Correcto significa que los datos de la petición eran válidos y que el Model Binder ha podido crear un objeto y rellenarlo. Incorrecto significa que había algún dato de la petición inválido, ya sea por algún error o bien por alguna validación fallida

8 El ModelState es básicamente un diccionario donde: Las claves son los nombres de las propiedades de nuestro modelo. Por cada clave hay el valor que el Model Binder ha asignado a esa clave y lo que más nos importa: una colección de los errores vinculados a esa clave si los hubiese. Cuando hablamos de errores nos referimos tanto a errores como a validaciones fallidas.

9

10 La imagen muestra la composición del ModelState. La propiedad Keys contiene las claves (en este caso el viewmodel que estábamos usando era una clase con una propiedad string llamada Nombre y un int llamado Edad) y la propiedad Values donde podemos ver, por cada clave, el valor que le ha sido asignado (Value) y la colección de errores (Errors).

11 El ModelState contiene una propiedad llamada IsValid que nos dice si el modelo es correcto, es decir si no hay errores. Esa propiedad suele usarse de la siguiente forma: [HttpPost] public ActionResult Index(DemoModel data) { if (!ModelState.IsValid) { return View(data); } else { // Codigo normal return View("ok"); } }

12 Si el ModelState no es 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.

13 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. Aunque ASP.NET MVC es muy flexible en este punto, vamos a ver la forma más común de hacerlo: usando DataAnnotations.

14 Para añadir validaciones usando DataAnnotations simplemente debemos decorar la propiedad que deseemos con alguno de los atributos (algunos se encuentran en el namespace System.ComponentModel.DataAnnotations y otros en System.Web.Mvc). P.ej. si tenemos el siguiente viewmodel: public class DemoModel { public string Nombre { get; set; } public int Edad { get; set; } }

15 Si queremos que el Nombre sea obligatorio podemos decorarlo con [Required]: public class DemoModel { [Required] public string Nombre { get; set; } public int Edad { get; set; } }

16 ¡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:

17 Si lo comparamos con la presentación anterior donde también se mostraban campos erróneos, veremos una pequeña diferencia: no solo se muestra el campo en rojo, sino que también hay un mensaje de error. ¿Quién agrega ese mensaje de error? Pues un helper del que todavía no habíamos hablado: Html.ValidationMessageFor Su uso es como lo de los helpers para generar formularios: con una expresión lambda le indicamos la propiedad para la cual queremos mostrar sus mensajes de error (si los hubiese).

18 @using (Html.BeginForm()) { @Html.ValidationSummary(true) DemoModel @Html.LabelFor(model => model.Nombre) @Html.EditorFor(model => model.Nombre) @Html.ValidationMessageFor(model => model.Nombre) @Html.LabelFor(model => model.Edad) @Html.EditorFor(model => model.Edad) @Html.ValidationMessageFor(model => model.Edad) }

19 Hay varios atributos para distintas validaciones y todos se usan igual: decorando las propiedades. Si tu aplicación exige que sus usuarios tengan entre 18 y 65 años, se puede usar Range: public class DemoModel { [Required] public string Nombre { get; set; } [Range(18, 65)] public int Edad { get; set; } }

20 Más atributos que existen: 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

21 Para modificar el color que se usa para mostrar los errores basta con modificar la css. Los helpers usan la clase input-validation-error para indicar que el campo de formulario está mostrando un error, así que su aspecto depende de cómo tengamos definida esa clase en la CSS. Por otro lado 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: 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; } }

22