Olá, hoje vou apresentar algumas funcionalidades avançadas do UpdatePanel do ASP.NET , é recomendado que você tenha o conhecimento básico do UpdatePanel e sobre PostBack.
A função básica do UpdatePanel é atualizar seu conteudo sem provocar um PostBack completo (o que provocaria o recarregamento da página, perdendo possiveis dados inseridos e modificados pelo o usuário). A atualização do conteúdo dentro do UpdatePanel se chama PostBack parcial: assim que um controle dentro do UpdatePanel dispara um evento, é gerado um PostBack que após executado não recarrega a página, apenas atualiza o conteúdo dentro do UpdatePanel. Essa técnologia já é antiga, e se chama AJAX (utilizando Javascript), mas o controle UpdatePanel faz tudo isso sozinho e não devemos nos preocupar com isso agora. O que irei abordar são funcionalidades do UpdatePanel que muitos usuários já experientes desconhecem, e pode aumentar incrivelmente a performance e a produtividade da sua aplicação. Vamos lá!
A função básica do UpdatePanel é atualizar seu conteudo sem provocar um PostBack completo (o que provocaria o recarregamento da página, perdendo possiveis dados inseridos e modificados pelo o usuário). A atualização do conteúdo dentro do UpdatePanel se chama PostBack parcial: assim que um controle dentro do UpdatePanel dispara um evento, é gerado um PostBack que após executado não recarrega a página, apenas atualiza o conteúdo dentro do UpdatePanel. Essa técnologia já é antiga, e se chama AJAX (utilizando Javascript), mas o controle UpdatePanel faz tudo isso sozinho e não devemos nos preocupar com isso agora. O que irei abordar são funcionalidades do UpdatePanel que muitos usuários já experientes desconhecem, e pode aumentar incrivelmente a performance e a produtividade da sua aplicação. Vamos lá!
Propriedade UpdateMode
A propriedade UpdateMode define o modo de como o conteúdo dentro do UpdatePanel vai ser atualizado, e ela pode receber os seguintes valores:
“Always” : (Tradução: Sempre) , define que o conteúdo dentro do UpdatePanel sempre será atualizado após a execução de um PostBack gerado por qualquer componente na página, inclusive por outro UpdatePanel. É o modo padrão do UpdatePanel caso você não especifique.
“Conditional”: (Tradução: Condicional), nesse modo o UpdatePanel só é atualizado caso o PostBack for gerado por um componente dentro dele, caso você queira atualizar um UpdatePanel no modo “conditional” você deve fazer manualmente utilizando o método Update() do UpdatePanel. (Obs.: não é permitido utilizar o método Update() no modo “Always”, e também não seria necessário!)
Propriedade ChildrenAsTriggers
A propriedade ChildrenAsTriggers (Tradução: Filhos como Disparadores/Gatilhos) serve para definir se todos os eventos dos controles filhos (controles dentro do UpdatePanel) serão gerenciados pelo UpdatePanel. Ela recebe o valor “true” para que isso ocorra, ou “false” para que isso seja desativado e você faça o controle manualmente através da seção Triggers, que veremos logo em seguida. Caso você não especifique, o UpdatePanel utiliza o valor “true” como padrão.
Para utilizar o valor “false” é obrigatório utilizar a propriedade UpdateMode=”false” no UpdatePanel.
Triggers
Quando você insere componentes dentro de um UpdatePanel já deve ter percebido que não faz isso logo em seguida da tag “” , você cria antes a tag ““. Essa tag serve para que você coloque todo o conteúdo que será visivel para o usuário, e que o UpdatePanel irá gerenciar.
Alem de ContentTemplate, o UpdatePanel possui a tag “Triggers”. Dentro dessa tag você poderá informar quais controles (e também especificar os eventos dos controles) que poderão provocar um PostBack. Você pode inserir 2 tipos de Triggers:
PostBackTrigger: Irá provocar o PostBack completo, recarregando a página inteira.
AsyncPostBackTrigger: Irá provocar o PostBack parcial, sem recarregar a página.
Uma grande vantagem de utilizar Triggers, é poder utilizar um botão fora do UpdatePanel para atualizar o UpdatePanel, sem recarregar a página!
Alem de ContentTemplate, o UpdatePanel possui a tag “Triggers”. Dentro dessa tag você poderá informar quais controles (e também especificar os eventos dos controles) que poderão provocar um PostBack. Você pode inserir 2 tipos de Triggers:
PostBackTrigger: Irá provocar o PostBack completo, recarregando a página inteira.
AsyncPostBackTrigger: Irá provocar o PostBack parcial, sem recarregar a página.
Uma grande vantagem de utilizar Triggers, é poder utilizar um botão fora do UpdatePanel para atualizar o UpdatePanel, sem recarregar a página!
Agora vamos ver tudo isso na prática!
Default.aspx
<form id="form1" runat="server">
<asp_ScriptManager ID="scpManager" runat="server"></asp_ScriptManager>
<asp_Button ID="btnAtualizarParcial" runat="server" Text="Atualizar Paineis" OnClick="Atualizar_Click" />
<asp_Button ID="btnAtualizarGeral" runat="server" Text="Atualizar Pagina" OnClick="Atualizar_Click" />
<asp_UpdatePanel ID="updPainel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp_TextBox ID="txtPainel1" runat="server"></asp_TextBox>
<asp_Button ID="btnPainel1" runat="server" Text="Painel 1" OnClick="Painel1_Click" />
</ContentTemplate>
<Triggers>
<asp_AsyncPostBackTrigger ControlID="btnAtualizarParcial" EventName="Click" />
<asp_PostBackTrigger ControlID="btnAtualizarGeral" />
</Triggers>
</asp_UpdatePanel>
<asp_UpdatePanel ID="updPainel2" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
<asp_TextBox ID="txtPainel2" runat="server"></asp_TextBox>
<asp_Button ID="btnPainel2" runat="server" Text="Painel 2" OnClick="Painel2_Click" />
</ContentTemplate>
</asp_UpdatePanel>
<asp_UpdatePanel ID="updPainel3" runat="server" >
<ContentTemplate>
<asp_TextBox ID="txtPainel3" runat="server"></asp_TextBox>
<asp_Button ID="btnPainel3" runat="server" Text="Painel 3" OnClick="Painel3_Click" />
</ContentTemplate>
</asp_UpdatePanel>
</form>
Default.aspx.cs
protected void Atualizar_Click(object sender, EventArgs e)<br /> {<br /> txtPainel1.Text = "Botão quem atualizou";<br /> txtPainel2.Text = "Botão quem atualizou";<br /> txtPainel3.Text = "Botão quem atualizou";<br /> }<br/><br/>
protected void Painel1_Click(object sender, EventArgs e)<br /> {<br /> txtPainel1.Text = "Painel 1 quem atualizou";<br /> txtPainel2.Text = "Painel 1 quem atualizou";<br /> txtPainel3.Text = "Painel 1 quem atualizou";<br /> }<br/>
protected void Painel2_Click(object sender, EventArgs e)<br /> {<br /> txtPainel1.Text = "Painel 2 quem atualizou";<br /> txtPainel2.Text = "Painel 2 quem atualizou";<br /> txtPainel3.Text = "Painel 2 quem atualizou";<br /> }<br/>
protected void Painel3_Click(object sender, EventArgs e)<br /> {<br /> txtPainel1.Text = "Painel 3 quem atualizou";<br /> txtPainel2.Text = "Painel 3 quem atualizou";<br /> txtPainel3.Text = "Painel 3 quem atualizou";<br/>
updPainel1.Update();<br /> }
Resultados
Ao clicar no botão “Atualizar Painéis”
-Painel 1: é atualizado, pois está como UpdateModel=”Conditional” e o botão que gerou o PostBack é um Trigger dele.
-Painel 2: não é atualizado, pois está como UpdateModel=”Conditional” e o PostBack foi gerado por um componente fora dele.
-Painel 3: é atualizado, porque por padrão está definido comoUpdateModel=”Always”
Ao clicar no botão “Atualizar Página”
-Como o Trigger desse botão é do tipo PostBackTrigger , a página é recarregada completamente, atualizando todos os painéis.
Ao clicar no botão “Painel 1″
-Painel 1: Está com a propriedade ChildrenAsTriggers=”false”, então mesmo que o botão esteja dentro dele, seu conteúdo não é atualizado porque o ele não está definido como um Trigger em .
-Painel 2: não é atualizado, pois está definido comoUpdateModel=”Conditional” e o PostBack foi gerado por um componente fora dele.
-Painel 3: é atualizado, porque por padrão está com UpdateModel=”Always”
Ao clicar no botão “Painel 2″
-Painel 1: não é atualizado, pois está definido comoUpdateModel=”Conditional” e o PostBack foi gerado por um componente fora dele.
-Painel 2: é atualizado, pois está definido como UpdateModel=”Conditional”mas o PostBack foi gerado por um componente dentro dele.
-Painel 3: é atualizado, porque por padrão está definido comoUpdateModel=”Always”
Ao clicar no botão “Painel 3″
-Painel 1: é atualizado, porque o método “Painel3_Click” chama manualmente a função “updPainel1.Update()”.
-Painel 2: não é atualizado, pois está definido comoUpdateModel=”Conditional” e o PostBack foi gerado por um componente fora dele.
-Painel 3: é atualizado, porque por padrão está definido comoUpdateModel=”Always”
-Painel 2: não é atualizado, pois está definido comoUpdateModel=”Conditional” e o PostBack foi gerado por um componente fora dele.
-Painel 3: é atualizado, porque por padrão está com UpdateModel=”Always”
Ao clicar no botão “Painel 2″
-Painel 1: não é atualizado, pois está definido comoUpdateModel=”Conditional” e o PostBack foi gerado por um componente fora dele.
-Painel 2: é atualizado, pois está definido como UpdateModel=”Conditional”mas o PostBack foi gerado por um componente dentro dele.
-Painel 3: é atualizado, porque por padrão está definido comoUpdateModel=”Always”
Ao clicar no botão “Painel 3″
-Painel 1: é atualizado, porque o método “Painel3_Click” chama manualmente a função “updPainel1.Update()”.
-Painel 2: não é atualizado, pois está definido comoUpdateModel=”Conditional” e o PostBack foi gerado por um componente fora dele.
-Painel 3: é atualizado, porque por padrão está definido comoUpdateModel=”Always”
-Painel 1: não é atualizado, pois está definido comoUpdateModel=”Conditional” e o PostBack foi gerado por um componente fora dele.
-Painel 2: é atualizado, pois está definido como UpdateModel=”Conditional”mas o PostBack foi gerado por um componente dentro dele.
-Painel 3: é atualizado, porque por padrão está definido comoUpdateModel=”Always”
Ao clicar no botão “Painel 3″
-Painel 1: é atualizado, porque o método “Painel3_Click” chama manualmente a função “updPainel1.Update()”.
-Painel 2: não é atualizado, pois está definido comoUpdateModel=”Conditional” e o PostBack foi gerado por um componente fora dele.
-Painel 3: é atualizado, porque por padrão está definido comoUpdateModel=”Always”