Hacer una validación del lado del cliente y del servidor con MVC Razor 4.0

En cualquier tipo de programación, solemos utilizar tres tipos de validación. Cada validación tiene su propia importancia. Hemos utilizado la validación del lado del cliente para filtrar inicialmente el valor en el lado del cliente sin pasar por el servidor. Esto te ahorrará una tarea importante. Pero podría pasar, que un hacker desactivara el valor del cliente mediante la desactivación del script del lado del cliente (generalmente JavaScript y jQuery). Entonces tendremos que utilizar la validación del lado del servidor. Esto es mucho más seguro que la validación del lado del cliente, pero afectará al rendimiento de la aplicación. La tercera validación, es la validación por base de datos. Esta validación no se realiza sola, porque una vez que alguien llega a nuestra base de datos, esta puede ser hackeada por alguien o afectarla de manera peligrosa.

En MVC Razor, utilizamos dos tipos de validaciones, es decir, la validación del lado del cliente y la validación del lado del servidor. La tercera se utiliza según hayamos diseñado nuestra base de datos.

Validación en MVC Razor

En MVC Razor, hemos utilizado tanto validación del lado del cliente y validación del lado del servidor.

Validación del lado del cliente

Del lado del cliente MVC, la validación se realiza con la ayuda de JavaScript y jQuery. Estas librerías de JavaScript y jQuery vienen dentro de la instalación de MVC Razor. Nos limitaremos a personalizarlos para llamar a esos métodos jQuery o JavaScript según nuestras especificaciones.

Validación lado del servidor

Esta validación se realiza con la ayuda de Data Annotiations.

El código

Usa un namespace en un model class:

using System.ComponentModel.DataAnnotations;
 
 public class Student 
    {
        [Required(ErrorMessage = "Por favor, introduce el StundentID")]
        [RegularExpression(".+@.+..+", 
			ErrorMessage = "Por favor, introduce una dirección de emial correcta")]
        public string StudentID { get; set; }
 
        [Required(ErrorMessage = "Por favor, introduce el nombre del estudiante")]
        public string Student { get; set; }
 
        [Required(ErrorMessage = "Por favor, introduce la contraseña")]
        public string Password { get; set; }
 
        [Required(ErrorMessage = "Por favor, confirma tu contraseña")]
        [Compare("Password", ErrorMessage = "Las contraseñas no coinciden")]
        public string ConfrimPassword { get; set; }
         [Required(ErrorMessage = "Por favor, introduce una direccion valida")]
        public string Address { get; set; } 
    } 

En la vista, utilizamos este código:

<h2>Index</h2>
 
@using (Html.BeginForm("Index", "Home"))
{
    <div>StudentID</div>
    <div>
        @Html.TextBoxFor(m => m.StudentID)
        @Html.ValidationMessageFor(m => m.StudentID)
    </div>
    <div>Nombre completo</div>
    <div>
        @Html.TextBoxFor(m => m.Student)
        @Html.ValidationMessageFor(m => m.Student)
    </div>
    <div>Contraseña</div>
    <div>
        @Html.PasswordFor(m => m.Password, new { value = ViewBag.Password })
        @Html.ValidationMessageFor(m => m.Password)
    </div>
    <div>Confirma contraseña</div>
    <div>
        @Html.PasswordFor(m => m.ConfrimPassword, new { value = ViewBag.Password })
        @Html.ValidationMessageFor(m => m.ConfrimPassword)
    </div>
    <div>Pais</div>
    
    <div>Direccion</div>
    <div>
        @Html.TextAreaFor(m => m.Address)
        @Html.ValidationMessageFor(m => m.Address)
    </div>
    
    <input type="submit" value="Guardar" />
}

Y este ha sido el artículo en el que trataba explicaros cómo hacer una validación del lado del cliente y del servidor con MVC Razor 4.0, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP