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!