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:
<div id="dvDetalhes" class="jqmWindow">
<div>
<asp:UpdatePanel runat="server" ID="UpdatePanel2">
<ContentTemplate>
<div class="titulos">
<span>Detalhes do Registro</span>
</div>
<span>Código</span><br />
<asp:TextBox runat="server" ID="tbxCodigo" CssClass="somenteleitura" ReadOnly="true"></asp:TextBox><br />
<span>Nome</span><br />
<asp:TextBox runat="server" ID="tbxNome" CssClass="textboxes">asp:TextBox><br />
<span>Data de Cadastro</span><br />
<asp:TextBox runat="server" ID="tbxDataCadastro" CssClass="somenteleitura" ReadOnly="true"></asp:TextBox><br />
<div style="width: 100%; text-align: center;">
<asp:Button runat="server" ID="btnCancelar" Text="Cancelar" OnClick="btnCancelar_Click" />
<asp:Button runat="server" ID="btnSalvar" Text="Salvar" OnClick="btnSalvar_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</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):
//Devemos alterar a seguinte linha:
h.o=(o)?o.addClass(c.overlayClass).prependTo('body'):false;
//para o seguinte código:
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:
protected void btnInserir_Click(object sender, EventArgs e)
{
...
//Faz aparecer a janela Modal
ScriptManager.RegisterStartupScript(this, this.GetType(), "abremodal", "$dvModalLoader.jqmHide();$dvDetalhes.jqmShow();", true);
}
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 :-)