C# - JqModal – Contenido dinámico utilizando “User Controls”

 

Como bien habrán observado la documentación provista por JqModal, este no posee demasiadas alternativas a la hora de desplegar contenido dinámico dentro el popup. Observaran  en la documentación que puede cargarse contenido proveniente de páginas mediante la utilización del parámetro “ajax” de jqModal, pero en todos los ejemplos solo es contenido estático proveniente de paginas htm.

Una alternativa que he evaluado es hacer uso de páginas .aspx como contenido del popup, pero esto tuvo que ser descartado ya que no era soportado por de forma eficiente. Se realizaron pruebas pero si mucho éxito, si bien el contenido se desplegaba sin errores, este destruía los bordes y títulos del popup, además el contenido no era completamente renderizado, sino solo una parte del mismo.

Es por ellos que se opto la utilización de “User Control” para darle dinamismo al contenido, además de poder hacer uso de controles asp.net.

En el ejemplo provisto podrán notar como en la región de tag <div> que define al popup, se hace uso de un .ascx, como contenido.

Notaran además que se hizo uso del control updatePanel dentro del “User Control”, el objetivo del mismo era evitar que toda la página se recargue al presionar un botón de asp.net dentro del popup de jqModal. Este efecto se produce porque en realidad el user control es renderizado dentro de la página que lo contiene, por eso forma parte de la misma.

Se debe aclarar que en las pruebas además de hacer uso de un popup de jqModal, debía cargarse contenido dinámico en la propia página, y es en esta internación en donde se encontraron problemas.

Estructura del ejemplo:

 

Prueba 1 – Conflicto entre popup jqModal y llamda $.get

La primera implementación realizada hacia uso dialogo desplegable cuyo contenido es proporcionado por un User Control, pero a su vez la pagina principal renderiza una grilla que es cargada dinámicamente mediante la funcionalidad de jQuery $.get.

El ejemplo de esta situación lo podrán apreciar en la carpeta de proyecto web de nombre “jqModal1”.

Deberán iniciar con la pagina “Principa.aspx”, en esta observaran un link que desplegara el popup, y un botón que por medio de una llamada de $.get, desplegara una tabla. En el cuadro de dialogo cuentan con un botón que les permite cargar una grilla en su interior.

El popup funciona de maravilla siempre y cuando no se realice la carga de la tabla proveniente de la función $.get, una vez que esta es mostrada en pantalla, el popup se desplegara, pero los eventos del los controles de asp.net dejaran de funcionar, mostrando un error de javascript que dice:

Sys.WebForms.PageRequestManagerServerErrorException: The state information is invalid for this page and might be corrupted.

Este problema se debe a que la invocación por medio del uso de $.get, no solo trae el contenido de la grilla, sino que además obtiene el viewstate de la pagina a la que llama, esto hace que entre en conflicto con el viewstate que se encuentra actualmente en la pagina original, provocando problemas en las llamadas de los controles de asp.net. Básicamente lo que provoca es que los dos viewstate entren en conflicto y deje en estado invalido la información de la página, o sea exactamente lo que informa el mensaje del error.

Prueba 2 – Resolución del conflicto popup jqModel y llamada $.ajax

Para resolver el conflicto provocado por la llamada $.get y el viewstate, además de tener en cuenta que solo era necesario renderizar contenido html, el cual confecciona la grilla, fue por lo cual se utilizo la llamada $.ajax.

Esta implementación la observaran bajo la carpeta “jqModal2”, deberán poner como página de inicio a “Principal.aspx”, contenida en esta carpeta.

Observaran que la estructura es idéntica, salvo que en esta se hace uso del $.ajax, el cual realiza la invocación a web servicio, que se encuentra en el codebehind de Grid.aspx.

La clase del servicio ha sido declarada con el atributo [ScriptService],  mientras que el servicio se la agregaron los atributos [WebMethod, ScriptMethod]

[WebMethod, ScriptMethod]
public static string GetTable(int reloadcounter)
{
}

La invocación al servicio alojado en la página se realiza de la siguiente forma:

$.ajax({
    type: "POST",
    url: "Grid.aspx/GetTable",
    data: "{'reloadcounter':" + reloadnumber + "}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(result) {
        loadGrid(result);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert(textStatus + ": " + XMLHttpRequest.responseText);
    }
});
function loadGrid(result) {
    $("#grid-information").html(result.d);
}

Este servicio será el encargado de retornar la tabla pero debe remarcarse que en esta oportunidad el resultado devuelto es bastante más controlado, pues uno en la implantación del servicio decide que string retornar, o sea en este caso no se obtiene el viewstate que interfiere en los eventos.

Notaran que ya no se produce el error de la primera prueba, pudiendo hacer uso del botón de asp.net del popup sin inconvenientes.

[Ejemplo]

[Documento]