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 para tal.

A função básica do UpdatePanel é atualizar seu conteúdo sem provocar um PostBack completo (o que provocaria o recarregamento da página, perdendo possíveis 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 tecnologia 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 “”, que serve para que você coloque todo o conteúdo que será visível 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 dois 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)
 {
    txtPainel1.Text = "Botão quem atualizou";
    txtPainel2.Text = "Botão quem atualizou";
    txtPainel3.Text = "Botão quem atualizou";
 }

protected void Painel1_Click(object sender, EventArgs e)
 {
    txtPainel1.Text = "Painel 1 quem atualizou";
    txtPainel2.Text = "Painel 1 quem atualizou";
    txtPainel3.Text = "Painel 1 quem atualizou";
 }

protected void Painel2_Click(object sender, EventArgs e)
 {
    txtPainel1.Text = "Painel 2 quem atualizou";
    txtPainel2.Text = "Painel 2 quem atualizou";
    txtPainel3.Text = "Painel 2 quem atualizou";
 }

protected void Painel3_Click(object sender, EventArgs e)
 {
    txtPainel1.Text = "Painel 3 quem atualizou";
    txtPainel2.Text = "Painel 3 quem atualizou";
    txtPainel3.Text = "Painel 3 quem atualizou";

    updPainel1.Update();
 }

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 como UpdateModel=”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 como UpdateModel=”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 como UpdateModel=”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 como UpdateModel=”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 como UpdateModel=”Conditional” e o PostBack foi gerado por um componente fora dele;
• Painel 3: é atualizado, porque por padrão está definido como UpdateModel=”Always”.

Conclusão

Um problema comum é quando queremos que apenas o UpdatePanel seja atualizado, mas a página é carregada completamente. Quando isso ocorrer, possivelmente usar Triggers manualmente pode resolver o seu problema. A minha dica é sempre que você tiver um UpdatePanel com muitos controles, ou até mesmo em uma página complexa, utilizar Triggers , UpdateModel=”Conditional” e ChildrenAsTriggers=”false” para poder ter um controle total do funcionamento do seu UpdatePanel, mas se você estiver fazendo algo simples, não perca tempo com isso.

Apesar do UpdatePanel ser uma ferramenta fantástica, existe alguns (poucos) casos em que ele não se comporta bem em tarefas mais complexas, e nem sempre ele vai poder resolver a sua vida, então não deixe de aprender a tecnologia AJAX em Javascript, que é a forma que o UpdatePanel trabalha por tras dos bastidores.

Por hoje é só , espero que você tenha executado o código e percebido como o UpdatePanel pode se comportar de maneiras bem diferentes, e que podem aumentar significamente a performance e a produtividade da sua aplicação.