Validaciones con MVC

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