Aplicación web con ASP.NET MVC 2 – parte 8 :: Validación de formularios

En esta parte del tutorial nos centraremos en realizar las validaciones de los datos en nuestros formularios, de forma que haremos solo un ejemplo y por su parte implementará las validaciones en el resto de los formularios.

Trabajaremos en la modificación de las vistas para Registrar y Editar (ProgramaEducativo) del controlador AdministrarPE donde nuestro resultado será el siguiente:

Img. 1. Validación de formularios.

Plantillas compartidas.

Como nos dimos cuenta al crear vistas para Registrar y Editar es que ambas vistas incluyen los mismos campos en el formulario, excepto por IdPE para Editar; esto es lo mismo con cualquier otras vistas para crear y editar registros.

Una de las formas de evitar crear 2 vistas para un mismo fin es crear plantillas compartidas llamadas Editor Template.

Img. 2. Carpeta de plantillas usadas por todos los controladores.

En la carpeta Views tenemos otra carpeta llamada Shared donde se almacenarán todas las vistas y plantillas compartidas que podrán ser utilizadas por todos los controladores, para crear nuestros Editor Templates compartidos, debemos agregar una nueva carpeta llama EditorTemplates como se ve en la imagen 2.

.

.

Img. 3. Carpeta para plantillas.

Si se requiere crear plantillas que serán utilizadas en un solo controlador, entonces en la carpeta Views/[NombreControlador] debe crearse una carpeta llamada EditorTemplates, en este ejemplo crearemos esta carpeta en Views/AdministrarPE como se ve en la imagen 3.

.

.

Crear la plantilla ProgramaEducativo.

Crearemos la plantilla a utilizar para Registrar y Editar un programa educativo, esta será creada en Views/AdministrarPE/EditorTemplates.

Para ello, sobre esta carpeta, con botón derecho seleccionamos Agregar/ Vista.

La vista a crear será un poco diferente a las vistas Registrar y Editar, ya que se está pensando que esta vista será incluida dentro de las vistas Registrar y Editar, este tipo de plantillas se le define como vista parcial y debe llevar el mismo nombre de la clase correspondiente, en este caso, la clase es ProgramaEducativo.

Ya en la ventana para crear vista.

Img. 4. Crear vista parcial ProgramaEducativo.

Solo asegúrese de seleccionar Crear una vista parcial, en content seleccione Create o Edit.

Agregada la vista, le haremos modificaciones al código de forma que solo quede la parte para los campos Nombre y NombreCorto.

<div class="editor-label">
    <%: Html.LabelFor(model => model.Nombre) %>
</div>
<div class="editor-field">
    <%: Html.TextBoxFor(model => model.Nombre) %>
    <%: Html.ValidationMessageFor(model => model.Nombre) %>
</div>

<div class="editor-label">
    Nombre corto
</div>
<div class="editor-field">
    <%: Html.TextBoxFor(model => model.NombreCorto) %>
    <%: Html.ValidationMessageFor(model => model.NombreCorto) %>
</div>

Modificar la vista Registrar y Editar.

Abra el código de la vista Registrar.aspx y elimine la parte del código que muestra los elementos del formulario (Nombre y NombreCorto), ya que ahora se encuentran en la plantilla, la parte del código modificado en la vista Registrar quedaría algo como:

        <fieldset>
            <legend>Datos del programa educativo</legend>

             <%: Html.EditorFor(model => Model) %>

            <p>
                <input type="submit" value="Registrar programa educativo" />
            </p>
        </fieldset>

Nota: El código resaltado en negrita fue el que reemplazo al código que ahora tenemos en nuestra plantilla ProgramaEducativo.ascx

Ejecutemos nuestra app y vayamos a intentar registrar un nuevo programa educativo.

Img. 5. Formulario utilizando vista parcial.

Ahora haga lo mismo con la parte de código correspondiente en la vista Editar.aspx, la parte modificada quedará de esta forma.

        <fieldset>
            <legend>Datos del programa educativo</legend>

           <%: Html.EditorFor(model => Model) %>

            <p>
                <input type="submit" value="Guardar Cambios" />
            </p>
        </fieldset>

La validación de datos del formulario.

ASP.NET MVC tiene la ventaja de ofrecernos herramientas y uso fácil para realizar esta tarea, el procedimiento es el siguiente:

  1. Crear una clase que se encargue de la validación de datos (clase parcial de metadatos).
  2. Configurar la validación con MicrosoftAjax en nuestro formulario.
  3. Verificar su funcionamiento.

Actualmente nuestros formularios tienen un fallo muy importante que debemos considerar, estos no realizan ninguna validación de los datos que son ingresados en sus campos, las validaciones que debemos considerar son los tipos de datos correctos, ya que de no recibir los datos correctos colapsará la base de datos y de paso la aplicación.

Es fácil agregar la validación a nuestra aplicación mediante la adición de anotaciones de datos para las clases de nuestro modelo. Las anotaciones de datos nos permiten describir las reglas que se desean aplicar a las propiedades de nuestro modelo (clases), y ASP.NET MVC se hará cargo de hacerlas cumplir y la visualización de los mensajes adecuados a los usuarios.

Para una clase simple del modelo, agregando una anotación de datos es manejada por la instrucción using paraSystem.ComponentModel.DataAnnotation, y  a continuación, colocar los atributos ensus propiedades, de esta forma:

using System.ComponentModel.DataAnnotations;
namespace Validacion.Models
{
   public class Persona
   {
     [Required]
     public string Nombre { get; set; }

     [Required]
     public string Apellidos { get; set; }

     public int Edad { get; set; }
   }
}

El ejemplo anterior ([Required]) hace que los valores para Nombre y Apellidos sean campos obligatorios en nuestros formularios.

Utilización de clases parciales de metadatos con Entity Framework (MetaData Partial Classes with Data Annotations) para validar datos.

Cuando queremos validar los datos al crear un objeto (registro) de alguna clase de nuestro modelo, debemos implementar una clase parcial de la misma (mismo nombre) para no sobrescribir la ya existente en el modelo.

Nuestro ejemplo se basa en validar los datos al registrar un nuevo programa educativo, así que en nuestra carpeta Models, agregaremos una nueva clase con el mismo nombre de “ProgramaEducativo”.

En el contenido de nuestra clase declararemos nuestra clase metadata.

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace EscuelaWebApp.Models
{
    [MetadataType(typeof(ProgramaEducativoMetaData))]
    public partial class ProgramaEducativo
    {
        //Reglas de validación para la clase ProgramaEducativo

        public class ProgramaEducativoMetaData
        {
            //Las reglas van aquí
        }
    }
}

Agregando validaciones (Data Annotations) a nuestro formulario ProgramaEducativo.

La clase parcial ProgramaEducativo tiene un atributo llamado MetadataType que apunta a la clase ProgramaEducativoMetaData, en esta última declararemos las reglas de validación a las cuales agregaremos algunos atributos como las anotaciones:

  • Required – Indica que la propiedad es un campo obligatorio.
  • DisplayName – Define el texto que desea utilizar en los campos del formulario y los mensajes de validación.
  • StringLength  – Define una longitud máxima de un campo de tipo cadena.
  • Range – Establece un valor máximo y mínimo para el valor de un campo numérico.
  • Bind – Listas de campos para excluir o incluir en los valores de enlace de parámetros o la forma para modelar las propiedades.
  • ScaffoldColumn – Permite ocultar campos de los formularios editor.

Para obtener más información acerca de Data Annotations, visite el link http://msdn.microsoft.com/es-mx/library/system.componentmodel.dataannotations.aspx

Revisa también este tutorial http://www.asp.net/mvc/tutorials/validation-with-the-data-annotation-validators-cs (
no digas “hay no, está en inglés”).

Entonces el código completo para nuestra clase parcial ProgramaEducativo queda como:

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace EscuelaWebApp.Models
{
    [MetadataType(typeof(ProgramaEducativoMetaData))]
    public partial class ProgramaEducativo
    {
        //Reglas de validación para la clase ProgramaEducativo

        [Bind(Exclude = "IdPE")] //Excluir IdPE de la validación
        public class ProgramaEducativoMetaData
        {
            //Reglas

            //El campo IdPE lo configuramos para Scaffold dejando la gestión de su valor al sql server.
            //el campo ya ha sido excluido en nuestro formulario - plantilla (ProgramaEducativo.ascx)
            [ScaffoldColumn(false)]
            public object IdPE { get; set; }

            [Required(ErrorMessage = "El nombre es obligatorio.")]
            public object Nombre { get; set; }

            [Required(ErrorMessage = "El nombre corto es obligatorio.")]
            [DisplayName("Nombre corto")] //Mostrar "Nombre corto" en lugar de NombreCorto.
            [StringLength(12,ErrorMessage = "El nombre corto debe tener como máximo 12 caracteres.")]
            public object NombreCorto { get; set; }
        }
    }
}

Habilitar la validación con AJAX (Validación por el lado del cliente).

Solo falta modificar nuestra plantilla o formulario ProgramaEducativo.ascx para que pueda realizar la validación de datos con AJAX, entonces vamos al código de ProgramaEducativo.ascx donde agregamos.

<%@ Import Namespace="EscuelaWebApp" %>
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<EscuelaWebApp.Models.ProgramaEducativo>" %>

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>

Nota: La línea de código tachado es como referencia para saber donde deben agregarse las lineas de código faltantes, más no debe eliminarse.

Los archivos JS deben existir en nuestra carpeta Scripts, sino existen por alguna casualidad, cree otro nuevo proyecto de ASP.NET MVC 2 y copie los scripts desde el nuevo proyecto.

Ahora debemos utilizar el método Html.EnableClientValidation helper para habilitar o activar la validación en nuestros formularios, para esto debemos volver a modificar las vistas Registrar y Editar.

Actualmente nuestras vistas en la parte del formulario tienen:

    <% using (Html.BeginForm()) {%>
        <%: Html.ValidationSummary(true) %>

        <fieldset>
            <legend>...

Donde la línea resaltada en negrita debe eliminarse, y agregar una nueva linea antes del inicio del formulario, al final esta parte del código queda:

 <% Html.EnableClientValidation(); %>
    <% using (Html.BeginForm()) {%>

        <fieldset>
            <legend>Datos del programa educativo</legend>

La línea resaltada en negrita es la nueva linea agregada para activar la validación.

Ahora comprobemos la validación, para ello ejecute la aplicación y vaya a registrar un nuevo programa educativo, sin ingresar ningún datos, haga clic en el botón para crearlo, deben saltar nuestros mensajes de error especificados en nuestra clase parcial ProgramaEducativo.

Img. 6. Probando validación de datos.
Img. 7. Validando formularios.
Img. 8. Validando datos de formularios.

Y bien, la validación ha funcionado al ingresar solo algunos valores e ingresando una longitud excedida para un campo.

Su labor ahora es implementar la validación para las vistas Registrar y Editar para la clase Tutor (Controlador AdministrarTutores) y para el resto de las vistas Editar y Registrar que se irán creando debe ir implementando la validación.

Img. 9. Validar datos en Registrar y Editar Tutor.

¡Suerte…!

Escribe tu comentario:

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s