Menu

alert y confirm mejorados utilizando jQueryUI.Dialog y ASP.NET

4 mayo, 2016 - Arte y creatividad, Diseño & ASP.NET, Tecnología
alert y confirm mejorados utilizando jQueryUI.Dialog y ASP.NET

jQueryUI.Dialog como sustituto de alert y confirm

Un día más, seguimos avanzando en el desarrollo de nuestras interfaces de usuario profesionales, maquetándolas con el el framework Bootstrap. Y en esta ocasión, vamos a poner un énfasis especial en las cajas de dialogos alert y confirm, tan utillizados y socorridos en nuestros programas, bien para solicitar la confirmación del usuario en una acción del programa, o simplemente para informar al usuario que una tarea se ha realizado correctamente, o que ha producido un error… etc.

Como ya sabes, para llevar a cabo esas tareas en las aplicaciones de escritorio, tenemos  la función MsgBox, pero como es obvio, la tecnología de los Windows Forms es muy diferente a la de los Web Forms, por eso, tenemos que buscarnos la vida para materializar en estos últimos, cajas de dialogo semejantes a MsgBox pero aptas para Internet.

Para hacerlo fácil, solo tenemos que hacer uso de las funciones alert y confirm de javascript, cuya funcionalidad está más que implementada en todos los navegadores, pero claro, la estética de estas simplonas cajas de dialogo no se puede decir que destaque por su diseño. Fíjate en el “confirm” del siguiente ejemplo en un navegador Google Chrome.

 

jQueryUI Autocomplete/Dialog y ASP.Net, maquetado con Bootstrap

 

¿No te gustaría disponer de cajas de dialogo profesionales para tus programas, con su iconos y colores descriptivos en función del mensaje que vayas a mostrar?

Pues no te preocupes, porque en este artículo verás como conseguirlo, y para ello nos valdremos de jQueryUI.Dialog. Podríamos utilizar otros plugins para materializar esta funcionalidad, incluso con objetos de servidor de la caja de herramientas del propio Visual Studio, pero finalmente nos hemos decantado por Dialog.

Ya en el post anterior “Envío de correo electrónico con ASP.NET mejorado” empezamos a utilizar también como apoyo al diseño los framework jQuery jQueryUI, haciendo uso de sus plugins jQueryUI.Autocomplete, y jQuery.MultipleFileSelection, y como nos resultó muy práctico para optimizar nuestros diseños, vamos a seguir utilizando jQueryUI, en el programa al que hace referencia este artículo. En esta ocasión nos serviremos de jQueryUI.Autocomplete (nuevamente) y como decíamos, pondremos la puesta en escena del plugin jQueryUI.Dialog.

¿Y porqué utilizar los widgets de jQuery, te preguntarás? Pues una sencilla razón: optimizar de forma exponencial nuestros diseños, dotándoles de extraordinaria versatilidad con muy poquito trabajo. Osea, obteniendo una relación trabajo/rendimiento sin precedentes. Y si sumamos la potencia de jQueryUI Bootstrap, a los desarrollos de nuestras aplicaciones ASP.NET, el resultado nunca puede decepcionar, te lo aseguro.

Vamos al asunto

Nuestro planteamiento para este post es, por un lado, materializar una funcionalidad que seguro te interesa y que consiste en distribuir el contenido de los ítem de un autocomplete en diferentes campos, una vez que se ha hecho la selección de dicho ítem. Por otro lado, queríamos utilizar las nuevas cajas de dialogo mejoradas con las funciones Confirmacion() y Alerta() utilizando el jQueryUI.Dialog.

Y para conseguir dicho propósito, hemos desarrollado una supuesta gestión de donativos a una O.N.G.

El programa, utiliza como fuente de datos una tabla añadida a la B.D. SQL “Northwind“ ya utilizada en ejemplos anteriores. Esta tabla se denomina Donativos y consta, entre otros, de los siguientes campos: NIF (varchar, 9), nombre (varchar, 25), apellido1 (varchar, 25), apellido2 (varchar, 25) y donativo (smallmoney)Evidentemente los datos contenidos en esta tabla se han rellenado mediante un generador aleatorio, por lo tanto son ficticios.

El programa es muy simple. Consiste en seleccionar mediante el autocomplete ubicado en el textBox del NIF (punto 1), un donante registrado en la B.D. Una vez rellenos los textBox con los campos del donante elegido, el foco se situará en el textBox de cantidad a donar (punto 2).

jQueryUI Autocomplete, jQueryUI Dialog y ASP.Net, maquetado con Bootstrap

 

Cada ítem se compone de la cadena: NIF + ” – ” + apellido1 + ” ” + apellido2 + “, ” + nombre. Al hacer clic sobre un ítem de la lista, es decir, cuando se selecciona, se cargan en los textBox correspondientes los valores de los campos del registro elegido. Para llevar a cabo esta funcionalidad, hemos desarrollado un servicio web.

 

jQueryUI Autocomplete, jQueryUI Dialog y ASP.Net, maquetado con Bootstrap

 

autocomplete.jQueryUI:

 

WebService2.asmx:

 

Si te fijas en el código, construimos la clase Contacto con cinco propiedades, cuyos valores serán utilizados para rellenar los textBox correspondientes en la función buscaDonante() del autocomplete.

Bueno, hecho este paréntesis, seguimos con la descripción del programa…

Cuando el usuario hace clic sobre el botón de “Ingresar Donativo“, se le pide la confirmación de la operación que va a realizar (función Confirmacion()) …

ASPNET_6_4
… Y si la confirmación es positiva, es decir, si se pulsa sobre el botón “SI”, se realizan las validaciones necesarias y se informa al usuario de cualquiera de los resultados posibles: de un error por problemas en la validación, o de OK si se ha generado la grabación correctamente (función Alerta()).

 

ASPNET_6_5 ASPNET_6_6

Cajas de dialogo: confirm y alert

Como puedes ver, las cajas de dialogo que hemos desarrollado, se adaptan perfectamente a la misión a la que están encomendadas. Son modales y utilizan un icono descriptivo relacionado con su función, así como distintos colores para complementar dicha descripción:

Los iconos utilizados forman parte de la galería glyphicon, de Bootstrap.

Además de su funcionalidad, puedes comprobar lo que gana estéticamente el diseño de la interfaz al utilizar estas cajas de dialogo.

Función Confirmacion()

Como hemos dicho, esta función viene a suplir a la confirm() clásica de javascript. Recibe 3 parámetros: titulo, texto y button. Este último, hace referencia al asp:Button o asp:linkButton cuya acción se quiere confirmar. Esta caja de dialogo, dispone de un icono de interrogación de color naranja y dos botones de “Si” y “No”. Cambiar estos botones por otros nombre, es tan fácil como cambiar el código javascript de su función:

 

Función Alerta()

Esta función sustituye a la clásica alert() de javascript. Al igual que la anterior función, Alerta() recibe 3 parámetros: titulo, texto y tipo. En función de éste último, dispondrá de un modelo de icono, y bajo el contenido del mensaje, tendrá un botón “Aceptar”. Igualmente, cambiar este botón por otro nombre (“OK”, “Vale”, “Entendido”…), es tan fácil como cambiar el código javascript de su función.

Los valores de tipo pueden ser: warning, info y ok, que como te habrás dado cuenta, coinciden con los nombres de los iconos de la galería glyphicon, de Bootstrap.

 

Pues una vez descrito el funcionamiento de este simple programa a modo de ejemplo para utilizar las nuevas cajas de dialogo y ver como se puede manipular una función autocomplete para rellenar textbox en función de los ítem seleccionados, pasamos a mostrarte la parte de diseño del interfaz de usuario.

 

Y ahora vamos con la parte de código

Page_Load:

 

Cada vez que se carga la página, ponemos el foco en el textBox txtNIF para buscar un nuevo donante. Sin embargo, si al hacer un postback este textoBox tuviera algún valor, significa que no se ha llegado a producir la donación, y ponemos el foco en el textBox txtDonativo para que el usuario complete la acción.

 

IngresarDonativo_Click:

 

Fíjate que para invocar a la función Confirmacion(), lo hacemos en tiempo de diseño con el parámetro onclientclick del objeto de servidor asp:LinkButton, donde le pasamos sus tres parámetros: Titulo, Texto y el botón que hace la llamada.

onclientclick=”return Confirmacion(‘Gestión de donativos’, ‘¿Seguro que quiere realizar el donativo?’, this);” 

 

Sin embargo, las llamadas a la función Alerta(), se hacen, como es lógico en tiempo de ejecución, a demanda de cualquier resultado que se quiera informar al usuario. Se invoca con el método RegisterStartupScript del control ScriptManager de la siguiente forma:

Script = “<script type=text/javascript>Alerta(‘Gestión de donativos’,’¡El donativo ha sido registrado OK!’,’ok’);</script>”
ScriptManager.RegisterStartupScript(Me, GetType(Page), “”, Script, False)

Como ves, a la función Alerta() se le pasan los parámetros Título, Texto y Tipo de icono.

 

Bueno, pues esto es todo por hoy. Espero que te haya sido útil este artículo y como siempre, si quieres “toquetear” la demo, lo puedes hacer en http://siinet.com/tutoriales/ejemplo6.aspx

¡Hasta la próxima!

4 pensamientos sobre “alert y confirm mejorados utilizando jQueryUI.Dialog y ASP.NET

juan carlos prtado

como hago para conseguir los fuentes muchas gracias

Respuesta
    UsrBlogSiiNet

    Hola Juan Carlos, no tenemos un repositorio con los fuentes, pero con el código que te mostramos en este post, debes tener suficiente información para poder correr el ejemplo en tu propio proyecto. No obstante, si tienes algún problema, cuéntanoslo y te ayudaremos a resolverlo.

    Respuesta
julio

no me funciona el JQuery(‘.html
parece que es la version de Jquery, actualmente va por la 3.10 y la que usas aqui es la 2. algo

Respuesta
    UsrBlogSiiNet

    Hola Julio, ¿Seguro que es un problema de jQuery? No debería fallar una versión posterior, no obstante, te mando por email a juliocanelon@gmail.com, el mismo fichero que utilizamos nosotros para el ejemplo y así puedes descartar que sea por esa razón.

    Respuesta

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *