jQuery UI Dialog Modal Popup Confirm ASP.NET

Para trabajar con estos ejemplos se necesitan las librerías de jquery, jquery-ui y los temas de jquery-ui, por mi parte he creado dos carpetas una para las librerías JQuery(Scripts) y otra para los temas css(Content), la llamada a las librerías queda de la siguiente manera:

igualmente los ejemplos trabajan con CDN

Primera Aproximación.
En este ejemplo se mostrara una ventana que le pide al usuario confirmación para mostrar eliminar un usuario, se mostrarán dos opciones: Yes-NO y la lógica e la siguiente: al dar click sobre el botón con ID=btnDelete

También se debe especificar en un elemento DIV el mensaje que se desea mostrar, esto significa colocar codigo HTML en la pagina ASP del servidor, voy a mostrar la imagen pues quien sabe porque el syntax highlighter que utilizo para mostrar código no me permite especificar los <> de la etiqueta div

se verifica con un if si tiene un atributo relacionado con valor "delete" en caso de no existir significa que no se ha mostrado la ventana de confirmación y la muestra, en caso de existir el atributo con valor "delete" relacionado al botón con ID=btnDelete entonces llama al método especificado en OnClick y pasa el control al servidor, esto se logra con la función __doPostBack() y se le pasa como parámetro el id del botón para que sepa a que método en el servidor debe ser dirigido.

Notar que autoOpen esta en false pues la ventana modal aparecerá a petición de otra función o condición y no al instante de dar click sobre el boton, en este caso, al no darse la condición if ($(this).attr("rel") != "delete") dentro de la captura del evento click del botón se mostrara la ventana modal, caso contrario no.

el código en el servidor puede realizar una conexión a la base de datos que elimine el registro, en este ejemplo solo mostrare un mensaje que indique que el registro fue eliminado exitosamente

protected void btnDGV_Click(object sender, EventArgs e)
{
 ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Registro eliminado exitosamente !!!')", true);
}

un inconveniente que puede darse utilizando esta primera aproximación es que debe crearse un elemento DIV de HTML en la pagina web de ASP para especificar el mensaje a mostrar, seria mejor que este se creara desde JQuery, esto se trata a continuación.

Segunda Aproximación.
Este segundo ejemplo además de especificar el método del servidor mediante el evento OnClick del boton, tambien se utilizara OnClientClick para obtener una confirmación vía Jquery UI que el usuario realmente desea eliminar el registro, primero muestro el botón con sus propiedades

En este ejemplo no es necesario especificar en un elemento DIV de HTML cual sera el mensaje a mostrar en la ventana JQuery UI emergente, esta es una ventaja al menos desde mi punto de vista pues puedes tener el mensaje especificado en un archivo con extensión .js y después solo referenciar desde tu pagina web sin necesidad de llenar de elementos DIV la pagina, de eta manera quien se encargue de las validaciones(o si eres tu quien programa del lado cliente y del servidor) tendrán mas orden y podrán realizar los cambios pertinentes sin tocar el código de servidor.

La lógica es esta: al presionar el botón el evento OnClientClick nos enviara a la funcion de JavaScript especificada, en este caso nos envía a confirmCheckIn la cual recibe como parámetro el button, también contamos con una variable _confirm con un valor inicial de false pues asumimos que el cliente no quiere borrar el registro, luego con Jquery creamos un elemento div y especificamos un mensaje html para este, también se especifican los botones que son los que al presionarlos cambiaran o mantendrán el valor de la variable _confirm, al final de la función retornamos el valor final de la variable _confirm que es lo que esta esperando el boton para saber que accion realiza, en caso de ser true la página entrega el mando al servidor que llama al método especificado en el evento OnClick del botón.

Notar que autoOpen es true pues el dar click sobre el botón implícitamente indica que abrirá la ventana modal, seria false si esperara por una función/condición que evaluara si presentar la ventana o no.

si el método del servidor del servidor es llamado, de nuevo solo muestro un mensaje que indique que el registro fue eliminado exitosamente

protected void btnDGV_Click(object sender, EventArgs e)
{
 ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Registro eliminado exitosamente !!!')", true);
}

Tercera Aproximación.
Como ultimo ejemplo muestro el mas basico o al menos el mas utilizado, se captura el evento click del botón mediante JQuery y se utiliza e.preventDefault() para evitar que el botón ejecute el método de servidor especificado en la propiedad OnClick, primero muestro el codigo del control button ASP

La lógica es esta: al dar click sobre el botón se previene el envío de la pagina al servidor utilizando e.preventDefault() y luego utilizando JQuery se crean dos etiquetas: DIV y SPAN, para mostrar el mensaje. En caso se presione el botón Yes, se utiliza unbind() sobre el botón con id=btnCancel, esta sentencia provocará se descarten que todos los manejadores de eventos asociados al clic sobre el botón. Como se puede entender, sobre este botón no ocurrirá nada en el momento en que hagamos clic. Además, en el supuesto que otros scripts Javascript hayan definido algún manejador de evento clic sobre alguno de los elementos, unbind() también eliminará esos posibles eventos.

Por último al presionar Yes se le permite al boton llamar al método definido en su evento onclick utilizando document.getElementById('<%= btnCancel.ClientID %>').click()

Notar que autoOpen es true pues el dar click sobre el botón implícitamente indica que abrirá la ventana modal, seria false si esperara por una función/condición que evaluara si presentar la ventana o no.

y de nuevo, si el método del servidor es llamado, muestro un mensaje indicando que el registro fue eliminado

protected void btnDGV_Click(object sender, EventArgs e)
{
 ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Registro eliminado exitosamente !!!')", true);
}

Aproximación General
Que pasa si tenemos una pagina web que requiere varias confirmaciones por parte del usuario para realizar operaciones sobre una base de datos, digamos que presenta al usuario la oportunidad de realizar un CRUD sobre una base de datos, que hacemos en ese caso? creamos un script utilizando jQuery para cada botón o creamos un script general que reciba útil para todos los botones que presenten un mensaje de confirmación a los usuarios y simplemente le mandamos un mensaje a la función javascript a fin de personalizar el mensaje? ... ... ...

Pues me parece acertada la ultima opcion y sobre esa se va trabajar en este post para empezar voy a agregar al formulario web cinco botones, puede ser exagerado pero la idea es mostrar las ventajas de utilizar una función javascript para mostrar mensajes de confirmación de diferentes acciones

como ven cada botón tiene un diferente valor en su evento onclick, pero el mismo valor en su evento onclientclick, la diferencia vienen en los dos primeros parámetros que se le envían a la función pues representan los mensajes que deseamos que la ventana de confirmación presente, notar que el tercer parámetro es una referencia sobre el botón en el que se dio el click, aqui dejo la funcion javascript

la función trabaja así:
1. Desde el botón se utiliza el evento onclientclick para invocar a la función javascript, a esta función se le pasan tres parámetros, dos de tipo string y una referencia al botón que invoca la función, así:

onclientclick="return confirmCheckIn('Desea eliminar el registro', 'Confirmacion eliminacion...', this);"

2. Como pueden ver este botón en su propiedad onclientclick espera una confirmación(true or false) de parte de la función javascript a la que invoca, así que lo primero que se debe hacer es crear una variable con un valor por defecto false ya que por defecto no queremos que al presionar el botón se nos envíe directamente al servidor se reciben los mensajes.
3. si se presiona el botón Yes de la confirm dialog box entonces el valor de la variable confirm cambia a true y regresa al mando al evento click del botón que invoco la función, importantísimo colocar esta linea de codigo button.click();
4. En caso de presionar No, simplemente cierra la ventana modal de confirmación y no cambia el valor de la variable por lo que se retorna false.