Como funciona o UpdatePanel?    

Olá pessoal!

Hoje vou falar de um tema bem simples do WebForm, mas que muitas pessoas utilizam errado, acreditando que estão fazendo a coisa certa. Vou falar do UpdatePanel.

O UpdatePanel é um controle do Asp.Net Ajax, utilizado para renderizar partes parciais de uma tela sem a necessidade de fazer um completo PostBack. Isso todos já sabem.

Para saber como utilizá-lo, é necessário conhecer algumas propriedades básicas:

Triggers – É uma coleção de controles que têm a capacidade de fazer o conteúdo do UpdatePanel atualizar. Existem dois tipos: Assíncronos e Síncronos. Em geral, quando utilizamos UpdatePanel utilizamos apenas os tipos Assincronos, ou seja, que atualizam sem realizar o PostBack. o Triggers do tipo Síncrono tem o comportamento normal, realizando o PostBack da página inteira.
ChildrenAsTriggers – Indica se os controles internos de um UpdatePanel automaticamente serão tratados como Triggers. Caso essa propriedade esteja como false, para que um botão interno do UpdatePanel dispare uma atualização parcial este deve ser colocado na lista de Triggers.
UpdateMode – Indica se a atualização do UpdatePanel vai sempre acontecer quando um evento assíncrono ocorrer ou apenas quando for invocado o método Update do UpdatePanel a partir do Code-behind.
RenderMode – Não é uma propriedade tão importante, mas não custa nada conhecer. Essa propriedade indica como será renderizado o controle referente ao UpdatePanel no HTML.  Os possíveis valores são: Block, que é o padrão, e renderizará o controle como DIV; e a outra opção é Inline, que renderizará um SPAN.

Além de conhecer essas propriedades, também temos que saber que para utilizar um UpdatePanel, e qualquer outro controle do Asp.Net Ajax, temos que utilizar o controle ScriptManager. Esse controle é responsável por adicionar à página todos os JavaScripts necessários para fazer funcionar as capacidades Ajax do site. Ele deve ser adicionado antes de qualquer controle Ajax.

Com isso, já poderíamos criar uma página totalmente Ajax, apenas utilizando um ScriptManager, mas será que isso está certo? O intuito desse post é mais responder essa questão do que qualquer outra coisa.

Como funciona UpdatePanel

Antes de vermos aos boas práticas de utilização do UpdatePanel, precisamos saber como ele funciona. Lembre-se, não existe mágica, e saber como funciona pode ajudar muito a resolver problemas que parecem coisa de Murphy.

Muitas pessoas acham que apenas o conteúdo interno do UpdatePanel é enviado ao Server, e isso é um grande erro. A primeira coisa que devemos saber é que ao atualizarmos uma região de uma página, todos os campos Forms de da página são enviado para o servidor. Isso inclui controles como Input, Select, etc; que por sua vez inclui todo o ViewState da página.

Acredite, sem enviar todos os campos para o servidor, incluindo o ViewState, não seria possível você ler os valores dos campos no CodeBehind. Isso deveria ser óbvio, mas já vi muitas pessoas descordarem nesse ponto.

O que muda é o retorno, que virá apenas o que deve ser atualizado. No retorno, o que altera naturalmente não é a página inteira, mas apenas o conteúdo do UpdatePanel.

Com isso em mente, ao utilizar UpdatePanel, você deve saber:

Não importa quão pequeno seja seu UpdatePanel, o envio para o Server vai ser sempre o mesmo.

Além disso, o ciclo de vida da página permanece inalterado, ou seja, todos os eventos serão invocado da mesma forma como seriam em um PostBack padrão. Portanto, se você clicar no botão btnSalvar, não será apenas o método btnSalvar_Click que será invocado, mas também o PageLoad e outros métodos necessários para renderização, como PreReder e Render dos controles envolvidos.

Para isso, o Asp.Net também enviará informações extras que controlam essas informações, como o controle clicado.

Vamos a um exemplo.

Vou utilizar o código do post sobre exportar para Excel, adicionando funcionalidades Ajax. Meu HTML ficaria da seguinte forma:

   1: <asp:ScriptManager ID="mng" runat="server">
   2: </asp:ScriptManager>
   3: <h2>Exportando para Excel</h2>
   4: <p>Nome:<asp:TextBox ID="txtNome" runat="server"></asp:TextBox></p>
   5: <p>Idade:<asp:TextBox ID="txtIdade" runat="server"></asp:TextBox></p>
   6: <p>Email:<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></p>
   7: <p>
   8: <asp:Button Text="Salvar" runat="server" ID="btnSalvar" OnClick="btnSalvar_Click" />
   9: </p>
  10: <asp:UpdatePanel runat="server" >
  11:     <ContentTemplate>
  12:         <asp:GridView ID="grid" runat="server" AllowPaging="true" PageSize="5" AutoGenerateColumns="true"
  13:             OnPageIndexChanging="grid_PageIndexChanging">
  14:         </asp:GridView>
  15:     </ContentTemplate>
  16:     <Triggers>
  17:         <asp:AsyncPostBackTrigger ControlID="btnSalvar"  EventName="Click"/>
  18:     </Triggers>
  19: </asp:UpdatePanel>
  20: <asp:Button ID="btnExportar" Text="Exportar" runat="server" OnClick="btnExportar_Click" />

Veja que apenas adicionei o UpdatePanel e o ScriptManager. Não mudei nada no CodeBehind. Com isso minha página já está funcionando com Ajax.

Apesar do meu UpdatePanel estar apenas na Grid, veja que o envio para o server, quando eu clicar no botão Salvar, enviará o conteúdo dos campos de cadastro e o ViewState. Veja a imagem do Fiddler (Clique para ampliar).

Fiddler do UpdatePanel

Na Imagem acima estou mostrando que o envio inclui todo o conteúdo da página, que será o mesmo se não tiver UpdatePanel, mas o retorno retorna só o que deve ser atualizado, que deve ser a Grid, além da atualização do ViewState.

A única diferença é que se não tiver UpdatePanel, a página seria enviada inteira, e isso incluiria todas as tags HTML (head, body, etc), que não são enviadas no update assíncrono.

Como utilizar corretamente um UpdatePanel

Agora que entendemos como funciona, devemos saber algumas boas práticas, e responder àquela pergunta: “Será que estou fazendo certo?”. Por exemplo, muitas pessoas têm uma tela enorme de cadastro, e acredita que apenas colocando um único UpdatePanel na página toda o problema está resolvido. Realmente resolve, mas não da melhor forma.

Nessas situações, as vezes para atualizar um simples Combo, todo o conteúdo do formulário é atualizado assincronamente. Isso deixa a página extremamente lenta, pois é enviado um enorme conteúdo para o serve, e o retorno, que poderia ser apenas uma linha de HTML, acaba sendo a página inteira.

Para isso, segue algumas dicas para fazer suas páginas rápidas e bem feitas com utilização UpdatePanel, e evitar diversos erros inexplicáveis.

  1. Não utilize UpdatePanels que englobem a página toda, a não ser que sua página realmente seja pequena e tenha realmente que atualizar toda de uma vez.
  2. Utilize em geral a propriedade ChildrenAsTrigger como false a maior parte do tempo, ao menos que saiba realmente que é necessário que todos os filhos sejam Triggers.
  3. Utilize mais de um UpdatePanel na sua página. Um para cada pequeno contexto que deve ser atualizado de acordo com a navegação do usuário.
  4. Controle quais controles devem atualizar cada UpdatePanel através da coleção de Triggers de cada UpdatePanel.
  5. Saiba que um controle pode ser Trigger de mais de um UpdatePanel.
  6. Saiba que um controle dentro de um UpdatePanel pode ser Trigger de outro UpdatePanel.
  7. Utilize com cuidado as regras acima, uma quantidade exagerada de UpdatePanels e Triggers em uma página pode deixá-la pesada, devido a quantidade de Scripts. Além disso, alguns poucos Browsers tem dificuldade de limpar memória, e a atualização de HTML pode causar um estouro de memória (acredito, isso é possível).

Bom, com essas dicas acredito que seu uso de UpdatePanel vai ficar mais tranquilo, e terá menos erros desconhecidos.

Espero que possa ajudar.

Até o próximo.

21. July 2011 05:36 by Frederico B. Emídio | Comments (6) | Permalink

Download de arquivo com UpdatePanel    

Olá pessoal!

Agora, vou fazer um post bem rápido sobre um erro que ocorre quando é tentado realizar download em uma página com UpdatePanel.

Não é um post para detalhar o uso de UpdatePanel, isso você pode ver aqui, mas apenas um de seus comportamentos.

É um post simples, apenas para responder um pergunta: Não é possível fazer download com UpdatePanel? A resposta é: Sim, é possível. Veremos como logo abaixo.

Tomando como base o post sobre exportar para Excel, vou acrescentar a funcionalidade Ajax a ele um pouco diferente do que fiz no post de UpdatePanel.

Como explicado no post anterior, o UpdatePanel só deve estar na região que deve ser atualizada, e com certeza um arquivo para ser baixado não deve estar na região de atualização.

Vamos ao código!

Veja o código abaixo, extraído do post de UpdatePanel:

   1: <asp:ScriptManager ID="mng" runat="server"></asp:ScriptManager>
   2: <h2>Exportando para Excel</h2>
   3: <p>Nome:<asp:TextBox ID="txtNome" runat="server"></asp:TextBox></p>
   4: <p>Idade:<asp:TextBox ID="txtIdade" runat="server"></asp:TextBox></p>
   5: <p>Email:<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></p>
   6: <p><asp:Button Text="Salvar" runat="server" ID="btnSalvar" OnClick="btnSalvar_Click" /></p>
   7: <asp:UpdatePanel runat="server" >
   8:     <ContentTemplate>
   9:         <asp:GridView ID="grid" runat="server" AllowPaging="true" PageSize="5" AutoGenerateColumns="true"
  10:             OnPageIndexChanging="grid_PageIndexChanging">
  11:         </asp:GridView>
  12:     </ContentTemplate>
  13:     <Triggers>
  14:         <asp:AsyncPostBackTrigger ControlID="btnSalvar"  EventName="Click"/>
  15:     </Triggers>
  16: </asp:UpdatePanel>
  17: <asp:Button ID="btnExportar" Text="Exportar" runat="server" OnClick="btnExportar_Click" />

Apesar dessa página estar utilizando UpdatePanel, o Download do botão btnExportar vai funcionar. Por que? Por que a ação dele não é assíncrona. Ele não é Trigger de nenhum UpdatePanel.

Veja bem, quando tentamos baixar um arquivo dentro de um UpdatePanel, o conteúdo retornado para o Browser não é um HTML válido, logo, não será possível adicioná-lo dentro do UpdatePanel e o Asp.Net/ JavaScript reclama.

Se utilizarmos o botão Exportar dentro do UpdatePanel, teremos um erro, veja a seguir:

   1: <asp:UpdatePanel runat="server" >
   2:     <ContentTemplate>
   3:         <asp:GridView ID="grid" runat="server" AllowPaging="true" PageSize="5" AutoGenerateColumns="true"
   4:             OnPageIndexChanging="grid_PageIndexChanging">
   5:         </asp:GridView>
   6:         <asp:Button ID="btnExportar" Text="Exportar" runat="server" OnClick="btnExportar_Click" />
   7:     </ContentTemplate>
   8:     <Triggers>
   9:         <asp:AsyncPostBackTrigger ControlID="btnSalvar"  EventName="Click"/>
  10:     </Triggers>
  11: </asp:UpdatePanel>

Agora, na linha 6, o meu botão está dentro do UpdatePanel, e como ao clicar nele o Asp.Net Ajax vai preparar tudo para fazer Assíncrono, ao ter o retorno inválido (um Excel, por exemplo, não é um retorno válido) vai gerar o erro, que pode variar de acordo com a versão do Framework utilizado.

Mas então só botões que estão fora de um UpdatePanel podem fazer download? Lógico que não! Se você tiver o botão em uma GridView, que deve estar dentro de um UpdatePanel, e ele deve realizar um download, como fazer? Ou por qualquer motivo o seu botão tem que estar dentro do UpdatePanel? Simples, coloque o evento do botão, ou da Grid, como um Trigger Síncrono. Veja:

   1: <asp:UpdatePanel runat="server" >
   2:     <ContentTemplate>
   3:         <asp:GridView ID="grid" runat="server" AllowPaging="true" PageSize="5" AutoGenerateColumns="true"
   4:             OnPageIndexChanging="grid_PageIndexChanging">
   5:         </asp:GridView>
   6:         <asp:Button ID="btnExportar" Text="Exportar" runat="server" OnClick="btnExportar_Click" />
   7:     </ContentTemplate>
   8:     <Triggers>
   9:         <asp:AsyncPostBackTrigger ControlID="btnSalvar"  EventName="Click"/>
  10:         <asp:PostBackTrigger ControlID="btnExportar" />
  11:     </Triggers>
  12: </asp:UpdatePanel>

Agora meu botão, que está dentro do UpdatePanel, vai consegui realizar o Download, porque na linha 10 eu o adicionei como um Trigger de PostBack normal (Síncrono).

Caso eu não faça isso, terei o seguinte erro (Asp.Net 4):

Erro em tempo de execução do Microsoft JScript: Sys.WebForms.PageRequestManagerParserErrorException: The message received from the server could not be parsed.

A mensagem pode mudar, como disse, de acordo com o FrameWork utilizado. Poderia ser:

Microsoft JScript runtime error: Sys.WebForms.PageRequestManagerParserErrorException: The message received from the server could not be parsed. Common causes for this error are when the response is modified by calls to Response.Write(), response filters, HttpModules, or server trace is enabled.

Como disse no post sobre UpdatePanel, não existe mágica. Internamente o Framework Ajax da Microsoft utilizar os objetos Ajax do Browser (XMLHttpRequest), assim como o Jquery faz, e através desses objetos não é possível realizar download. Você poderia transferir os bytes de um arquivo de forma assíncrona, mas não seria possível convertê-lo em arquivo, porquê o JavaScript, em geral, não tem permissão no Browser para realizar esse tipo de função (acessar IO, memória, etc). caso contrário seria muito fácil fazer vírus.

Bom, espero que ajude quem precise dessa ajuda.

Até o próximo.

20. July 2011 21:09 by Frederico B. Emídio | Comments (10) | Permalink

Sobre mim

Minha Imagem

Meu nome é Frederico Batista Emídio, trabalho com desenvolvimento de sistemas profissionalmente a oito anos, porém, já faço sites pessoais a pelo menos dez anos.

Para saber mais clique aqui.

Páginas

Calendário

<<  February 2021  >>
MoTuWeThFrSaSu
25262728293031
1234567
891011121314
15161718192021
22232425262728
1234567

Visualizar posts em um Calendário
Sigua @fredemidio

MCP Asp.NET