F ru n si Ma ste rs

C i cl o 7 Ma ste rs

/DESIGN

R e vi sta i Ma ste rs

/DESENVOLVIMENTO

Fe rra me n ta s

C u rso so n l i n e

/BANCODEDADOS

Ag e n d a

In te rC o n

U XWe e ke n d

/MARKETINGDIGITAL

Twitter

Po rta l

TrabalhandocomUpdatePanelnoASP.NETiMasters

Facebook

22/01/2015

TrabalhandocomUpdatePanel
noASP.NET
WagnerLeonardiem.NET

Ol! Hoje vou apresentar algumas funcionalidades avanadas do

UpdatePanel do ASP.NET. recomendado que voc tenha o
conhecimento bsico do UpdatePanel e sobre PostBack para tal.

A funo bsica do UpdatePanel atualizar seu contedo sem provocar

um PostBack completo (o que provocaria o recarregamento da pgina,
perdendo possveis dados inseridos e modificados pelo o usurio). A
atualizao do contedo dentro do UpdatePanel se chama PostBack
parcial: assim que um controle dentro do UpdatePanel dispara um
evento, gerado um PostBack que aps executado no recarrega a
pgina; apenas atualiza o contedo dentro do UpdatePanel.

Essa tecnologia j antiga, e se chama AJAX (utilizando Javascript), mas

o controle UpdatePanel faz tudo isso sozinho e no devemos nos
preocupar com isso agora. O que irei abordar so funcionalidades do
UpdatePanel que muitos usurios j experientes desconhecem, e pode
aumentar incrivelmente a performance e a produtividade da sua
aplicao. Vamos l!

Propriedade UpdateMode
A propriedade UpdateMode define o modo de como o contedo dentro
do UpdatePanel vai ser atualizado, e ela pode receber os seguintes
valores:

http://imasters.com.br/framework/dotnet/trabalhandocomupdatepanelnoaspnet/

1/7

22/01/2015

TrabalhandocomUpdatePanelnoASP.NETiMasters

Always: (traduo: Sempre), define que o contedo dentro do

UpdatePanel sempre ser atualizado aps a execuo de um PostBack
gerado por qualquer componente na pgina, inclusive por outro
UpdatePanel. o modo padro do UpdatePanel caso voc no
especifique.
Conditional: (traduo: 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 mtodo Update() do UpdatePanel.
(Obs.: no permitido utilizar o mtodo Update() no modo Always, e
tambm no seria necessrio!).

Propriedade ChildrenAsTriggers
A propriedade ChildrenAsTriggers (traduo: Filhos como
Disparadores/Gatilhos) serve para definir se todos os eventos dos
controles filhos (controles dentro do UpdatePanel) sero gerenciados pelo
UpdatePanel. Ela recebe o valor true para que isso ocorra, ou false
para que isso seja desativado e voc faa o controle manualmente
atravs da seo Triggers, que veremos logo em seguida. Caso voc no
especifique, o UpdatePanel utiliza o valor true como padro.

Para utilizar o valor false obrigatrio utilizar a propriedade

UpdateMode=false no UpdatePanel.

Triggers
Quando voc insere componentes dentro de um UpdatePanel j deve ter
percebido que no faz isso logo em seguida da tag ; voc cria antes a
tag , que serve para que voc coloque todo o contedo que ser visvel
para o usurio, e que o UpdatePanel ir gerenciar.

Alem de ContentTemplate, o UpdatePanel possui a tag Triggers. Dentro

dessa tag voc poder informar quais controles (e tambm especificar os
eventos dos controles) que podero provocar um PostBack. Voc pode
inserir dois tipos de Triggers:

PostBackTrigger: Ir provocar o PostBack completo, recarregando a

pgina inteira;
AsyncPostBackTrigger: Ir provocar o PostBack parcial, sem recarregar a
pgina.

http://imasters.com.br/framework/dotnet/trabalhandocomupdatepanelnoaspnet/

2/7

22/01/2015

TrabalhandocomUpdatePanelnoASP.NETiMasters

Uma grande vantagem de utilizar Triggers, poder utilizar um boto fora

do UpdatePanel para atualizar o UpdatePanel, sem recarregar a pgina!

Agora vamos ver tudo isso na prtica!

Default.aspx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<formid="form1"runat="server">
<asp:ScriptManagerID="scpManager"runat="server"></asp:ScriptManager>
<asp:ButtonID="btnAtualizarParcial"runat="server"Text="AtualizarPai
<asp:ButtonID="btnAtualizarGeral"runat="server"Text="AtualizarPagin
<asp:UpdatePanelID="updPainel1"runat="server"UpdateMode="Conditional
<ContentTemplate>
<asp:TextBoxID="txtPainel1"runat="server"></asp:TextBox>
<asp:ButtonID="btnPainel1"runat="server"Text="Painel1"
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTriggerControlID="btnAtualizarParcial"Event
<asp:PostBackTriggerControlID="btnAtualizarGeral"/>
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanelID="updPainel2"runat="server"UpdateMode="Conditional
<ContentTemplate>
<asp:TextBoxID="txtPainel2"runat="server"></asp:TextBox>
<asp:ButtonID="btnPainel2"runat="server"Text="Painel2"
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanelID="updPainel3"runat="server">
<ContentTemplate>
<asp:TextBoxID="txtPainel3"runat="server"></asp:TextBox>
<asp:ButtonID="btnPainel3"runat="server"Text="Painel3"
</ContentTemplate>
</asp:UpdatePanel>
</form>
X

NEWSLETTER

Fiquepordentrodetodasasnovidades,eventos,
cursosemuitomais

Default.aspx.cs
Seunome

1 protectedvoidAtualizar_Click(objectsender,EventArgse)
2 ENVIAR
{
3 txtPainel1.Text="Botoquematualizou";
4 txtPainel2.Text="Botoquematualizou";
5 txtPainel3.Text="Botoquematualizou";
6 }
7
8 protectedvoidPainel1_Click(objectsender,EventArgse)
9 {
10 txtPainel1.Text="Painel1quematualizou";
11 txtPainel2.Text="Painel1quematualizou";
12 txtPainel3.Text="Painel1quematualizou";
13 }
14
15 protectedvoidPainel2_Click(objectsender,EventArgse)
16 {
17 txtPainel1.Text="Painel2quematualizou";
18 txtPainel2.Text="Painel2quematualizou";
19 txtPainel3.Text="Painel2quematualizou";
20 }
21
SeuEmail

http://imasters.com.br/framework/dotnet/trabalhandocomupdatepanelnoaspnet/

3/7

22/01/2015

TrabalhandocomUpdatePanelnoASP.NETiMasters

22 protectedvoidPainel3_Click(objectsender,EventArgse)
23 {
24 txtPainel1.Text="Painel3quematualizou";
25 txtPainel2.Text="Painel3quematualizou";
26 txtPainel3.Text="Painel3quematualizou";
27
28 updPainel1.Update();
29 }

Resultados
Ao clicar no boto Atualizar Painis:

Painel 1: atualizado, pois est como UpdateModel=Conditional e o

boto que gerou o PostBack um Trigger dele;
Painel 2: no atualizado, pois est como UpdateModel=Conditional e
o PostBack foi gerado por um componente fora dele;
Painel 3: atualizado, porque por padro est definido
como UpdateModel=Always.

Ao clicar no boto Atualizar Pgina:

Como o Trigger desse boto do tipo PostBackTrigger, a pgina

recarregada completamente, atualizando todos os painis.

Ao clicar no boto Painel 1:

Painel 1: est com a propriedade ChildrenAsTriggers=false, ento

mesmo que o boto esteja dentro dele, seu contedo no atualizado
porque o ele no est definido como um Trigger em;
Painel 2: no atualizado, pois est definido
como UpdateModel=Conditional e o PostBack foi gerado por um
componente fora dele;
Painel 3: atualizado, porque por padro est com
UpdateModel=Always.

Ao clicar no boto Painel 2:

Painel 1: no 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;
http://imasters.com.br/framework/dotnet/trabalhandocomupdatepanelnoaspnet/

4/7

22/01/2015

TrabalhandocomUpdatePanelnoASP.NETiMasters

Painel 3: atualizado, porque por padro est definido

como UpdateModel=Always.

Ao clicar no boto Painel 3:

Painel 1: atualizado, porque o mtodo Painel3_Click chama

manualmente a funo updPainel1.Update();
Painel 2: no atualizado, pois est definido
como UpdateModel=Conditional e o PostBack foi gerado por um
componente fora dele;
Painel 3: atualizado, porque por padro est definido
como UpdateModel=Always.

Concluso
Um problema comum quando queremos que apenas o UpdatePanel
seja atualizado, mas a pgina 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 pgina 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, no perca tempo com isso.

Apesar do UpdatePanel ser uma ferramenta fantstica, existe alguns

(poucos) casos em que ele no se comporta bem em tarefas mais
complexas, e nem sempre ele vai poder resolver a sua vida, ento no
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 cdigo e percebido

como o UpdatePanel pode se comportar de maneiras bem diferentes, e
que podem aumentar significamente a performance e a produtividade da
sua aplicao.

Compartilhar

Tweetar

http://imasters.com.br/framework/dotnet/trabalhandocomupdatepanelnoaspnet/

Google+

5/7

22/01/2015

TrabalhandocomUpdatePanelnoASP.NETiMasters

WagnerLeonardi
desenvolvedordeaplicaesparaweb,especialistanaslinguagensASP.NETC#,
JavaePHP.

leiaagora

VB.NETCriandoum
projetoparadistribuio
comoCrystalReports
JosCarlosMacorattiem.NET

Comentrios

ParacomentarnoiMastersvocprecisaestarlogado.
OiMasterspossuimaisde13miltextospublicados,em13anosjsomosuma
comunidadedemais350milpessoas.Cadastreseagoramesmo
GRATUITAMENTEetenhaacessoatodoomundoiMasters.

J tenho conta

Quero me cadastrar

.NETchato
Responder

ronaldo
16deabrilde
2013s9:54

Gostariadesaberaaplicaoprtica.Tenhoumsitede
http://imasters.com.br/framework/dotnet/trabalhandocomupdatepanelnoaspnet/

6/7

22/01/2015

TrabalhandocomUpdatePanelnoASP.NETiMasters

anunciosdeEventos.Ondepossocolocarissoemelhorar
meusite?Temumexemplodefuncionamentoprtico?
alexandredac
ota
17deabrilde
2013s17:52

Responder

WagnerLeonardi17deabrilde2013s18:26

OlAlexandre!AaplicaodoUpdatePanelsimplesmente
alterarumcontedodeumapginajcarregada,sem
precisarcarregarapginanovamente,oquedeixaa
navegaodousuriomaisrpidaesuave.Entocoloqueo
ondequeiraqueseusitetenhaessecomportamento.Um
exemploprticoterumUpdatePanelemumalistade
usurioseumformulriodecadastroembaixodessalista,e
quandovoccadastrarumnovousurionoformulrio,vocej
mostranalistaessenovousuriosemprecisarcarregar
novamente.Basicamentenotemlimites,vocpodefazero
quevocquisermesmo!

BomdiaWagner.comoseriapossvelpegaroeventodeum
dropDowndessaforma?

Tiago
7denovembro
de2013s
10:10

timoartigo,parabns.
Responder

Este projeto mantido e patrocinado pelas empresas:

Desenvolvimento

Design

Bancodedados

MarketingDigital

Agenda

CursosOnline

Agile
Ajax
AnlisedeDados
CakePHP
CSS
FrontEnd
HTML
Java
JavaScript
PHP
Python
Ruby

3dsmax
Acessibilidade
Arquiteturade
Informao
DesignResponsivo
Games
Usabilidade
UserExperience

Interbase
MongoDB
MySQL
Oracle
PostgreSQL
SQLServer

ContedoDigital
Ecommerce
EmailMarketing
Mercado
PublicidadeOnline
RedesSociais
Tendncias

Frum

InterCon

7Masters

RevistaiMasters

InfraeCloud
Mobile

CloudComputing
Linux
MicrosoftAzure
Segurana
SiteBlindado

http://imasters.com.br/framework/dotnet/trabalhandocomupdatepanelnoaspnet/

LinkedIn

Plus

iMastersExpert(englishblog)

Google

Faleconosco

Facebook

PolticadePrivacidade

Twitter

SobreoiMasters

Android
iPhone&iPad

7/7