JqModal Contenido dinmico utilizando User Controls

Como bien habrn observado la documentacin provista por JqModal, este no posee demasiadas alternativas a la hora de desplegar contenido dinmico dentro el popup. Observaran en la documentacin que puede cargarse contenido proveniente de pginas mediante la utilizacin del parmetro ajax de jqModal, pero en todos los ejemplos solo es contenido esttico proveniente de paginas htm. Una alternativa que he evaluado es hacer uso de pginas .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 destrua los bordes y ttulos del popup, adems el contenido no era completamente renderizado, sino solo una parte del mismo. Es por ellos que se opto la utilizacin de User Control para darle dinamismo al contenido, adems de poder hacer uso de controles asp.net. En el ejemplo provisto podrn notar como en la regin de tag <div> que define al popup, se hace uso de un .ascx, como contenido. Notaran adems que se hizo uso del control updatePanel dentro del User Control, el objetivo del mismo era evitar que toda la pgina se recargue al presionar un botn de asp.net dentro del popup de jqModal. Este efecto se produce porque en realidad el user control es renderizado dentro de la pgina que lo contiene, por eso forma parte de la misma. Se debe aclarar que en las pruebas adems de hacer uso de un popup de jqModal, deba cargarse contenido dinmico en la propia pgina, y es en esta internacin en donde se encontraron problemas.

Estructura del ejemplo:

Prueba 1 Conflicto entre popup jqModal y llamda $.get La primera implementacin 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 dinmicamente mediante la funcionalidad de jQuery $.get. El ejemplo de esta situacin lo podrn apreciar en la carpeta de proyecto web de nombre jqModal1. Debern iniciar con la pagina Principa.aspx, en esta observaran un link que desplegara el popup, y un botn que por medio de una llamada de $.get, desplegara una tabla. En el cuadro de dialogo cuentan con un botn 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 funcin $.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 invocacin por medio del uso de $.get, no solo trae el contenido de la grilla, sino que adems 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. Bsicamente lo que provoca es que los dos viewstate entren en conflicto y deje en estado invalido la informacin de la pgina, o sea exactamente lo que informa el mensaje del error. Prueba 2 Resolucin del conflicto popup jqModel y llamada $.ajax Para resolver el conflicto provocado por la llamda $.get y el viewstate, adems 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 implementacin la observaran bajo la carpeta jqModal2, debern poner como pgina de inicio a Principal.aspx, contenida en esta carpeta. Observaran que la estructura es idntica, salvo que en esta se hace uso del $.ajax, el cual realiza la invocacin 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 invocacin al servicio alojado en la pagina 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 ms controlado, pues uno en la implantacin 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 botn de asp.net del popup sin inconvenientes.