jQuery (jqModal) e ASP.NET + AJAX: Resolvendo alguns probleminhas
Olá pessoal! A partir deste publicarei uma série de artigos que tratam de construir uma interface elaborada utilizando o jQuery com o ASP.NET. Iremos utilizar conceitos já descritos no artigo "Ajax Loader com Bloqueio de Tela" além de acrescentar alguns novos.
Para acompanhar estes tutoriais, por favor baixe o site de exemplo disponibilizado na Página de Suporte com o título deste artigo, pois os posts serão todos baseados nele.
Neste primeiro artigo iremos corrigir alguns "bugs" de apresentação da página quando utilizamos o plugin jqModal associado com o componente UpdatePanel do ASP.NET Ajax.
No site exemplo, na página Default.aspx temos dentro da tag <form> um div que tem a largura de 770 pontos (a área útil do navegador em resolução 800x600) que contém campos de pesquisa, botões de filtro e um gridview. Estes componentes estão dentro de um UpdatePanel.
Em outro UpdatePanel, tem um div modal (está com a classe css jqmWindow, que define janelas modais para o jQuery) que tem os campos para edição de cada registro do grid.
Além disso, temos o nosso AjaxLoader dentro do UpdateProgress e algumas rotinas de JavaScript.
Problema 1: O div de detalhes não aparece :-(
Caso você construa uma página em que um registro é editado em uma janela modal ao invés de uma página aspx específica, dependendo da construção os componentes internos da janela modal não aparecem.
Observe o design do div dos detalhes do nosso exemplo:
1: <div id="dvDetalhes" class="jqmWindow">
2: <div>
3: <asp:UpdatePanel runat="server" ID="UpdatePanel2">
4: <ContentTemplate>
5: <div class="titulos">
6: <span>Detalhes do Registro</span>
7: </div>
8: <span>Código</span><br />
9: <asp:TextBox runat="server" ID="tbxCodigo" CssClass="somenteleitura" ReadOnly="true"></asp:TextBox><br />
10: <span>Nome</span><br />
11: <asp:TextBox runat="server" ID="tbxNome" CssClass="textboxes"></asp:TextBox><br />
12: <span>Data de Cadastro</span><br />
13: <asp:TextBox runat="server" ID="tbxDataCadastro" CssClass="somenteleitura" ReadOnly="true"></asp:TextBox><br />
14: <div style="width: 100%; text-align: center;">
15: <asp:Button runat="server" ID="btnCancelar" Text="Cancelar" OnClick="btnCancelar_Click" />
16: <asp:Button runat="server" ID="btnSalvar" Text="Salvar" OnClick="btnSalvar_Click" />
17: </div>
18: </ContentTemplate>
19: </asp:UpdatePanel>
20: </div>
21: </div>
Note que o UpdatePanel se encontra dentro do div dvDetalhes. Se fosse o inverso, ou seja, o div dvDetalhes estivesse dentro do ContentTemplate do UpdatePanel2, os componentes da janela modal não apareceriam. Portanto, ao construir uma janela modal que utilize componentes AJAX, coloque o UpdatePanel dentro do div que representa a janela modal :-)
Problema 2: Os botões das janelas modais não enviam postback :-(
Você já consegue mostrar o conteúdo da janela modal na página .aspx, mas clica no botão para salvar, por exemplo, e não acontece nada. Isto é ocasionado por causa do funcionamento do plugin jqModal durante o acionamento das janelas modais: Quando a janela modal é invocada pelo método jqmShow(), a biblioteca muda o "pai" do div (e consequentemente todo o conteúdo dentro deste) com a classe jqmWindow para a tag <body>, porém, para que algum botão possa gerar postbacks, o mesmo deve estar dentro da tag <form>.
Veja no nosso exemplo que praticamente todo o conteúdo da página (=componentes que serão exibidos na tela) está dentro da tag <form>.
Para resolver este problema, precisamos alterar a seguinte linha do arquivo jqModal.js (o próprio plugin jqModal - a linha 44, no caso do js que eu tenho aqui e que é usado no exemplo):
1: //Devemos alterar a seguinte linha:
2: h.o=(o)?o.addClass(c.overlayClass).prependTo('body'):false;
3:
4: //para o seguinte código:
5: h.o=(o)?o.addClass(c.overlayClass).prependTo('form'):false;
Com essa pequena alteração, resolvemos o problema do postback :-)
Problema 3: Fiz aquele lance do bloqueio da janela em AJAX, mas quando utilizo janelas modais não consigo digitar nas caixas de texto (textboxes) :-(
Caso você tenha seguido a dica de como bloquear o conteúdo da página quando um postback assíncrono é executado e usou outras janelas modais porém não consegue entrar com texto nos textboxes, porém consegue clicar nos elementos (botões, checkboxes, combos), vai a dica: feche o div modal do AjaxLoader ANTES de abrir a janela modal que sofrerá edição! Veja exemplo:
1: protected void btnInserir_Click(object sender, EventArgs e)
2: {
3: ...
4: //Faz aparecer a janela Modal
5: ScriptManager.RegisterStartupScript(this, this.GetType(), "abremodal", "$dvModalLoader.jqmHide();$dvDetalhes.jqmShow();", true);
6: }
No nosso caso, a variável javascript $dvModalLoader é o div que é exibido quando o ajax é invocado. Quando a requisição termina, ele deveria desaparecer, o que não acaba ocorrendo. Neste trecho de código, foi forçado o fechamento do mesmo antes de exibir outro div modal. Assim, mais um problema resolvido :-)
Veja um vídeo demonstrando estes problemas:
PS: Como o vídeo completo estourou o limite do YouTube (10 min), dividi-o em duas partes:
Parte 1:
Parte 2:
Com isso, resolvemos alguns dos problemas que podem ocorrer quando utilizamos o jQuery + jqModal com o ASP.NET habilitado para AJAX!
Abraços a todos :-)
Posts Relacionados:
0 comentários:
Postar um comentário