O NeoMatrix Tech está de casa nova!

Você deverá ser redirecionado em 6 segundos. Se não, visite:
http://www.leonelfraga.com/neomatrixtech
e atualize seus favoritos.

Aviso IMPORTANTÍSSIMO!

Aviso aos navegantes:

O NeoMatrix Tech mudou de casa!!!

A partir de agora, acessem pelo novo endereço:

http://www.leonelfraga.com/neomatrixtech

Ué... mas é só o domínio mudou de lugar?

R: Na verdade, não é bem assim hehe. Este domínio que você acessa agora aponta para um blog hospedado no Blogger, enquanto no novo, aponta para um blog na plataforma Wordpress, hospedagem própria, muito mais rápida e com um layout mais agradável de ler ;)

Não vou fechar este domínio igual ao que eu fiz com o NM Light (que já está 100% na nova plataforma). Talvez beeeeeeem depois eu faça isso.

Todos os posts daqui se encontram lá, e novos posts serão colocados somente no novo endereço.
A única coisa que não consegui importar foram os comentários. Mas em breve vai ter um post contando sobre a epopéia que foi migrar o NeoMatrix Tech!

Somente vou fechar a área de comentários daqui. Caso queiram comentar, favor ver o post correspondente no "Novo NeoMatrix Tech" e comentem por lá. É bem melhor! (pena que os permalinks "amigáveis para SEO" não funcionam lá, dá erro 404 e não consigo fazer a configuração funcionar. E olha que eu já vi vários artigos falando desse assunto :( ).

Quem assina o feed, já está lendo o conteúdo do novo NeoMatrix Tech!

segunda-feira, 4 de agosto de 2008

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 :-)

0 comentários:


Postar um comentário

Para tornar este artigo ainda mais interessante, escreva suas críticas (desde que construtivas e sem ofenças), elogios, sugestões, complementos, dúvidas, etc, etc, etc!!!

  © Blogger templates ProBlogger Template by Ourblogtemplates.com 2008 - Editado e configurado por Leonel F.

Voltar ao TOPO