Validación de datos de formularios HTML- Html.ValidationSummary

Vimos en el concepto anterior que podemos definir las reglas de validación en el modelo mediante una Data Annotations, luego mediante la llamada al método ValidationMessageFor mostramos el mensaje de error en la vista.

Los mensajes de error los podemos mostrar todos juntos en una lista utilizando el método ValidationSummary.

Plantearemos el mismo problema del concepto anterior, pero ahora mostraremos los mensajes de error agrupados en la parte superior de la página.

Problema (Proyecto14)

Declarar un modelo que represente una persona y definir las reglas de validación en cada propiedad mediante Data Annotations:

Persona.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;

namespace Proyecto14.Models
{
    public class Persona
    {
        [Required(ErrorMessage = "El Nombre es obligatorio")]
        [MinLength(10, ErrorMessage = "El Nombre de usuario debe tener al menos 10 caracteres")]
        public String Nombre { get; set; }

        [Range(1, 18, ErrorMessage = "La edad debe estar entre 1 y 18")]
        public int Edad { get; set; }

        [EmailAddress(ErrorMessage = "Debe ingresar un mail válido")]
        public String Email { get; set; }

        [RegularExpression("[MmFf]", ErrorMessage = "Solo puede ingresar una M o F")]
        public String Genero { get; set; }
    }
}

Ahora creamos el HomeController y definimos dos acciones:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Proyecto14.Models;

namespace Proyecto14.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            Persona per = new Persona();
            return View(per);
        }

        [HttpPost]
        public ActionResult Index(Persona per)
        {
            if (ModelState.IsValid)
                return View("Correcto");
            else
                return View(per);
        }
    }
}

También debemos definir la vista "Index.cshtml":

@model Proyecto14.Models.Persona

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        @Html.ValidationSummary()
        @using (Html.BeginForm())
        {
            <p>
                Ingrese Nombre:
                @Html.EditorFor(model => model.Nombre)
            </p>
            <p>
                Ingrese Edad (entre 1 y 18):
                @Html.EditorFor(model => model.Edad)
            </p>
            <p>
                Ingrese Email:
                @Html.EditorFor(model => model.Email)
            </p>
            <p>
                Ingrese género:
                @Html.EditorFor(model => model.Genero)
            </p>
            <p>
                <input type="submit" value="Confirmar" />
            </p>
        }
    </div>
</body>
</html>

En ésta vista en lugar de utilizar un ValidationMessageFor para cada uno de los controles a validar utilizamos una única llamada al método ValidationSummary. Luego cuando ejecutamos la aplicación podemos ver que los mensajes de error aparecen previos al formulario:

La última vista que debemos codificar es la "Correcto.cshtml":


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Correcto</title>
</head>
<body>
    <div>
        <p>Los datos fueron cargados correctamente.</p>
        @Html.ActionLink("Retornar", "Index")
    </div>
</body>
</html>

Este proyecto lo puede descargar en un zip desde este enlace: proyecto14.zip

Retornar

14 - Validación de datos de formularios HTML- Html.ValidationSummary

Problema (Proyecto14)