En este Post se explicara la validación de información mediante modelos de MVC en ASP.NET para comprobar los datos introducidos por el usuario en una página Web. Para ello se procedera a la creacion de una Web que contenga un formulario de entrada de datos simples como pueden ser un nombre, apellido, email, etc.

 

En este Post se explicara :

  • Como utilizar los controles de validación para comprobar los datos proporcionados por el usuario en una pagina Web ASP.NET.
  • Dar formato a la presentacion de los mensajes de error de validación.
  • Crear una validación personalizada mediante código.

 

Creamos un nuevo proyecto

 

Añadimos las vistas Validacion y Correcto a la zona ya existente Home

Creamos el dibujo de nuestras vistas con los siguientes codigos respectivamente:

Validaciones.cshtml

@model ValidacionEnModelo.Models.Empleado
@{
    ViewBag.Title = "Validaciones";
}
<h2>Validaciones</h2>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
        @*Genera un campo de formulario oculto (token anti falsificación) que se valida cuando se envía el formulario para prevenir un posible ataque desde la caja de texto mediante código malicioso.*@
@*Usamos el helper BeginForm sin argumentos para que envíe sobre la propia página*@
{
    <div>
        @Html.ValidationSummary(true)
    @*Indicamos el lugar donde queremos que la vista nos incluya los errores de validación del modelo-->*@
    <div>
        @Html.LabelFor(model => model.Nombre)
        <div>
            @Html.EditorFor(model => model.Nombre)
            @Html.ValidationMessageFor(model => model.Nombre)
        </div>
    </div>
    <div>
        @Html.LabelFor(model => model.Apellidos)
        <div>
            @Html.EditorFor(model => model.Apellidos)
            @Html.ValidationMessageFor(model => model.Apellidos)
        </div>
    </div>
    <div>
        @Html.LabelFor(model => model.Email)
        <div>
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>
    </div>
    <div>
        @Html.LabelFor(model => model.Salario)
        <div>
            @Html.EditorFor(model => model.Salario)
            @Html.ValidationMessageFor(model => model.Salario)
        </div>
    </div>
    <div>
       @Html.LabelFor(model => model.Pass)
        <div>
            @Html.EditorFor(model => model.Pass)
            @Html.ValidationMessageFor(model => model.Pass)
        </div>
    </div>
    <div>
        @Html.LabelFor(model => model.Pass2)
        <div>
            @Html.EditorFor(model => model.Pass2)
            @Html.ValidationMessageFor(model => model.Pass2)
        </div>
    </div>
    <input type="submit" value="Enviar">
</div>
    }
}

Correcto.cshtml

@{
    ViewBag.Title = "Correcto";
}
<h2 class="alert-success">Validacion de datos correcta</h2>

Creamos una clase Empleado dentro del modelo.

Aqui será donde empleemos los modelos para confirmar la correcta introduccion de información al formulario y se podrán configurar los distintos mensajes de error para cada caso. Al final del Post se añadiran algunos de los modelos mas usados.

View post on imgur.com

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

namespace ValidacionEnModelo.Models
{
public class Empleado
{
[Required(ErrorMessage = “Campo obligatorio”)]
public string Nombre { set; get; }
[Required(ErrorMessage = “Campo obligatorio”)]
public string Apellidos { set; get; }
[EmailAddress(ErrorMessage = “El correo electrónico no es válido”)]
[Required(ErrorMessage = “Campo obligatorio”)]
public string Email { set; get; }
[DataType(DataType.Currency, ErrorMessage = “Introduzca un número”)]
public long Salario { set; get; }
[Required(ErrorMessage = “Campo obligatorio”)]
public string Pass { set; get; }
[Compare(“Pass”, ErrorMessage = “El dato no coincide con el password”)]
public string Pass2 { set; get; }
}

}
Finalemte, incluimos en el controlador de Home un método para enviar un nuevo objeto Empleado a la vista Validaciones.

View post on imgur.com

Y lo completamos con la accion POST

[HttpPost]
public ActionResult Validaciones(Empleado emple)
{
if (ModelState.IsValid)
{
return RedirectToAction(“Correcto”, “Home”);
}
return View(emple);
}
public ActionResult Correcto()
{
return View();
}

Esta es la vista que se debería ver al ejecutar la página introduciendo datos incorrectos:

View post on imgur.com

y esta al enviar datos correctos:

View post on imgur.com

Validaciones en MVC

Sergio Gabriel Comparín Imas

Microsoft MCSD Web Applications + SharePoint Apps

Centro tecnológico Tajamar

Año académico: 2016-2017