[ASPNET] ModalPopupExtender control vía javascript, eventos (showing/shown/hidding/hidden). Limpiar controles

Como podemos limpiar los controles dentro de un ModalPopupExtender (léase dentro de un panel asociado a un ModalPopupExtender)? O simplemente realizar acciones en el cliente cuando se visualiza un ventana modal?

Bueno podemos limpiarlo al momento de realizar la acción de postback. Pero si lo queremos limpiar en el cliente? Que tenemos disponible?
Aquí tendremos que utilizar los  propiedades OnOkScript y OnCancelScript, pero también podremos suscribirnos a estos eventos con nuestras propias funciones, para ello utilizaremos: add_showing / add_shown  / add_hiding / add_hidden

Además dejo un ejemplo para descargar.

Vemos entonces:

  1. Como descargar e instalar AjaxControlTookit en VS2012 (VS2010) con NuGet
    Como descargar/instalar los componentes, agregarlos a la barra de herramientas
  2. Manipular el ModalPopup vía Javascript
  3. ModalPopup y sus eventos (suscripción a eventos)

 

1) Como descargar e instalar AjaxControlTookit en VS2012 (VS2010) con NuGet

Como hace un par de años no utilizo AjaxControlTookit, estoy mucho con proyectos ASP.NET MVC… pero siempre es bueno refrescar componentes. Y si estas utilizando ASP.NET Webforms es util esta librería que nos da un abanico de controles y extensiones de controles webforms para utilizarlo con “ajax features” sin escribir mucho codigo, simplemente configurando.

Lo bueno de ver esto es que me hizo ver la forma de descargar estos componentes por NuGet en un proyecto con VS2012…

Asi que para descargarlo simplemente ir al Administrador de Paquetes de NuGet

SNAGHTMLb523d68

Y buscarlo…

SNAGHTMLb54638e

Y como ya lo conocemos a la configuración… pero nuget lo hace por vos. Nos queda asi (y algo mas para agregar los controles)

Te agrega los assemblies necesarios en el BIN
SNAGHTMLb57a1f4
Y te configura el prefijo para los controles en el web.config SNAGHTMLb56fe37
Agregar los controles en la barra de herramientas

(esto no es automático)

Pero te creas el nuevo tab en la barra y arrastras simplemente el assembly

SNAGHTMLb8ac203

 

Para utilizar el ModalPopupExtender ya nos comentaba algo Luis Miguel Blanco

Pero además tenemos el sitio de ejemplo de AjaxControlToolkit para visualizar el modo de utilización del ModalPopupExtender

 

 

2) Manipular el ModalPopup vía Javascript

Como Visualizar/Mostrar vía javascript una ModalPopupExtender?

AQui debemos obtener el Id del lado del cliente, mediante la propiedad ClientID (que tambien podemos modificar su comportamiento con la propiedad ClientIDMode), luego nos valemos del metodo $find (acceso directo al método findComponent de la clase Sys.Application)

function abrirModal() {
var modalId = '<%=ModalPopupExtender1.ClientID%>';
var modal = $find(modalId);
modal.show();
}

Para ocultar el metodo: hide();

NOTA: Si vamos al ejemplo de ModalPopup Demonstration podemos ver en el código HTML como se realiza dicha acción.

 

 

3) ModalPopup y sus eventos (suscripción a eventos)

Eventos: add_showing / add_shown  / add_hiding / add_hidden (y sus respectivos remove)

Podemos ver el archivo ModalPopupBehavior.pre.js del código fuente en CodePlex (ajaxcontroltoolkit.codeplex.com) de AjaxControlToolkit que tiene estos eventos, que son metodos para agregar nuestros funciones cuando estan sucediendo estos eventos…

  • add_showing / remove_showing: Cuando se esta por visualizar el modal
  • add_shown / remove_shown: Cuando ya se visualizo el modal
  • add_hiding / remove_hiding: Cuando se esta comenzando a ocultar (se dispara primero)
  • add_hidden / remove_hidden: Cuando ya se oculto el modal (luego recien se dispara el OnCancelScript)

 

Ejemplos del codigo fuente:

SNAGHTMLb8c63cd

 

SNAGHTMLb96fe19

 

Suscribiéndose con funciones propias a los eventos

Aquí necesitamos realizar esto en el load, y no suscribimos a la función add_load de la aplicación del lado del cliente con (puedes descargar el ejemplo de código que dejo mas abajo)

Sys.Application.add_load(modalInicializar);

NOTA IMPORTANTE: Esto debe estar dentro del tag form de nuestro webforms

Bueno en el ejemplo podemos ver como disparar estos eventos



<script type="text/javascript">

Sys.Application.add_load(modalInicializar);



function abrirModal() {
var modalId = '<%=ModalPopupExtender1.ClientID%>';
var modal = $find(modalId);
modal.show();
}


function modalInicializar() {
var modalId = '<%=ModalPopupExtender1.ClientID%>';

//Antes de visualizarlo
$find(modalId).add_showing(modalShowing);

//Una vez que se renderizo
$find(modalId).add_shown(modalShown);

//Ocultando...
$find(modalId).add_hiding(function () {
alert('Hiding...');
});

//Una vez que se oculto
$find(modalId).add_hidden(function () {
alert('Hidden...');
});
}
</script>

Como vemos hay varias formas de suscribirse, pasando como parámetro la función a llamar o escribiendo la función anónima directamente… tu eliges dependiendo de tu política de desarrollo

Ejemplo: Limpiar controles al momento de visualizar/mostrar el modal

Aqui en el evento previamente que nos “suscribimos con nuestra función”:
$find(modalId).add_showing(modalShowing);

 
Entonces seria algo así en el ejemplo para descargar:
function modalShowing() {
alert('modalShowing...');
modalLimpiarControles();
}


function modalLimpiarControles() {
//OPCION1: Limpiando cada control con javascript "puro"
//------------------------------------------------------
//var txtNombre = '<%=txtNombre.ClientID%>';
//var txtApellido = '<%=txtApellido.ClientID%>';

//document.getElementById(txtNombre).value = '';
//document.getElementById(txtApellido).value = '';

//
//

//OPCION2: Limpiando con jquery todos los textbox
//-------------------------------------------------------
var panelModal = '<%=Panel1.ClientID%>';
jQuery('#' + panelModal + ' input[type=text]').val('');

}

 

Como verán la parte de  limpieza de controles es porque en las preguntas de los foros de MSDN este era el objetivo final (la cual me disparo que publique este post que lo tenia en borrador), pero puede ser cualquier acción necesaria sobre estos controles (focus, obtener datos, presentar imágenes de cargando.. etc)

 

 

Ejemplo para descargar

Puedes descargar el ejemplo “simple” desde aquí: ASP.NET-ModalPopupExtender-Demo.zip

 

 

Enlaces

 

Deja un comentario

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