Mostrar un Dialogo Modal de AJAX Control Toolkit con JavaScript

JavaScript ofrece varias funciones que podemos utilizar para mostrar diálogos (o popups) modales, como son alert() y confirm(). Pero en aplicaciones modernas, este tipo de diálogos ya no tienen un lugar. La técnica de utilizar HTML div para “simular” un dialogo es una opción muy popular.

AJAX Control Toolkit ofrece un extensor (extender) que podemos utilizar para fácilmente mostrar un dialogo modal. En otro post mostré como instalar ASP.NET AJAX Control Toolkit.

En el ultimo post usamos alert() para dejarle saber al usuario que su sesión estaba a punto de expirar. Haremos algunos cambios para mostrar un dialogo modal AJAX.

El extensor ModalPopup puede ser utilizado para hacer un control Panel visible cuando un botón o un vinculo es presionado. En este caso, queremos utilizar JavaScript para mostrar y esconder el Panel.

Primero, vamos a agregar un control ScriptManager, ScriptManagerProxy, ToolkitScriptManager a la pagina.

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />

Añade un Panel y un ModalPopupExtender a la pagina. También ocupamos agregar un vinculo. No será visible al usuario, solo es usado para llenar la propiedad TargetControlID del extensor.

<asp:Panel runat="server" ID="warningPopup" style="display: none;" CssClass="modalPopup">
    <div class="orderLabel">
        Tu sesion esta a punto de expirar debido a inactividad.
        <br /><br />
        <input id="btnWarningOK" type="button" value="OK" onclick="HideIddleWarning()" />
    </div>
</asp:Panel>
<asp:ModalPopupExtender ID="warningMPE" runat="server"
    TargetControlID="dummyLink" PopupControlID="warningPopup"
    BehaviorID="warningMPE" BackgroundCssClass="modalBackground" />
<asp:HyperLink ID="dummyLink" runat="server" NavigateUrl="#"></asp:HyperLink>

También agrega el siguiente código CSS. Puedes agregarlo a un archivo .css. Para este ejemplo, lo pondremos en la misma pagina, dentro de style.

<style type="text/css">
    .modalBackground {
        background-color: #666;
        filter: alpha(opacity=70);
        opacity: 0.7px;
    }
    .modalPopup
    {
    	background-color: #fff;
    	border-width: 2px;
    	border-style: solid;
    	border-color: #000;
    	padding: 8px;
    	width: 300px;
    	text-align: center;
    }
</style>

Cuando el dialogo es mostrado, va haber un div debajo que llenara toda la pagina. Con la clase modalBackground hacemos ese div semitransparente.

Ahora agreguemos el código JavaScript.

    <script type="text/javascript">

        //localizar timers
        var iddleTimeoutWarning = null;
        var iddleTimeout = null;

        //esta funcion automaticamente sera llamada por ASP.NET AJAX cuando la pagina cargue y un postback parcial complete
        function pageLoad() {

            //borrar antiguos timers de postbacks anteriores
            if (iddleTimeoutWarning != null)
                clearTimeout(iddleTimeoutWarning);
            if (iddleTimeout != null)
                clearTimeout(iddleTimeout);

            //leer tiempos desde web.config
            var millisecTimeOutWarning = <%= int.Parse(System.Configuration.ConfigurationManager.AppSettings["SessionTimeoutWarning"]) * 60 * 1000 %>;
            var millisecTimeOut = <%= int.Parse(System.Configuration.ConfigurationManager.AppSettings["SessionTimeout"]) * 60 * 1000 %>;

            //establece tiempo para mostrar advertencia si el usuario ha estado inactivo
            iddleTimeoutWarning = setTimeout("DisplayIddleWarning()", millisecTimeOutWarning);
            iddleTimeout = setTimeout("TimeoutPage()", millisecTimeOut);
        }

        function TimeoutPage() {
            //actualizar pagina para este ejemplo, podriamos redirigir a otra pagina con codigo para eliminar variables de sesion
            location.reload();
        }

        function DisplayIddleWarning() {
            $find('warningMPE').show();
        }

        function HideIddleWarning() {
            $find('warningMPE').hide();
        }

    </script>

Utilizamos la funcion $find para localizar el extensor y mostrarlo o esconderlo.

Al igual que en el ejemplo anterior, los minutos son leídos del web.config. Agrega estas entradas al web.config. Utilizamos solo 1 y 2 minutos para cada temporizador.

  <appSettings>
    <add key="SessionTimeout" value="2"/>
    <add key="SessionTimeoutWarning" value="1"/>
  </appSettings>

Eso es todo, ejecuta la aplicación web. Después de un minuto, veras el dialogo.

Por favor deja tus comentarios