ASP.NET MVC 4 – Remote Validation

Como ya hemos visto en un post anterior con solo definir un conjunto estático de reglas en los atributos de nuestro modelo basta para definir las validaciones del lado del cliente (esto gracias a la librerías DataAnnotations – C# – y jquery Validation – JS -). Sin embargo, hay situaciones donde este conjunto estático de reglas no es suficiente, y es necesario aplicar lógica “de negocio” en la validación de un atributo (por ejemplo, un formulario de registración en el que se necesita validar si el e-mail ingresado no esta asociado a una cuenta ya existente). Los casos similares a este último son apropiados para implementar validaciones remotas.

ASP.NET MVC 4 nos provee un mecanismo muy simple para realizar validaciones remotas. Por un lado vamos a necesitar un método de acción en donde vamos a realizar la lógica de validación propiamente dicha. Podría ser algo como lo siguiente:

Método de Acción donde realizamos la validación.

Método de Acción donde realizamos la validación.

Como podemos ver, la acción devuelve un objeto JsonResult indicando si la validación fue exitosa (true value) y en caso contrario un mensaje explicativo (string value). Como segundo parámetro de la respuesta, le pasamos el valor de enumerado JsonRequestBehavior.AllowGet el cual nos permite enviar JSON en una respuesta de una petición GET.

Bien, ahora para asegurarnos que la validación remota se dispare, debemos agregar el atributo [Remote] en el modelo. Este atributo espera el nombre del controlador y la acción que deben ser llamadas. Cuando el usuario ingrese los datos en la caja de texto, el cliente sabe que debe invocar al método de acción indicado con el valor ingresado:

Agregando el atributo Remote a nuestro modelo.

Agregando el atributo Remote a nuestro modelo.

También es necesario habilitar las características ClientValidation y UnobtrusiveJavascript desde el web.config:

1:<appSettings>
2:  <add key= "ClientValidationEnabled " value= "true "/> 
3:  <add key= "UnobtrusiveJavaScriptEnabled " value= "true "/> 
4:</appSettings>

Por último corremos la aplicación y probamos nuestra validación remota:

Remote Validation in action!

Remote Validation in action!

Espero que les sea de utilidad!

ASP.NET MVC 3 Client-Side Validation + jQuery BlockUI

A pedido de un lector del blog, vamos a continuar con el ejemplo del post ASP.NET MVC 3: Client-Side Validation Enabled por Default para mostrarles de que forma podemos “bloquear” un formulario cuando hacemos el submit del mismo para ser procesado en el servidor.

Para trabajar en la UI vamos a utilizar el plugin jQuery BlockUI que esta pensado justamente para nuestro propósito (bloquear la pantalla). El primer paso será descargar la librería desde aquí y agregarla a nuestro proyecto web que hemos realizado en ASP.NET MVC 3.

Nota: jQuery BlockUI requiere la versión de jQuery 1.2.3 o superior.

Añadiendo el plugin a nuestro proyecto

Añadiendo el plugin a nuestro proyecto

Quiero además aclarar que vamos a manejar dos escenarios: el primero habilitando las validaciones del lado del cliente (de la misma forma que comentamos aquí) y el segundo realizando las validaciones directamente en el servidor.

Bueno, es momento de meter mano en el código 🙂

Primer escenario Client-Side Validation Enabled:

En este escenario, las validaciones en el cliente están habilitadas, por lo que tenemos que asegurarnos de “bloquear” el formulario solo al momento de hacer el submit del mismo (con esto nos evitamos que el usuario realice varios click mientras se procesa nuestra petición, acción común cuando cuando el sitio esta lento).

Agreguemos el código necesario para realizar esta tarea:

Script

Script

En este script lo que hacemos es preguntar, en cada submit del formulario, si la validación del formulario es correcta. Podemos saber si fue valida utilizando la función Valid()  que nos proporciona la librería jquery.validate.unobtrusive. En caso afirmativo, bloqueo la pantalla para que se procese nuestra petición en el servidor sin inconvenientes (para este ejemplo configuré el bloqueo – $.blockUI() – sin especificar un mensaje).

Veamos el resultado cuando la validación es correcta:

Submit del formulario bloqueado

Submit del formulario bloqueado

Segundor escenario Client-Side Validation Disabled:

En este otro escenario debemos bloquear la pantalla ante cada submit del formulario, sea correcta o no la validación (tengamos presente que estamos validando directamente en el servidor). Para deshabilitar las validaciones del cliente simplemente debemos modificar las siguientes entradas del web.config:

Deshabilitando Client-Side Validation

Deshabilitando Client-Side Validation

Finalmente nos queda eliminar de nuestro script la línea en la que preguntábamos sobre el resultado de la validación:

Script

Script

Ahora nuestro formulario se bloqueará ante cada submit:

Bloqueando nuestra pantalla en cada submit

Bloqueando nuestra pantalla en cada submit

Espero que les sea de utidad!