Hola amigos, estuve navegando por internet, y revisando uno de los nuevos servicios Live de Microsoft me encontre con una funcionalidad muy interesante en el portal de compras: http://shopping.live.com, referente al splash de espera que ahi se muestra cuando se quiere ver el detalle de alguna de las categorias de la izquierda:
La funcionalidad es muy simple, al momento de hacer la peticion hacia el servidor se carga esta ventanita de splash bloqueando la pantalla evitando asi otras peticiones.
Ahora vamos a implementar esta funcionalidad en ASP.NET Ajax, si bien es cierto en el ASP.NET Control Tookit tenemos un control denominado UpdateProgress, este control nos permite mostrar un template de espera al momento de hacer una peticion hacia el servidor usando algun UpdatePanel, en si podriamos adaptarlo para esta necesidad, pero se tienen varias restricciones al respecto, en mi caso, centre mas mi atencion en el Control ModalPopupExtender ya que este me permitiria realizar lo siguiente de manera nativa:
1. Bloquear toda la pantalla al momento de mostrar el popup (En este caso yo me encargaria de mostrar el popup tanto al momento de hacer Web Request a un servicio Web como cuando utilice algun UpdatePanel para mostrar Informacion)
Muy bien manos a la Obra.
Primero, el control ModalPopupExtender tiene la facilidad de convertir cualquier Panel en una ventana Modal bloqueando todos los demas controles de la pagina, esto se logra definiendo que control se encargara de disparar el evento para poder mostrarlo, en nuestro caso no requerimos que sea un control el encargado de mostrar el splash , sino que sea lanzado de manera personalizada. Es muy simple lograr este comportamiento, este control tiene dos metodos que nos van a ayudar a lograr este cometido:
_show() y _hide()
Estos metodos que se autoexplican en su nombre, nos ayudaran a mostrar y ocultar la ventana modal en el momento que nosotros desearamos, entonces podriamos hacer lo siguiente:
Definimos el objeto Modal poniendo un ID a la misma de la siguiente manera:
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server">
<cc1:ModalPopupProperties ID="mpp" PopupControlID="pnlPopup" TargetControlID="hypModal"
BackgroundCssClass="fondo" />
</cc1:ModalPopupExtender>
Luego de ello, en la funcion donde haremos la llamada al servicio web invocaremos al metodo _show del mismo, de la siguiente manera:
function onClick()
{
TiempoService.getTime(document.getElementById("txtNombre").value, onCallback, onTimeout, onError);
$object("mpp")._show();
return false;
}
muy bien eso hara que se muestre la ventana modal al momento de hacer la peticion hacia el servidor, todo perfecto hasta aca 🙂 pero, la idea es que al haber una respuesta por parte del Servidor, se oculte este control popup, esta rutina la realizariamos en las siguientes funciones javascript: onCallback, onTimeout, onError, por ejemplo:
function onCallback(result)
{
document.getElementById("spResultado").innerHTML = result;
$object("mpp")._hide();
}
Hasta ahora perfecto, ya tenemos funcionando nuestro splash tal y como la queriamos 😉 pero todo trabaja de la mejor manera siempre y cuando se hagan peticiones a servicios web como mostramos anteriormente, pero que sucede si tambien dentro de nuestra pagina tenemos controles UpdatePanel que hacen partial-postback hacia el servidor??? pues simplemente no se dispararia nuestra modal debido a que no sabemos en que momento se hace el callback por lo tanto no sabemos donde hacer la llamada, pero no hay porque apurarse 🙂 tambien existe solucion para ello, para ellos agregaremos un par de cositas adicionales:
function pageLoad()
{
$object("_PageRequestManager").propertyChanged.add(onPropertyChanges);
}
function onPropertyChanges(sender, e)
{
if (e.get_propertyName() == "inPostBack")
{
if ($object("_PageRequestManager").get_inPostBack())
{
$object("mpp")._show();
}
else
{
$object("mpp")._hide();
}
}
}
OK, que tenemos aca, primero tenemos la funcion pageLoad(), esta funcion se ejecuta siempre despues que se han cargado los scripts de Atlas en el cliente, lo que se ha hecho agregando esta linea $object("_PageRequestManager").propertyChanged.add(onPropertyChanges); es definir una funcion (onPropertyChanges) a la cual se llamara luego de que se haya dado un cambio en alguna de las propiedades del Objeto "_PageRequestManager" que es el objeto encargado de administrar los controles UpdatePanel y que se genera de manera automatica.(Pueden uds observarlo dando boton secundario -> ver codigo fuente de la pagina que usa atlas)
Ahora dentro de esta funcion se pregunta sobre la propiedad "inPostBack" que es la propiedad que va a definir si se esta realizando un Partial-Postback por parte de alguno de los controles UpdatePanel que tengamos, por lo tanto si esta propiedad esta en True, es el momento adecuado de mostrar nuestra pantalla modal, en caso la respuesta sea False implica que ya concluyo el Partial-Postback por lo mismo ya es momento adecuado para ocultar nuestro control modal.
Con esto nuestra demo queda completa, aca les pongo el enlace con la demostracion del mismo, ha sido probado en los siguientes navegadores: IE 7, FF 1.5 y NC 8.1.
http://tinyurl.com/ukkqw
Aqui una imagen del resultado final:
Como podemos observar ASP.NET ajax nos da un conjunto de funcionalidades que hace simple realizar trabajos complejos como en este caso 🙂 en realidad esta es una demostracion de lo mucho que podemos realizar combinando controles y utilizando lo que el Core de atlas nos da,
Un saludo cordial desde peru,
Ivan Mostacero.