Universidade AJAX PDF

rosto.
ai 7/8/2007 15:48:43
Herbert Moroni
UNIVERSIDADE
CM
MY
CY
CMY
K
Universo dos Livros Editora Ltda.
Rua Tito, 1.609
CEP 05051-001 So Paulo/SP
Telefone: (11) 3648-9090 Fax: (11) 3648-9083
www.universodoslivros.com.br
e-mail: editor@universodoslivros.com.br
Conselho Administrativo: Alessandro Gerardi, Alessio Fon Melozo,

Luis Afonso G. Neira, Luis Matos e William Nakamura.
2007 by Digerati Books.
Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. Nenhuma parte deste livro,
sem autorizao prvia por escrito da editora, poder ser reproduzida ou transmitida sejam quais
forem os meios empregados: eletrnicos, mecnicos, fotogrficos, gravao ou quaisquer outros.
Diretor Editorial: Luis Matos
Assistncia Editorial: Monalisa Neves e Carolina Evangelista
Preparao de Originais: Ricardo Dino Freitas
Reviso: Guilherme Laurito Summa
Projeto Grfico: Daniele Ftima
Diagramao: Fabiana Pedrozo
Capa: Sergio Bergocce
Dados Internacionais de Catalogao na Publicao (CIP)

(Cmara Brasileira do Livro, SP, Brasil)
M868u Moroni, Herbert.
Universidade Ajax / Herbert Moroni.

So Paulo : Digerati Books, 2007.
256 p.
ISBN 978-85-60480-53-1
1. Programa de Computadores. I. Ttulo.
CDD 006.786
Sumrio
Captulo 1
Entendendo o AJAX ...................................................... 9
O que o AJAX?..........................................................................................................10
A primeira funo .....................................................................................................19
A segunda funo ......................................................................................................20
A terceira funo .......................................................................................................21
Consideraes sobre o uso do AJAX .........................................................................22
Captulo 2
AJAX ASP.NET ........................................................... 25
Instalando o AJAX ASP.NET.....................................................................................26
Conhecendo o AJAX ASP.NET ................................................................................30
Captulo 3
O controle UpdatePanel .............................................. 59
Captulo 4
O controle UpdateProgress ......................................... 77
Captulo 5
O controle Timer ......................................................... 87
Captulo 6
A classe PageRequestManager ................................... 99
Captulo 7
Usando o AJAX ASP.NET em
aplicaes j existentes ............................................. 113
Captulo 8
Usando Web Services em suas
aplicaes AJAX ASP.NET ....................................... 119
Captulo 9
Aprofundando no uso do controle UpdatePanel ....... 133
Captulo 10
Aprofundando no uso de Web Services
e no desenvolvimento voltado para o
navegador (Cliente-Centric) ...................................... 157
Captulo 11
AJAX Control Toolkit ................................................ 183
Instalando o AJAX Control Toolkit ........................................................................184
Conhecendo o AJAX Control Toolkit ....................................................................193
Apndice A ................................................................ 215

Javascript...................................................................................................................... 216
Arquivo externo com extenso .js ............................................................................ 216
No head entre as tags <head> e </head> ......................................................... 217
No body entre as tags <body> e </body> ......................................................... 217
A tag <noscript> ................................................................................................... 217
Comentrios em Javascript .................................................................................... 218
Case Sensitive ......................................................................................................... 219
Ponto-e-vrgula (;) no final das declaraes ......................................................... 219
Variveis .................................................................................................................. 219
Operadores .............................................................................................................. 220
Operadores aritmticos ....................................................................................... 220
Operadores de relacionais ................................................................................... 220
Operadores lgicos ............................................................................................. 221
Operadores de atribuio .................................................................................... 221
Operador condicional ......................................................................................... 221
Estruturas de controle ................................................................................................ 222
Estruturas de deciso ............................................................................................. 222
Declarao if ........................................................................................................ 222
Declarao if...else .............................................................................................. 222
Declarao if...else if...else ................................................................................. 223
Declarao switch ............................................................................................... 223
Estruturas de Repetio ........................................................................................ 224
Loop For ............................................................................................................... 225
Loop while ............................................................................................................ 225
Loop do...while ..................................................................................................... 225
Break .................................................................................................................... 226
Continue ............................................................................................................... 226
Pop-up boxes ............................................................................................................ 227
Alert....................................................................................................................... 227
Confirm ................................................................................................................. 227
Prompt ................................................................................................................... 227
Funes..................................................................................................................... 228
Questes importantes sobre o uso de funes .................................................. 228
Sintaxe sem parmetros .................................................................................... 229
Sintaxe com parmetros .................................................................................. 229
Eventos ..................................................................................................................... 230
Arrays ...................................................................................................................... 232
Os mtodos mais utilizados do objeto Array() ................................................. 233
Data ........................................................................................................................... 233
Os mtodos mais utilizados do objeto Date() ................................................ 234
String ........................................................................................................................ 235
Os mtodos mais utilizados do objeto String() ............................................ 235
Math ......................................................................................................................... 236
Mtodos (funes) matemticas ........................................................................ 236
Apndice B ................................................................ 239

DHTML e DOM ........................................................................................................240
Os mtodos GetElementById e GetElementByTagName ..................................... 242
Os mtodos Style e ClassName ................................................................................ 243
O mtodo innerHtml ..................................................................................................244
Os mtodos appendChild e createElement .............................................................. 245
Os mtodos insertBefore e insertAfter .................................................... 246
Os mtodos setAttribute e getAttribute .................................................................. 248
Apndice C ................................................................ 249

Instalando o Visual Studio Web Developers Express
Edition 2005 e o SQL Server 2005 Express Edition .............................................. 250
Captulo 1
Entendendo o AJAX
Voc vai verificar que, durante todo este livro, vamos trabalhar com vrios exem-
plos passo a passo. Isto facilita a compreenso, a memorizao e j mostra como voc
pode, na prtica, aplicar os conhecimentos que est adquirindo. Fique vontade
para me acompanhar nas prticas em seu prprio computador ou apenas estudar os
passos no decorrer dos exemplos.
Para acompanhar os exemplos, voc precisa ter uma verso do Visual Studio insta-
lada em sua mquina; desde que seja a verso 2005, voc pode us-la tranqilamente,
no entanto, estarei usando nos exemplos o Visual Studio Web Developers Express
Edition 2005, por ser uma verso gratuita e que pode ser baixada facilmente do site
da Microsoft. Se tiver dvidas sobre onde baixar e como instalar esta ferramenta,
consulte o Apndice C no final deste livro. Estarei usando tambm a verso Express
do SQL Server 2005, para os exemplos com banco de dados.
As ferramentas Express da Microsoft so destinadas a estudantes, entusiastas etc.
que querem conhecer e aprender mais sobre suas funcionalidades. So ferramentas
com algumas limitaes quando utilizadas para desenvolvimento corporativo, porm,
com recursos incrveis e produtivos. possvel desenvolver projetos de todos os por-
tes com as ferramentas Express. Saiba mais sobre elas visitando o site: http://msdn.
microsoft.com/vstudio/express/.
Quanto linguagem utilizada nos exemplos, vou alternar entre VB.NET e C#,
sempre mostrando como seria nas duas linguagens.
Agora que j falamos sobre o nosso ambiente de produo, vamos fazer nosso
primeiro exemplo para compreender o que o AJAX e como utiliz-lo em nossas
aplicaes ASP.NET.
O que o AJAX?
AJAX a abreviao de Asynchronous JavaScript and XML. No uma tecnologia,
e sim, uma metodologia, que utiliza vrios recursos e tecnologias, como Javascript,
DOM e XML. O objetivo do AJAX evitar que a cada solicitao do servidor a pgina
precise ser completamente recarregada. Para isto, usamos o objeto XMLHttpRequest,
por meio do Javascript, para intermediar todas as solicitaes ao servidor.
Vamos ver como isso funciona.
1. Entre no Visual Studio e crie um novo Web Site chamado IntroducaoAjax.

Neste primeiro exemplo, vou usar a linguagem VB.NET.
10 Universidade AJAX
captulo
1
Figura 1.1.
Nesse nosso primeiro exemplo, vamos criar uma aplicao cliente com Javascript
e o objeto XMLHttpRequest, que solicita ao servidor uma simples adio de dois
valores inteiros. Para isto, teremos duas pginas na nossa aplicao: uma que atuar
como o cliente e outra como servidor, que retornar o valor calculado.
2. Crie um novo formulrio para sua aplicao com o nome Default2.aspx. Para
isto, clique com o boto direito sobre o nome do projeto na janela Solution Explorer,
depois clique em Add New Item (Figura 1.2).
Figura 1.2.
Entendendo o AJAX 11
3. Na janela aberta, selecione Web Form, marque a opo Place code in separate
file (isso faz com que seja criado um arquivo separado para o cdigo da pgina) e
clique em Add.
Figura 1.3.
4. Na pgina Default.aspx, adicione trs controles HTML do tipo Input (Text),

como na imagem a seguir. Note que, para adicionar controles HTML, usamos a guia
HTML na Toolbox.
Figura 1.4.
captulo
1
5. Organize os controles, como na figura a seguir:
Figura 1.5.
6. Mude a propriedade Value dos dois primeiros controles (Text1 e Text2) para
0, como mostra a Figura 1.6:
Figura 1.6.
Vai ficar assim:
Figura 1.7.
7. Ainda na pgina Default.aspx, clique no boto Source para ir ao cdigo HTML

da pgina.
8. Insira o seguinte cdigo dentro da tag <Head> da pgina:
<script language=javascript>
var ajax;
function openAjax() {
if (window.ActiveXObject) {
ajax = new ActiveXObject(Microsoft.XMLHTTP);
}
else if (window.XMLHttpRequest)
{
ajax = new XMLHttpRequest();
}
}
function atualizar() {
if (ajax.readyState==4) {
docu ment.getElementById(Text3).value = ajax.
responseText;
}
captulo
1
function total() {
url=Default2.aspx?A= + document.getElementById(Text1).value
+
&B= + document.getElementById(Text2).value;
ajax.open(GET,url,true);
ajax.onreadystatechange = atualizar;
ajax.send();
}
</script>
No se preocupe se no compreender o cdigo Javascript agora, logo adiante ex-

plicar e, em detalhes cada uma das funes do cdigo anterior. Para maiores detalhes
sobre Javascript e DOM, voc pode consultar os Apndices A e B tambm.
9. Adicione o atributo onload=openAjax(); na tag <Body>. Vai ficar

assim:
<body onload=openAjax();>
Isso faz com que a funo Javascript openAjax() seja executada assim que a
pgina for carregada.
10. Ainda no cdigo HTML, adicione o atributo onkeyup=total(); nas

tags das duas caixas de texto. Elas vo ficar assim:
<input id=Text1 type=text onkeyup=total(); value=0

/>
<input id=Text2 type=text onkeyup=total(); value=0 />
Isso permite que a funo Javascript total() seja executada sempre que o evento
onkeyup ocorra em qualquer uma das caixas de texto.
Segue o contedo em HTML inteiro do arquivo Default.aspx, caso voc tenha

alguma dvida:
<%@ Page Language=VB AutoEventWireup=false CodeFile=Default.

aspx.vb Inherits= _ Default %>
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://

www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml >

<head runat=server>
<title>Untitled Page</title>
<script language=javascript>
var ajax;
}
else if (window.XMLHttpRequest) {
}
}
document.getElementById(Text3).value = ajax.
responseText;
}
}
function total() {
url=Default2.aspx?A= + document.getElementById(Text1).
value +
ajax.send();
}
</script>
</head>
<body onload=openAjax();>
<form id=form1>
<div>
<br />
<br />
<br />
<br />
<input id=Text3 type=text />
</div>
</form>
</body>
</html>
11. Agora vamos para o arquivo Default2.aspx.
12. D um clique duplo sobre a pgina em branco para que o evento Page_Load
seja criado e digite o seguinte cdigo:
captulo
1
Dim a As Integer = 0
Dim b As Integer = 0
If Request.QueryString(A) <> Nothing Then
a = Convert.ToInt16(Request.QueryString(A).
ToString())
End If
If Request.QueryString(B) <> Nothing Then

b = Convert.ToInt16(Request.QueryString(B).
ToString())
End If
Response.Write(a + b)
Vai ficar assim:
Figura 1.8.
Esse cdigo bem simples. Primeiro declaramos duas variveis do tipo Integer
e atribumos o valor 0 a elas.
Ento, verificamos se existe um parmetro A com valor. Se sim, atribumos esse
valor varivel. Fazemos o mesmo com o parmetro B. A ltima linha escreve a
soma dos valores das duas variveis. Esse texto ser recuperado pelo nosso programa
AJAX e atribudo caixa de texto necessria.
Se voc estiver usando a linguagem C#, segue o cdigo:
int a = 0;
int b = 0;
if (Request.QueryString[A] != null){
a = Convert.ToInt16(Request.QueryString[A].
ToString());
}
if (Request.QueryString[B] != null){
b = Convert.ToInt16(Request.QueryString[B].
ToString());
}
Response.Write(a + b);
13. A ltima modificao. V para o cdigo HTML da pgina Default2.aspx e

apague tudo, deixando apenas a primeira linha de cdigo, que contm a diretiva
Page, como na imagem a seguir:
Figura 1.9.
14. Volte para a pgina Default.aspx e execute sua aplicao (para isto, voc pode
clicar em F5). A seguinte tela poder aparecer:
Figura 1.10.
captulo
1
Apenas clique em OK para habilitar o Debug.

A seguinte janela se abre:
Figura 1.11.
Digite alguns nmeros nas duas primeiras caixas de texto. Observe que, con-
forme voc digita, o resultado j vai sendo calculado e exibido na terceira caixa
de texto sem recarregar nenhuma vez a pgina. Isto AJAX. Usamos Javascript,
o objeto XMLHttpRequest e o DOM para fazer solicitaes ao servidor rodando
ASP.NET.
Vamos agora analisar as trs funes Javascript que usamos:
A primeira funo
}
else if (window.XMLHttpRequest) {
}
}
O objeto XMLHttpRequest foi primeiramente implementado pela Microsoft

no Internet Explorer como um objeto ActiveX chamado XMLHTTP. Em seguida,
outros navegadores (Mozilla, Safari, entre outros) seguiram o mesmo caminho, im-
plementando o XMLHttpRequest em uma classe que suporta as propriedades e os
mtodos do objeto ActiveX, da Microsoft. S que esses navegadores implementaram
o objeto XMLHttpRequest de forma nativa, enquanto a Microsoft o implementou
como um objeto ActiveX.
Isso significa que precisaremos verificar qual o objeto que o navegador trabalha,
se XMLHTTP ou XMLHttpRequest. isso que fazemos nesta primeira funo.
Se estivermos trabalhando com o Internet Explorer, vamos adicionar o ActiveX
XMLHTTP varivel ajax que declaramos antes desta funo no Javascript. Se
for outro navegador, vamos atribuir o objeto XMLHttpRequest. Eles trabalham
de forma idntica.
A segunda funo
docu ment.getElementById(Text3).value = ajax.
responseText;
}
}
Aqui verificamos se a requisio est completa e ento atribumos o valor re-

tornado por ela terceira caixa de texto. Fazemos isso por meio da propriedade
readyState do objeto XMLHttpRequest. Esta propriedade possui cinco estgios,
que vo de 0 a 4. O nmero 4 indica que a requisio est completa. A seguir, uma
descrio completa dos cinco estgios:
0 - no inicializado;
1 - carregamento;
2 - carregado;
3 - interativo;
4 - completo.
Voc pode utilizar o estgio 1 para exibir uma mensagem de carregando, por
exemplo, at que o estgio 4 esteja completo.
Uma outra propriedade que usamos nesta funo a responseText. Por meio
dela, atribumos o valor que est sendo retornado caixa de texto. Esta propriedade
sempre retorna uma string com os dados do servidor Web, mas, ao invs dela, voc
pode usar a propriedade responseXML que retorna um documento XML. Este
documento pode ser manipulado por voc utilizando DOM e Javascript. Para maiores
detalhes sobre DOM e Javascript, consulte os Apndices A e B.
Temos tambm a propriedade onreadystatechange, que ser comentada
quando estudarmos a prxima funo.
O objeto XMLHttpRequest tem mais duas propriedades importantes que podem
ser bem teis em suas pginas. So elas: status e statusText.
captulo
1
status retorna um nmero que representa o status HTTP. Por exemplo,

pode retornar o nmero 404 indicando que a pgina solicitada no pde ser
encontrada;
statusText retorna um texto associado ao cdigo do status HTTP. Por exemplo,
pode retornar Pgina no encontrada.
No vou me aprofundar em exemplos sobre estas propriedades, mas voc pode

utiliz-las como utilizamos a propriedade readState para enriquecer ainda mais
suas aplicaes AJAX.
A terceira funo
function total() {
+
ajax.send();
}
Esta funo pega os valores das duas primeiras caixas de texto e envia para a
pgina Default2.aspx como parmetro. A pgina Default2.aspx usar esses valores
para efetuar a soma e retornar o resultado.
+
Se os valores digitados nas duas primeiras caixas de texto forem 12 e 11 respec-

tivamente, o cdigo anterior vai atribuir a seguinte string varivel url:
Default2.aspx?A=12&B=11
Nesta funo, usamos os mtodos open e send. A seguir, a descrio detalhada

dos mtodos disponveis no objeto XMLHttpRequest:
open (mtodo, url, sncrono, usurio, senha): inicia uma nova requisio, em que:
mtodo requisio HTTP, pode ser GET ou POST;
url endereo da URL que ser requisitada no servidor web;
sncrono se o mtodo trabalhar de forma sncrona ou assncrona; o valor
padro true, que quer dizer assncrona;
usurio e senha se o servidor Web necessitar de uma autenticao.
send(dados): envia a requisio, enviando opcionalmente os dados;
abort(): aborta uma requisio em atividade;
setRequestHeader(nome, valor): informa um cabealho (header) para a
requisio;
getResponseHeader(nome): retorna o valor do cabealho (header) informado;
getAllResponseHeaders(): retorna uma string contendo todos os cabealhos
(header).
Para finalizar, nesta funo voc conheceu a propriedade onreadystate-

change do objeto XMLHttpRequest. Ela indica qual funo ser executada
sempre que o estado do objeto XMLHttpRequest for alterado. No nosso caso, a
funo atualizar().
Consideraes sobre
o uso do AJAX
Como voc percebeu, embora possa criar aplicaes com interfaces bem mais ricas
em AJAX, isto no algo simples, principalmente pelo fato dele ser uma tecnologia
executada no cliente. E no cliente podemos ter diferentes tipos de navegadores, e cada
navegador pode ter, ainda, instalado ou no, certos tipos de extenses que podem
influenciar na execuo do cdigo. Podemos ter ainda a situao de o Javascript,
simplesmente no estar habilitado no navegador do cliente.
Ento, voc vai precisar escrever o cdigo Javascript para cada uma das possi-
bilidades e test-las. Ainda assim, para os navegadores sem suporte, ao Javascript
ser necessrio o que chamamos de Javascript no-obstrutivo, ou seja, sua pgina
deve rodar sem os recursos do AJAX. Isso porque na Internet cada visitante um
potencial cliente e voc no pode eliminar potenciais clientes porque eles no tm
os recursos que voc precisa para que eles naveguem no seu site.
Para programar em Javascript tambm, no contamos com as ferramentas de
Debug (tratamento de erros) e o IntelliSense do Visual Studio, que melhoram muito
a produtividade de um sistema ou website para a Internet.
O que quero deixar bem claro aqui que tudo tem seu preo. Com o ganho na
interface, temos uma perda de produtividade e isso no bom. Principalmente para
os programadores ASP.NET, que tm sua disposio todos os recursos do Visual
Studio.
E, como voc sabe, perda de produtividade representa maior tempo de desen-
volvimento, assim, temos um aumento no custo do projeto. exatamente isso que
captulo
1
ningum quer, principalmente as empresas contratantes que cada vez mais pressionam
os projetos para que os custos e prazos sejam reduzidos.
Visando dar maior produtividade no desenvolvimento de aplicaes ASP.NET,
foram criados vrios frameworks, ou seja, bibliotecas de cdigo Javascript que pode-
mos usar no desenvolvimento com AJAX. O Google tem um framework destes, mas
eles tambm no ajudam muito para quem desenvolve em ASP.NET usando o Visual
Studio.NET, pela difcil integrao com o mesmo. Atravs deles, perdemos o poder
dos Web Server Controls, como voc viu no exemplo que fizemos neste Captulo.
Tentando ajudar na produtividade dos programadores .NET, a Microsoft lan-
ou seu prprio framework integrado ao Visual Studio. Primeiro conhecido como
ATLAS e agora chamado de AJAX ASP.NET, ele o tema principal deste livro. Por
meio dele, usaremos os poderosos recursos do AJAX sem uma perda considervel
de produtividade.
A Microsoft tambm tem outras iniciativas para melhorar o desenvolvimento
com AJAX, principalmente com a verso futura do Visual Studio, que deve ajudar
na depurao de erros do Javascript.
Captulo 2
AJAX ASP.NET
O objetivo deste captulo mostrar a voc o poder do framework AJAX ASP.
NET em suas aplicaes Web: como ele pode melhorar a produtividade e deixar suas
aplicaes mais interativas.
Instalando o AJAX ASP.NET

Vamos agora instalar os recursos que usaremos do AJAX ASP.NET. Se voc
tiver instalado em sua mquina verses anteriores das que estamos instalando,
como a antiga biblioteca ATLAS da Microsoft, o ideal que as desinstale antes de
prosseguir.
Vamos precisar fazer o download de um arquivo na Internet para a instalao. Se
voc estiver conectado a Internet pode faz-lo e, em seguida, a instalao seguindo
o passo a passo durante os prximos exemplos; caso contrrio, faa o download do
arquivo e depois instale em sua mquina, como explico a seguir.
1. Visite o site (Figura 2.1):

www.asp.net
Figura 2.1.
2. No menu, clique em AJAX, ou acesse diretamente a url:

http://ajax.asp.net
3. Na parte superior, clique em Download.
captulo
2
Figura 2.2.
4. Com a pgina aberta, clique no boto Download ASP.NET AJAX v1.0.
Figura 2.3.
AJAX ASP.NET 27
Voc ser direcionado a uma pgina de download da Microsoft, como mostra a
Figura 2.4 a seguir:
Figura 2.4.
5. Clique no boto Download. Voc pode salvar este arquivo no seu disco rgido,
clicando em Salvar; ou execut-lo imediatamente, clicando em Executar.
Figura 2.5.
6. Clique em Executar para iniciar o download e execut-lo imediatamente. Este
captulo
ser feito e a instalao ser iniciada, como mostra a Figura 2.6: 2
Figura 2.6.
7. Clique em Next.
8. Marque a opo I accept the terms in the License Agreement e clique em

Next.
Figura 2.7.
9. Clique em Install para continuar (Figura 2.8).
AJAX ASP.NET 29
Figura 2.8.
10. Aps concluir a instalao, desmarque a opo Display Microsoft ASP.NET,

2.0 AJAX Extensions 1.0 Release Notes e clique em Finish (Figura 2.9).
Figura 2.9.
A instalao foi concluda com sucesso.
Conhecendo o AJAX ASP.NET

1. Entre no Visual Studio 2005 e clique em Create Web Site (Figura 2.10).
captulo
2
Figura 2.10.
Perceba que, ao criar o novo projeto, foi adicionado um novo Template chamado
ASP.NET AJAX - Enabled Web Site. Quando voc seleciona este Template, o Visual
Studio adiciona automaticamente no arquivo Web.Config as instrues usadas pelos
componentes ASP.NET AJAX. Nos prximos tpicos, voc vai conhecer estas alte-
raes e aprender a usar o AJAX ASP.NET em aplicaes Web j existentes.
2. Selecione o Template ASP.NET AJAX - Enabled Web Site e crie um novo

Website chamado IntroASPNETAJAX, como mostra a Figura 2.11:
Figura 2.11.
AJAX ASP.NET 31
Durante a instalao, o Assembly AJAX - ExtensionToolbox.DLL foi referenciado
na ToolBox do Visual Studio; o resultado disso a nova guia que voc tem disponvel
agora na sua Toolbox, como mostra a Figura 2.12:
Figura 2.12.
No modo Design, na pgina Default.aspx, voc nota mais uma diferena: o con-
trole ScriptManager, como mostra a Figura 2.13:
Figura 2.13.
O controle ScriptManager responsvel por tornar os scripts disponveis para

o navegador do cliente. Por isso, ele necessrio em todas as pginas que voc for
utilizar o AJAX ASP.NET. Ele a parte central do framework o AJAX ASP.NET
captulo
e controla todos os recursos AJAX na pgina. 2
3. Vamos agora adicionar um banco de dados ao nosso projeto. Para isso, na janela
Solution Explorer, clique com o boto direito sobre o nome do projeto e selecione
Add New Item (Figura 2.14).
Figura 2.14.
4. Na janela Add New Item, em Templates, selecione SQL Database. Mude o

nome do arquivo para Projetos.mdf e, em seguida, clique em Add, como mostra a
figura a seguir.
Figura 2.15.
AJAX ASP.NET 33
5. Voc questionado se deseja adicionar o arquivo de banco de dados em uma
pasta especialmente reservada a ele chamada App_Data (Figura 2.16). Isto uma boa
prtica, clique em Sim.
Figura 2.16.
Repare que a conexo ao banco de dados que acabamos de criar exibida na

janela Database Explorer, como mostra a Figura 2.17:
Figura 2.17.
6. Vamos adicionar uma tabela no nosso banco de dados, para isso, na janela Data-
base Explorer, clique com o boto direito sobre Tables e selecione Add New Table.
Figura 2.18.
7. Preencha as colunas Column Name, Data Type e Allow Nulls, como mostra a
captulo
figura a seguir: 2
Figura 2.19.
8. Clique com o boto direito sobre ProjetoId e selecione Set Primary Key, como
mostra a prxima figura. Isso torna o campo ProjetoId a chave primria da nossa
tabela.
Figura 2.20.
AJAX ASP.NET 35
9. Ainda em ProjetoId, na janela Column Properties, marque a opo Yes na
propriedade (Is Identity), como mostra a Figura 2.21:
Figura 2.21.
10. Clique em Salvar. Surgir uma caixa de dilogo Choose Name, solicitando o
nome para a tabela. Digite Projetos e clique em OK, como mostra a Figura 2.22.
Figura 2.22.
11. Vamos adicionar alguns registros na nossa tabela. Para isto, na janela Data-
base Explorer, clique com o boto direito sobre a tabela Projetos e selecione Show
Table Data (Figura 2.23).
captulo
2
Figura 2.23.
12. Preencha as colunas Nome e Completa, conforme a prxima imagem. Note

que o campo ProjetoId autonumervel como desejamos, quando o tornamos chave
primria e marcamos a opo Identity.
Figura 2.24.
AJAX ASP.NET 37
13. Para realizar o acesso aos dados em nossas aplicaes, vamos utilizar um
Dataset tipado. H vrias tcnicas para criar uma camada de acesso a dados, mas o
Dataset tipado, juntamente com o TableAdapter, uma das formas mais simples de
realizar esta tarefa. Para adicionar um Dataset tipado, proceda como fizemos para
adicionar um banco de dados, mas na janela Add New Item, ao invs de escolher a
opo SQL Database, selecione a opo Dataset. Vamos chamar o nosso Dataset de
ProjetosDataset.xsd, como mostra a Figura 2.25:
Figura 2.25.
14. O Dataset, assim como o banco de dados, pode ser adicionado em uma pasta
especfica. No caso do Dataset, a pasta App_Code. Clique em Sim na mensagem
ilustrada pela Figura 2.26 para que a pasta seja criada e o Dataset adicionado na
mesma.
Figura 2.26.
15. Um Assistente chamado TableAdapter Configuration Wizard iniciado.

Selecione o nome do nosso banco de dados na opo Wich data connection should
your application use to connect to the database? e clique em Next >.
captulo
2
Figura 2.27.
16. O prximo passo decidir se deseja que a string de conexo ao banco de dados
seja adicionada ao arquivo de configurao. Clique em Yes, Save the connection as:,
como mostra Figura 2.28 a seguir, e clique em Next >.
Figura 2.28.
17. Podemos fazer o acesso aos dados de duas formas: usando comandos SQL, e
por meio de Stored Procedures. Marque a opo Use SQL statements e clique em
Next > (Figura 2.29).
AJAX ASP.NET 39
Figura 2.29.
18. Clique no boto Query Builder.
Figura 2.30.
19. Na janela Add Table, selecione a tabela Projetos, na guia Tables, e clique em
Add. Em seguida, clique em Close (Figura 2.31). A tabela Projetos vai ser adicionada
na janela Query Builder.
captulo
2
Figura 2.31.
20. A janela Query Builder nos ajuda na criao dos comandos SQL. Selecione
ProjetoID, Nome e Completa, na tabela Projetos, e digite a clusula WHERE, como
mostra a Figura 2.32:
Figura 2.32.
21. Clique em OK.
22. A prxima janela exibe o comando SQL criado pelo Query Builder e permite
que voc faa ajustes, se necessrio. O comando deve ser igual ao mostrado na pr-
xima figura. Clique em Next > (Figura 2.33).
AJAX ASP.NET 41
Figura 2.33.
Na prxima tela (Figura 2.34) voc pode escolher e nomear os mtodos que deseja
que o assistente crie para manipulao e recuperao dos dados.
Figura 2.34.
23. Para nosso exemplo, no vamos utilizar o mtodo Fill, ento desmarque esta
opo.
24. Mude o nome do mtodo Return a DataTable para GetProjetosPorStatus,
captulo
como mostra a Figura 2.35. 2
Figura 2.35.
25. Clique em Next >.
A prxima tela (Figura 2.36) resume todas as tarefas que sero realizadas pelo
assistente.
Figura 2.36.
AJAX ASP.NET 43
26. Clique em Finish. A tabela adicionada ao Dataset, como mostra a Figura
2.37.
Figura 2.37.
27. Vamos testar o mtodo GetProjetosPorStatus. Para isto, clique com o boto
direito sobre o mesmo e selecione Preview Data (Figura 2.38):
Figura 2.38.
Ser exibida a janela Preview Data (Figura 2.39):
captulo
2
Figura 2.39.
28. No parmetro Completa, digite false em Value e clique em Preview (Figura

2.40). Sero exibidos os registros que tiverem o valor false na coluna Completa.
Figura 2.40.
AJAX ASP.NET 45
29. Volte ao arquivo Default.aspx e adicione os seguintes controles:
1 DropDownList;
1 GridView;
1 DetailsView.
30. Organize-os, como mostra a Figura 2.41:
Figura 2.41.
31. Na propriedade itens no controle DropDownList1, adicione o item Completo

com valor true, e o item Incompleto, com o valor false, como mostram as Figuras
2.42 e 2.43:
Figura 2.42.
captulo
2
Figura 2.43.
32. No GridView1, na propriedade DataSourceID, clique em New Data Source.

Ser iniciado um Assistente.
33. Selecione Object e, na opo Where will the application get data from?, clique
em OK, como mostra a Figura 2.44:
Figura 2.44.
Selecionamos Object na tela anterior porque vamos recuperar nossos dados uti-
lizando o objeto Dataset que criamos.
AJAX ASP.NET 47
O prximo passo do assistente permite que selecionemos o objeto TableAdapter.
O TableAdapter contm o mtodo que criamos para recuperar os dados da nossa
tabela. Ele foi criado quando criamos o Dataset.
34. Na tela seguinte, selecione a opo como mostra, a Figura 2.45 e, em seguida,
clique em Next >.
Figura 2.45.
Voc pode agora escolher o mtodo do TableAdapter que deseja. Ns s temos

um mtodo, o GetProjetosPorStatus (Figura 2.46).
Figura 2.46.
35. Clique em Next > para continuar.
36. Agora temos um passo importante. O GridView1 exibir os valores de acordo

com a opo escolhida no DropDownList1. Se o valor do DropDownList1 for Com-
pleto, ou seja, true, sero exibidos apenas os registros que o campo Completa tive-
rem o valor true. Se o valor do DropDownList1 for Incompleto, ou seja, false, sero
exibidos apenas os registros que o campo Completa tiverem o valor false. Para isto,
em Parameter source, selecione Control. Em ControlID, selecione DropDownList1
(Figura 2.47).
captulo
2
Figura 2.47.
37. Clique em Finish.
38. Na Smart Tag do GridView1, marque as opes conforme a Figura 2.48 a

seguir:
Figura 2.48.
39. Usaremos o controle DetailsView1 para inserir novos projetos. Para isto, na
Smart Tag do DetailsView1, selecione Enable Inserting e tambm escolha Objec-
tDataSource1 em Choose Data Source, como mostra a Figura 2.49:
Figura 2.49.
AJAX ASP.NET 49
40. Antes de testar nossa aplicao, marque a propriedade AutoPostBack do
controle DropDownList1 como true. Seno ao selecionarmos uma opo no ser
disparado o Post que atualiza o GridView.
41. Execute sua aplicao.
Perceba que cada vez que voc muda a opo do DropDownList1 a pgina
totalmente recarregada (Figura 2.50). Acontece o mesmo se voc inserir um novo
projeto.
Figura 2.50.
Vamos agora implementar o AJAX ASP.NET para fazer atualizaes parciais da

pgina, sem a necessidade de recarreg-la completamente toda vez que uma opo
for selecionada.
42. Adicione um controle UpdatePanel, como mostra a Figura 2.51. Ele est
localizado na guia AJAX Extensions na Toolbox.
captulo
2
Figura 2.51.
43. Arraste o GridView1 para dentro do UpdatePanel1, como mostra a Figura

2.52:
Figura 2.52.
AJAX ASP.NET 51
44. Na janela Properties, localize a propriedade Triggers do UpdatePanel1, e na ja-
nela UpdatePanelTrigger Collection Editor, clique em Add. Selecione DropDownList1,
na propriedade ControlID e SelectedIndexChanged para a propriedade EventName.
Clique em OK (Figura 2.53).
Figura 2.53.
Voc vai aprender mais sobre a propriedade Trigger no prximo Captulo.
45. Execute a aplicao.
46. Perceba agora que, a cada seleo do DropDownList1, apenas o GridView1

atualizado (Figura 2.54). No necessrio o recarregamento de toda a pgina.
Figura 2.54.
Voc vai aprender detalhes sobre o UpdatePanel e o uso da Trigger no prximo
captulo
Captulo. Por enquanto, apenas entenda o seguinte: j que o DropDownList1 est 2
fora do UpdatePanel1, precisamos indicar ao mesmo que o DropDownList1 ser o
responsvel por realizar a chamada da atualizao do que est dentro do Update-
Panel1. Para isto, usamos a Trigger.
47. Adicione alguns projetos, como na figura a seguir:
Figura 2.55.
Perceba que, ao inserirmos novos projetos, a pgina ainda totalmente recarre-

gada. Vamos resolver isso agora.
48. Pare a aplicao e volte pgina Default.aspx.
49. Adicione mais um UpdatePanel1 e mova o DetailsView1 para dentro do mesmo,

como mostra a Figura 2.56:
AJAX ASP.NET 53
Figura 2.56.
50. Localize a propriedade UpdateMode do UpdatePanel2 e selecione a opo

Conditional (Figura 2.57).
Figura 2.57.
51. Execute a aplicao (Figura 2.58).
captulo
2
Figura 2.58.
Agora, tanto ao usar o DropDownList1, quanto o DetailsView1, voc obtm o

recarregamento parcial da pgina.
52. Para finalizar, apenas quero apresentar para voc o controle UpdateProgress.
Para isto, adicione o mesmo sua pgina Default.aspx e digite dentro dele o texto
Atualizando, como mostra a Figura 2.59:
Figura 2.59.
AJAX ASP.NET 55
O contedo deste controle ser exibido enquanto a pgina recarregar algum dos
UpdatePanels. Como nosso exemplo bem simples e o recarregamento bem rpido,
se voc executar a pgina agora no vai conseguir visualizar o texto por ser muito r-
pida sua apresentao. Para que voc possa ver o texto, vamos manipular a Thread no
momento de atualizao do GridView1, fazendo com que leve ao menos trs segundos.
Para isto, siga os prximos passos.
53. Selecione o ObjectDataSource1 e, na janela Properties, clique no boto Events.

Isto faz com que todos os eventos do ObjectDataSource1 sejam exibidos. Localize o
evento Updating e d um clique duplo sobre o mesmo (Figura 2.60).
Figura 2.60.
Ser criado o procedimento do evento no painel de cdigo.
54. Digite dentro do procedimento o seguinte cdigo:
System.Threading.Thread.Sleep(3000)
Seu painel de cdigo deve ficar como mostra a Figura 2.61:
captulo
2
Figura 2.61.
55. Vamos testar. Execute a aplicao (F5).
56. Clique em Editar para qualquer projeto (altere o nome, por exemplo) e clique
em Atualizar. Dever aparecer o texto Atualizando, conforme a Figura 2.62:
Figura 2.62.
Neste Captulo voc aprendeu como fcil construir aplicaes com AJAX uti-
lizando o framework AJAX ASP.NET e conheceu os seus principais controles.
AJAX ASP.NET 57
Captulo 3
O controle UpdatePanel
No Captulo anterior, voc j utilizou o UpdatePanel e pde comprovar os bene-
fcios que ele proporciona s suas aplicaes.
Usando o UpdadePanel, voc pode atualizar partes especficas da pgina, sem a
necessidade de usar nenhum cdigo Javascript. Assim, voc tem uma boa reduo
no trfico entre navegador cliente e servidor, diminuindo o uso de banda.
Lembre-se: assim como os demais controles, o UpdatePanel, trabalha em con-
junto com o controle ScriptManager, ento o mesmo deve estar ou ser adicionado
na pgina quando voc for utilizar o UpdatePanel.
Neste Captulo, faremos uma prtica em que voc aprender:
usar triggers;
trabalhar com vrios UpdatePanel em uma mesma pgina;
usar UpdatePanel aninhados;
atualizar e criar UpdatePanel programaticamente;
conhecer os controles que no so compatveis com o UpdatePanel.
1. Crie uma nova aplicao usando o Template ASP.NET AJAX - Enabled Web
Site chamada UpdatePanel, como mostra a imagem a seguir. Neste exemplo, usare-
mos a linguagem C#.
Figura 3.1.
2. Adicione dois controles TextBox e um controle Button, na pgina Default.aspx,

e organize-os conforme a Figura 3.2:
captulo
3
Figura 3.2.
3. D um clique duplo sobre a pgina Default.aspx, e no painel de cdigo digite

o seguinte cdigo dentro do procedimento do evento Page_Load:
TextBox1.Text = DateTime.Now.ToString();
Para a linguagem Visual Basic, voc pode usar a mesma linguagem s que sem
o ponto-e-vrgula. Desta forma:
TextBox1.Text = DateTime.Now.ToString()
Esse cdigo tem por objetivo atribuir o valor da data e hora atual nas duas caixas
de texto. Seu painel de cdigo deve estar como na Figura 3.3:
O controle UpdatePanel 61
Figura 3.3.
4. Execute e teste sua aplicao.

Perceba que ao clicar no boto, a data e hora atual so exibidas em cada uma das
caixas de texto (Figura 3.4).
Figura 3.4.
5. Pare a execuo da aplicao.
6. Adicione um controle UpdatePanel na pgina Default.aspx e mova os controles
TextBox2 e Button1 para dentro do mesmo, conforme a Figura 3.5:
captulo
3
Figura 3.5.
8. Clique sobre o boto e, perceba que agora, apenas a caixa de texto que est
dentro do UpdatePanel executada. Temos ento um carregamento assncrono dentro
do UpdatePanel usando AJAX (Figura 3.6).
Figura 3.6.
9. Pare a execuo da aplicao.
Qualquer controle dentro de um UpdatePanel dispara uma atualizao assn-
crona, ou seja, uma atualizao apenas dentro do UpdatePanel. Se a propriedade
ChildrenAsTrigger estiver com valor true, esta propriedade ser sempre true
por padro. Se voc deixar essa propriedade como false, os controles dentro do
UpdatePanel no chamaro uma atualizao assncrona.
muito difcil alterarmos a propriedade ChildrenAsTrigger, porque geralmente
pelo menos um dos controles dentro do UpdatePanel usado para solicitar atualiza-
o assncrona. No entanto, algumas vezes precisamos que um controle especfico
que est dentro do UpdatePanel no chame uma atualizao assncrona. Voc vai
ver como fazer isso agora.
10. Clique sobre o UpdatePanel1 para selecion-lo e, na janela Properties, localize

e clique sobre a propriedade Triggers, como mostra a Figura 3.7.
Figura 3.7.
11. Na janela UpdatePanelTrigger, clique na seta indicando para baixo ao lado

do boto Add, como mostra a Figura 3.8:
Figura 3.8.
Perceba que so exibidas duas opes: AsyncPostBackTrigger e PostBackTrigger.
12. Clique sobre PostBackTrigger.
13. Em ControlID, selecione o controle Button1, como mostra a Figura 3.9 a captulo
seguir: 3
Figura 3.9.
14. Clique em OK.
O cdigo HTML referente ao controle UpdatePanel1 deve estar assim:
<asp:UpdatePanel ID =UpdatePanel1 runat=server>

<ContentTemplate>
<asp:TextBox ID =TextBox2 runat=server></asp:
TextBox><br />
<asp:Button ID =Button1 runat=server
OnClick=Button1 _ Click Text=Button />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID =Button1 />
</Triggers>
</asp:UpdatePanel>
Note no cdigo anterior que a tag <Triggers> quem faz referncia ao controle
que no vai disparar uma atualizao assncrona.
Perceba que, ao clicar no boto, toda a pgina atualizada novamente, pois as
duas caixas de texto so atualizadas com a data.
16. Pare a execuo do programa.
17. Arraste o Button1 para fora do UpdatePanel, como mostra a Figura 3.10:
Figura 3.10.
18. Da mesma forma que voc pode usar uma trigger para fazer com que um
controle dentro do UpdatePanel no chame uma atualizao assncrona, voc pode
tambm usar uma trigger para fazer com que um controle fora do UpdatePanel
execute uma atualizao assncrona. Para isto, clique novamente sobre o UpdatePa-
nel1 para selecion-lo e, na janela Properties, localize e clique sobre a propriedade
Triggers.
19. Desta vez, selecione a opo AsyncPostBackTrigger, no boto Add, como

captulo
3
Figura 3.11.
20. Na propriedade ControlID, selecione Button1 e, na propriedade EventName,

selecione Click (Figura 3.12).
Figura 3.12.
Assim, toda vez que o evento Click do Button1 for disparado, ser solicitada uma
atualizao assncrona.
O HTML do UpdatePanel deve estar agora semelhante a esse:

<ContentTemplate>
<asp:TextBox ID =TextBox2 runat=server></asp:
TextBox><br />

</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID =Button1
EventName=Click />
</Triggers>
</asp:UpdatePanel>
Note no cdigo anterior que a tag <Triggers> quem faz referncia ao controle
e ao evento que dispara a atualizao assncrona.
21. Execute e teste sua aplicao.
Vamos entender agora a propriedade UpdateMode, usada quando temos mais do

que um UpdatePanel na mesma pgina.
22. Adicione mais um UpdatePanel pgina e arraste o controle TextBox1 para

dentro do mesmo, como mostra a Figura 3.13:
Figura 3.13.
23. Execute a aplicao. Perceba que sempre que voc clica no Button1 os dois
UpdatePanel so atualizados (Figura 3.14).
captulo
3
Figura 3.14.
24. Selecione o UpdatePanel2 e mude a propriedade UpdateMode para Conditional,

Figura 3.15.
Quando a propriedade UpdateMode est definida como always que, por sinal,
o valor padro , qualquer controle na pgina que dispara uma atualizao assncrona
atualiza o UpdatePanel em questo. Quando esta mesma propriedade foi definida
como Conditional, apenas os controles dentro do mesmo ou com trigger apontada
para o mesmo efetuam atualizao assncrona.
No h limite em relao ao nmero de UpdateControls a serem utilizados em
uma pgina.
25. Execute a aplicao. Agora, ao clicar no boto, apenas o UpdatePanel1 deve
ser atualizado (Figura 3.16).
Figura 3.16.
26. Adicione um Button dentro do UpdatePanel2.
27. Arraste o UpdatePanel2 para dentro do UpdatePanel1, conforme mostra a

Figura 3.17:
Figura 3.17.
A regra aqui simples: se os dois controles UpdatePanel estiverem com a pro-
priedade UpdateMode com o valor Conditional, ao clicar no boto dentro do Upda-
tePanel filho, ou seja, aquele que est dentro do outro, apenas este ser atualizado.
J o UpdatePanel pai, sempre atualizar a si mesmo e a todos os UpdatePanel que
estiverem dentro dele. captulo
3
28. Certifique-se que a propriedade UpdateMode dos dois controles UpdatePanel
estejam como Conditional.
29. Execute e teste a aplicao.
Perceba que, ao clicar no boto dentro do UpdatePanel2, somente o mesmo

atualizado. J ao clicar no boto que est dentro do UpdatePanel1, disparada a
atualizao assncrona dos dois controles UpdatePanel.
Agora, vamos aprender a atualizar e criar UpdatePanel programaticamente.
30. Adicione mais um Button sua aplicao fora de qualquer UpdatePanel, como
mostra a Figura 3.18 a seguir:
Figura 3.18.
Se voc executar sua pgina agora, esse boto no far nenhuma solicitao
assncrona. Ao clicar sobre ele, a pgina completamente atualizada.
31. D um clique duplo sobre o Button que voc acabou de adicionar e digite o
seguinte cdigo no procedimento de evento do mesmo:
UpdatePanel1.Update();
Isso ainda no o suficiente para realizar uma atualizao assncrona, precisamos

registrar o controle como uma trigger. Fazemos isso adicionando o seguinte cdigo
no procedimento de evento Page_Load:
ScriptManager1.RegisterAsyncPostBackControl(Button3);
Button3 o nome ou ID do Button que adicionamos.
32. Execute sua aplicao e teste. Agora, voc j capaz de chamar uma atuali-
zao assncrona programaticamente.
33. Agora, vamos criar um controle UpdateControl programaticamente. Para isto,

adicione uma nova pgina sua aplicao com o nome de Default2.aspx.
34. Adicione um controle ScriptManager nessa pgina.
35. Dentro da classe Default2, adicione o seguinte cdigo:
UpdatePanel up1 = new UpdatePanel();

Button Button1 = new Button();
TextBox TextBox1 = new TextBox();
protected void Page _ Load(object sender, EventArgs e)

{
up1.ID = UpdatePanel1;
up1.UpdateMode = UpdatePanelUpdateMode.Conditional;
Button1.ID = Button1;
Button1.Text = Button;
Button1.Click += new EventHandler(Button1 _ Click);
TextBox1.ID = TextBox1;
up1.ContentTemplateContainer.Controls.Add(Button1);
up1.ContentTemplateContainer.Controls.Add(TextBox1);
Page.Form.Controls.Add(up1);
}
protected void Button1 _ Click(object sender, EventArgs e)

{
TextBox1.Text = DateTime.Now.ToString(); captulo
} 3
Seu painel de cdigo deve estar assim (Figura 3.19):
Figura 3.19.
A seguir, o mesmo cdigo para a linguagem Visual Basic .NET:
Dim up1 As New UpdatePanel()

Dim Button1 As New Button()
Dim TextBox1 As New TextBox()
Protected Sub Page _ Load(ByVal sender As Object, ByVal e As

System.EventArgs) Handles Me.Load
up1.ID = UpdatePanel1
up1.UpdateMode = UpdatePanelUpdateMode.Conditional
Button1.ID = Button1
Button1.Text = Button
AddHandler Button1.Click, AddressOf Button1 _ Click
TextBox1.ID = TextBox1
up1.ContentTemplateContainer.Controls.Add(Button1)
up1.ContentTemplateContainer.Controls.Add(TextBox1)
Page.Form.Controls.Add(up1)
End Sub
Protected Sub Button _ Click(ByVal Sender As Object, ByVal E As

EventArgs)
End Sub
36. Execute e teste sua aplicao (Figura 3.20).
Figura 3.20.
Vamos agora compreender o cdigo:

Primeiramente, criamos os trs objetos que vamos utilizar na nossa pgina.
1 UpdatePanel;
1 Button;
1 TextBox;
Fizemos isso com o cdigo a seguir:
UpdatePanel up1 = new UpdatePanel();

Button Button1 = new Button();
TextBox TextBox1 = new TextBox();
captulo
3
O segundo passo foi atribuir um identificador nico para o UpdatePanel que cria-
mos e atribuir o valor Conditional sua propriedade UpdateMode. Neste exemplo,
no precisvamos ter alterado a propriedade UpdateMode para este contexto, mas
por motivo didtico mostrei como realizar esta tarefa.
up1.ID = UpdatePanel1;
up1.UpdateMode = UpdatePanelUpdateMode.Conditional;
Tambm precisamos atribuir um identificador nico para os controles TextBox

e Button, j que os criamos programaticamente tambm. Fizemos isso usando as
seguintes linhas de cdigo:
Button1.ID = Button1;
TextBox1.ID = TextBox1;
A propriedade Text do Button1 foi modificada para Button apenas para o boto
no exemplo no ser exibido em branco.
Button1.Text = Button;
Depois, criamos um manipulador de evento para o Button1 com a seguinte linha

de cdigo, em que Button1_Click o nome de um procedimento que criamos.
Button1.Click += new EventHandler(Button1 _ Click);
O cdigo a seguir mostra o procedimento Button1_Click. nele que atribumos

o valor da data e hora atual a TextBox1.
protected void Button1 _ Click(object sender, EventArgs e)

{
}
Ns precisamos vincular os controles TextBox1 e Button1 no UpdatePanel. Fa-

zemos isso adicionando os controles na propriedade ContentTemplateContainer do
UpdatePanel usando o seguinte cdigo:
up1.ContentTemplateContainer.Controls.Add(Button1);
up1.ContentTemplateContainer.Controls.Add(TextBox1);
Para finalizar, vinculamos o nosso UpdateControl pgina usando o cdigo:
Page.Form.Controls.Add(up1);
Nesses exemplos, voc j deve ter percebido o poder e o que voc ser capaz de
fazer facilmente utilizando o UpdatePanel. Para finalizar, existem alguns controles
que no podem ser utilizados dentro do UpdatePanel. Segue uma descrio deles,
alm de algumas regras a serem seguidas:
TreeView, Menu, Substitution e WebParts;
FileUpload;
GridView e DetaisView, quando estiverem com a propriedade EnableSorting,
AndPagingCallbacks com o valor true;
os controles Login, PasswordRecovery, ChangePassword e CreateUserWizard
s podem ser usados se forem convertidos em Templates;
os controles BaseCompareValidator, BaseValidator, CompareValidator,
CustomValidator, RangeValidator, RegularExpressionValidator, Requere-
dFieldValidator e ValidationSummary s podem ser usados se estiverem com
a propriedade EnableClientScript como false.
Captulo 4
O controle UpdateProgress
O controle UpdateProgress sempre funciona associado a um UpdatePanel e sua
funo exibir informaes sobre o progresso de atualizao assncronas, ou seja,
atualizaes AJAX.
Neste Captulo, faremos uma prtica que o habilitar a:

usar apenas um UpdateProgress para toda a pgina;
usar mltiplos UpdateProgress;
usar o UpdateProgress dentro e fora do UpdatePanel.
1. Crie uma nova aplicao usando o template ASP.NET AJAX - Enabled Web
Site chamada UpdateProgress, como mostra figura a seguir. Neste exemplo, usarei
a linguagem VB.NET.
Figura 4.1.
2. Adicione os seguintes controles na pgina Default.aspx:

3 Label;
2 UpdatePanel;
1 Button;
1 Calendar.
3. Certifique-se que o controle ScriptManager esteja adicionado pgina.
4. Organize os controles como a Figura 4.2, sendo que o controle Label1 est
fora de qualquer UpdatePanel, o Label2 e o Button1 esto dentro do UpdatePanel1
e o Label3 e o Calendar esto dentro do UpdatePanel2.
captulo
4
Figura 4.2.
5. D um clique duplo sobre a pgina e digite o seguinte cdigo dentro do pro-

cedimento de evento Page_Load:
Label1.Text = DateTime.Now.ToString
Segue o mesmo cdigo em C#:
Label1.Text = DateTime.Now.ToString();
6. Este mesmo cdigo deve ser digitado para o evento Click, do controle Button1,
e para o evento SelectionChanged, do controle Calendar1, mudando apenas o La-
bel1 para Label2 e Label3, respectivamente. Para criar os procedimentos de evento
necessrios, voc pode dar um clique duplo sobre o Button1 e fazer o mesmo para
o controle Calendar, depois apenas digite o cdigo. Seu painel de cdigo deve ficar
O controle UpdateProgress 79
Figura 4.3.
7. Execute a aplicao. Clique sobre o boto e o calendrio. Eles devem atualizar os

seus respectivos labels com a data e a hora atuais de forma assncrona (Figura 4.4).
Figura 4.4.
8. Adicione um controle UpdateProgress logo abaixo do Label1. Dentro deste
UpdateProgress, digite o texto Aguarde..., como mostra a Figura 4.5:
captulo
4
Figura 4.5.
9. Se voc executar o exemplo agora, no notar diferena alguma. Isto porque o

processamento assncrono que est sendo realizado bem simples apenas trazer a
data e a hora e adicionar no label e rpido. Para visualizarmos o uso do UpdatePro-
gress, vamos utilizar o mtodo Sleep da classe Thread que est no namespace System.
Threading para fazer com que o processamento assncrono demore trs segundos.
Para isto, adicione a seguinte linha de cdigo dentro dos mtodos Button1_Click e
Calendar1_SelectionChanged:
O cdigo em C# quase o mesmo:
System.Threading.Thread.Sleep(3000);
Figura 4.6.
10. Execute sua aplicao (Figura 4.7).
Figura 4.7.
Agora sim, ao executar uma atualizao assncrona o texto Aguarde... exibido
durante trs segundos (3.000 milissegundos), o tempo que a atualizao leva para
ser processada. O UpdateProgress muito til quando trazemos informaes de
um banco de dados que pode levar alguns segundos, informando ao usurio que a
solicitao dele j est sendo efetuada.
Perceba que a mensagem leva um tempo para aparecer. Voc pode configurar
esse delay usando a propriedade DisplayAfter. O valor padro desta propriedade
500 milissegundos.
captulo
Voc tambm pode adicionar dentro do controle UpdateProgress o cdigo HTML, 4
para a exibio de uma imagem, por exemplo.
11. Selecione o UpdateProgress1 e, na janela Properties, localize a propriedade

DynamicLayout (Figura 4.8).
Figura 4.8.
Quando a propriedade DynamicLayout tem o valor true, o controle UpdatePro-

gress no utiliza nenhum espao na pgina at que seja necessrio. True o valor
padro. Se voc executar sua aplicao, vai perceber que sempre que o texto Aguar-
de... exibido o restante da pgina movido para baixo, e quando ele desaparece o
contedo volta sua posio original.
Se a propriedade DynamicLayout tiver o valor false, o contedo no vai ser mo-
vido porque o UpdateProgress j vai estar ocupando o espao necessrio na pgina,
estando apenas com sua visibilidade oculta.
12. Localize agora na janela Properties a propriedade AssociatedUpdatePanelID.

Esta propriedade usada quando voc quer associar um UpdatePanel especfico ao
UpdateProgress em questo. Selecione UpdatePanel1 para esta propriedade, como
Figura 4.9.
13. Adicione mais um UpdateProgress na pgina, logo depois do UpdateProgress1,

e modifique o texto de cada UpdateProgress, conforme a Figura 4.10:
Figura 4.10.
14. Associe o UpdateProgress2 ao UpdatePanel2 usando a propriedade Associa-

tedUpdatePanelID (Figura 4.11).
captulo
4
Figura 4.11.
15. Execute a aplicao e perceba que agora, para cada UpdatePanel, exibido
um texto diferente de acordo com o UpdateProgress associado.
Voc deve ter compreendido agora que, ao fazer uma chamada assncrona no
momento que outra j est sendo executada, por padro, a nova chamada execu-
tada, cancelando a antiga.
Para finalizar, vamos demonstrar o uso do UpdateProgress, dentro do Update-
Panel. Para isso:
1. Arraste o UpdateProgress1 para dentro do UpdatePanel1, como mostra a

Figura 4.12:
Figura 4.12.
2. Para finalizar, execute e teste a aplicao.
Agora voc j sabe como utilizar o controle UpdateProgress em suas aplicaes.

claro que voc pode e vai utilizar bem mais recursos ou controles em suas aplica-
es do que os que foram usados nos exemplos do livro, mas as operaes sero as
mesmas ou parecidas.
Captulo 5
O controle Timer
O controle Timer permite a atualizao da pgina em intervalos de tempo de-
finidos.
Neste Captulo, faremos uma prtica onde voc entender o que , e como utilizar
o controle Timer.
1. Crie uma nova aplicao usando o Template ASP.NET AJAX - Enabled Web Site
chamada Timer, como mostra a Figura 5.1. Neste exemplo, usarei a linguagem C#.
Figura 5.1.
2. Verifique se o controle ScriptManager j est adicionado na pgina, caso no

esteja, adicione o mesmo utilizando a guia AJAX Extensions na Toolbox.
3. Adicione um controle UpdatePanel na pgina.
4. Dentro deste UpdatePanel, adicione um Label e um controle Timer. O controle

Timer est localizado na guia AJAX Extensions na Toolbox. Organize-os como a
imagem a seguir:
captulo
5
Figura 5.2.
5. D um clique duplo sobre o controle Timer1 e, no procedimento de evento

criado Timer1_Tick, digite o seguinte cdigo:
Label1.Text = Atualizado em: + DateTime.Now.ToString();
Em VB.NET, o cdigo quase o mesmo apenas sem o ponto-e-vrgula, como

segue:
Label1.Text = Atualizado em: + DateTime.Now.ToString()
O controle Timer 89
Figura 5.3.
O evento Tick executado no servidor sempre que o controle Timer executar

uma atualizao. Este evento semelhante ao Click do boto, mas disparado em
intervalos de tempo definidos pela propriedade Interval.
6. Selecione o controle UpdatePanel1 e, na janela Properties, localize a proprie-

dade Interval. Seu valor padro 60.000 milissegundos, ou seja, 60 segundos ou 1
minuto. Altere este valor para 3.000 milissegundos (trs segundos), como mostra a
Figura 5.4:
Figura 5.4.
OBSERVAO
Quanto menor o intervalo de tempo, mais solicitaes o controle efetuar ao

servidor, aumentando o trfego de rede e o consumo de banda. Procure utilizar
o maior intervalo de tempo possvel para o contexto de suas aplicaes.
7. Execute e teste sua aplicao. Perceba que a aproximadamente cada trs se-
gundos atualizada a data e a hora no Label1.
Quando digo aproximadamente, isso mesmo. Voc vai entender por que
agora:
captulo
5
8. Adicione o seguinte cdigo dentro do procedimento de evento Timer1_Tick,
como mostra a Figura 5.5 logo a seguir:
Em VB.NET, o cdigo quase o mesmo apenas sem o ponto-e-vrgula, como

segue:
Figura 5.5.
O controle Timer 91
Este cdigo no novidade para voc a esta altura do livro. Novamente, vamos
retardar um pouco o processamento do mtodo por motivos didticos.
9. Execute sua aplicao. Perceba que a atualizao executada a cada seis se-
gundos, e no trs como configuramos na propriedade Interval.
Isso acontece sempre que o controle Timer estiver dentro do UpdatePanel. A
contagem iniciada sempre que a antiga solicitao finalizada. Como no nosso
exemplo, este tempo de trs segundos, ele foi somado ao tempo do controle Timer.
Mas, em nossas aplicaes dificilmente, sabemos o tempo exato que vai levar uma
atualizao assncrona porque ela depende do volume de dados que est sendo tra-
fegado e da utilizao de banda.
10. Com o objetivo de realizar a atualizao a exatamente cada trs segundos, vamos
arrastar o controle Timer1 para fora do UpdatePanel, como mostra a Figura 5.6:
Figura 5.6.
11. Como um controle qualquer, como um Button, por exemplo, para que o con-
trole Timer efetue uma chamada de atualizao assncrona em um UpdatePanel
necessrio associ-los utilizando Trigger. Para isto, selecione o UpdatePanel e clique
sobre a propriedade Triggers. Na janela UpdatePanelTrigger, adicione uma AsyncPost
Back Trigger para o controle Timer1 e o evento Tick, como mostra a Figura 5.7:
captulo
5
Figura 5.7.
12. Execute sua aplicao. Agora sim, a cada exatamente trs segundos a atuali-
zao efetuada. Fique atento, visualize a seguinte circunstncia:
O controle Timer efetua uma atualizao assncrona a cada trs segundos. Mas
uma das atualizaes demora mais do que trs segundos para ser finalizada. Ento,
antes que a atualizao acabe iniciada uma outra. O que acontece com a primeira
que no acabou ainda? A resposta : a primeira atualizao, a que no finalizou
ainda, terminada e a nova iniciada.
Segue o cdigo HTML do controle UpdatePanel1; atente para a propriedade
Trigger sendo configurada:

<ContentTemplate>
<asp:Label ID =Label1 runat=server Text=Label></
asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID =Timer1
EventName=Tick />
</Triggers>
</asp:UpdatePanel>
13. Pare a execuo da sua aplicao e vamos agora compreender como trabalhar
com mltiplos UpdatePanel.
O controle Timer 93
14. Adicione mais um UpdatePanel e um Label dentro do mesmo, como mostra
a Figura 5.8:
Figura 5.8.
15. Configure a propriedade UpdateMode dos controles UpdatePanel1 e Upda-

tePanel2 como Conditional.
16. Para o UpdatePanel2, adicione uma AsyncPostBack Trigger para o controle

Timer1 e o evento Tick.
17. Adicione o cdigo a seguir no procedimento Timer1_Tick, como mostra a

Figura 5.9 logo a seguir:
Label2.Text = Atualizado em: + DateTime.Now.ToString();
captulo
5
Figura 5.9.
18. Execute sua aplicao. Agora, a cada trs segundos ambos UpdatePanel sero
atualizados usando apenas um nico controle Timer.
Mas e se voc precisar atualizar cada um dos UpdatePanel em intervalos de tempo
diferentes? Para responder esta pergunta, continuamos nosso exemplo.
19. Adicione mais um controle Timer, como mostra a figura a seguir:
Figura 5.10.
O controle Timer 95
20. Modifique a propriedade Trigger do UpdatePanel2 para o controle Timer2,
Figura 5.11.
21. D um clique duplo sobre o controle Timer2. Mova o cdigo que atualiza o
Label2 para dentro do mesmo, como mostra a Figura 5.12:
Figura 5.12.
22. Altere a propriedade Interval do controle Timer2 para 5.000 (cinco segundos)
(Figura 5.13).
captulo
5
Figura 5.13.
23. Execute sua aplicao. Agora, o UpdatePanel1 atualizado a cada trs se-
gundos e o UpdatePanel2 atualizado a cada cinco segundos.
Com esse exemplo concludo, voc capaz de utilizar o controle Timer em suas
aplicaes AJAX ASP.NET.
O controle Timer 97
Captulo 6
A classe PageRequestManager
At agora, em todos os nossos exemplos no usamos Javascript ou DOM, mas
eles podem ser necessrios nas seguintes circunstncias:
controlar como mltiplas atualizaes assncronas so processadas. Por padro,
a ltima atualizao sobrepe primeira, mas podemos controlar isso usando
Javascript e DOM;
disponibilizar informaes sobre a atualizao assncrona que est sendo exe-
cutada. Isso melhora a experincia do usurio com a pgina, principalmente
quando temos mltiplos controles UpdatePanel;
possibilidade de cancelar uma atualizao assncrona enquanto a mesma
processada;
exibir mensagens de erro customizadas;
enviar informaes para o servidor de controle que no est sendo usado na
atualizao assncrona. Um exemplo seria enviar para o servidor o valor de um
TextBox que est fora de um UpdatePanel que est sendo processado. Isto per-
mite que o valor do TextBox seja utilizado no cdigo que est sendo processado
no servidor, e influencia o resultado da atualizao assncrona.
A classe PageRequestManager disponibiliza no cliente (por ser uma classe em

Javascript) um modelo de eventos semelhante ao modelo de eventos usado no servidor
para uma aplicao ASP.NET. Esta classe possui mtodos, propriedades e eventos
que permitem que voc customize a atualizao assncrona utilizando Javascript e
DOM. Para conhecer melhor o Javascript e o DOM consulte os Apndices A e B.
Neste Captulo, faremos uma prtica que o ensinar a:

trabalhar com os eventos da classe PageRequestManager;
parar uma atualizao assncrona.
Site chamada PageRequestManager, como mostra imagem a seguir. Neste exemplo,
usarei a linguagem C#.
Figura 6.1.

2. Verifique se o controle ScriptManager j est adicionado pgina; caso no
esteja, adicione o mesmo utilizando a guia AJAX Extensions na Toolbox.
3. Adicione um controle UpdatePanel na pgina. Dentro deste controle, adicione

um Label e um Button.
4. Adicione um controle UpdateProgress e, dentro dele, digite o texto Atualizan-

do...
5. Organize os controles na pgina, como mostra a Figura 6.2:
captulo
6
Figura 6.2.
6. D um clique duplo sobre o Button1 e digite o seguinte cdigo para o proce-

dimento de evento Button1_Click:
Label1.Text = DateTime.Now.ToString();
Em VB.NET, o cdigo diferente apenas por no ter o ponto-e-vrgula no

final.
A classe PageRequestManager 101

Figura 6.3.
7. Execute e teste sua aplicao (Figura 6.4).
Figura 6.4.

At agora, nenhuma novidade. Este um exemplo semelhante aos que fizemos
at aqui. Mas entenda que como o ciclo de vida de uma pgina ASP.NET possui uma
srie de eventos que so executados consecutivamente, nas atualizaes assncronas
tambm temos alguns destes tipos de eventos. Vamos agora conhecer e saber como
utilizar estes eventos em nossas aplicaes AJAX ASP.NET .
8. V at o cdigo HTML da pgina. Para isto, clique no boto Source.
9. Localize a seguinte tag:
<asp:ScriptManager ID =ScriptManager1 runat=server />
Esta tag representa o controle ScriptManager que est adicionado nossa pgina.
10. Logo abaixo da tag do controle ScriptManager, digite o seguinte cdigo:

captulo
6
<script type=text/javascript>
Sys.WebForms.PageRequestManager.getInstance().add _ initializeReque
st(Exibir);
function Exibir(){
alert(InitializeRequest);
}
</script>
Seu cdigo HTML deve estar assim (Figura 6.5):
Figura 6.5.

Esse um bloco de cdigo Javascript.
A funo Exibir() exibe a mensagem InitializeRequest usando o
comando Javascript Alert().
A seguinte linha de cdigo recupera uma instncia da classe PageRequestManager
e adiciona o mtodo Exibir() como manipulador do evento initializeRequest.
Sys.WebForms.PageRequestManager.getInstance().add _ initializeReque
st(Exibir);
Vamos executar nosso exemplo para compreender melhor o que este bloco faz.
11. Execute sua aplicao. Ao clicar no boto, exibida a seguinte mensagem:
Figura 6.6.
Isso quer dizer que quando a requisio assncrona foi iniciada, ou seja, quando o
evento initializeRequest foi disparado, o mtodo Exibir() foi executado. Voc pode
e deve criar suas prprias funes para fazer uso deste evento nos seus programas.
Para compreender melhor sobre Javascript e DOM, consulte os Apndices A e B.
12. Modifique o cdigo Javascript criado at agora para o seguinte:
var prm = Sys.WebForms.PageRequestManager.
getInstance();
prm.add _ initializeRequest(Exibir);
function Exibir(){
}
</script>
Este cdigo faz a mesma coisa que o anterior, mas separa um pouco melhor o
cdigo, deixando-o mais claro e legvel, facilitando assim a manipulao de outros
eventos, como faremos a seguir. Nele criamos uma varivel chamada prm e atribumos
a ela a instncia da classe PageRequestManager. Para isto, usamos o mtodo getIns-
tance(). Isso facilita o uso dos eventos porque usamos a varivel com a instncia
do mtodo para atribuir o mtodo Exibir() ao evento initializeRequest.

Voc no pode criar uma instncia da classe PageRequestManager diretamente.
Esta classe est sempre disponvel quando o controle ScriptManager e o Update-
Panel esto na sua pgina realizando atualizao assncrona. Por isto, sempre que
voc precisar utilizar esta classe deve recuperar sua instncia usando o mtodo
getInstance().
Seu cdigo HTML deve estar assim (Figura 6.7):
captulo
6
Figura 6.7.
13. Vamos conhecer um outro evento: o beginRequest. Digite o seguinte cdigo

dentro do script em Javascript logo abaixo da funo Exibir():
prm.add _ beginRequest(Exibir2);
function Exibir2(){
alert(BeginRequest);
}
Este cdigo muito semelhante ao outro que acabamos de conhecer, apenas

estamos usando outro evento que executado aps o evento initializeRequest.

Seu cdigo HTML deve estar assim:
Figura 6.8.
14. Execute e teste sua aplicao. Agora aps o evento initializeRequest execu-
tado o evento beginRequest, como mostra a Figura 6.9:
Figura 6.9.
Os prximos trs eventos que so executados sempre que uma solicitao assn-
crona executada so os eventos: pageLoading, pageLoaded e endRequest. Vamos
demonstr-los:
15. Digite o seguinte cdigo logo abaixo da funo Exibir2():

prm.add _ pageLoading(Exibir3);
function Exibir3(){
alert(PageLoading);
}
prm.add _ pageLoaded(Exibir4);
function Exibir4(){
alert(PageLoaded);
}
prm.add _ endRequest(Exibir5);
function Exibir5(){
alert(EndRequest);
}
Seu script em Javascript deve estar assim:
var prm = Sys.WebForms.PageRequestManager.
captulo
getInstance();
prm.add _ initializeRequest(Exibir); 6
function Exibir(){
}
prm.add _ beginRequest(Exibir2);
function Exibir2(){
alert(BeginRequest);
}
prm.add _ pageLoading(Exibir3);
function Exibir3(){
alert(PageLoading);
}
prm.add _ pageLoaded(Exibir4);
function Exibir4(){
alert(PageLoaded);
}
prm.add _ endRequest(Exibir5);
function Exibir5(){
alert(EndRequest);
}
</script>
16. Execute sua aplicao. Agora, para cada evento, voc ter uma mensagem
exibida com o nome do mesmo. Isto demonstra claramente a ordem que os eventos
so executados e permite que voc escolha qual evento ser usado em suas aplicaes
de acordo com sua necessidade.

Voc tambm deve ter notado que o evento pageLoaded foi executado logo que
a pgina foi aberta sem que nenhuma atualizao assncrona tenha sido disparada.
Esse o nico evento que disparado em uma atualizao sncrona tambm.
17. Mude o cdigo da funo Exibir() para o seguinte:
function Exibir(sender, args){

alert(args.get _ postBackElement().id);
}
18. Execute sua aplicao e teste.
Perceba que agora, no mtodo initializeRequest, o identificador, ou seja o ID do

boto, foi exibido (Figura 6.10). O mtodo get _ postBackElement() permite
que voc recupere uma instncia do objeto que executou uma solicitao assncro-
na, e a partir da voc poder usar o DOM e o Javascript para manipul-lo no lado
cliente.
Figura 6.10.
Avalie o seguinte cdigo para a funo Exibir():
function Exibir(sender, args){

var obj = args.get _ postBackElement();
alert(obj.id);
}
Aqui utilizamos o mtodo get _ postBackElement() para recuperar o objeto

e atribuir o mesmo varivel obj, que facilita o uso do mesmo. Este cdigo faz o
mesmo que o anterior, s que de forma mais clara e organizada.
Vamos agora conhecer o mtodo abortPostBack(), que pra a execuo de
uma atualizao assncrona.
19. Localize a guia HTML na barra de ferramentas e adicione um controle Button

dentro do UpdateProgress, como mostra a Figura 6.11:

captulo
6
Figura 6.11.
Foi utilizado um controle HTML porque este boto s ser utilizado no lado
cliente.
20. Selecione esse Button e mude a sua propriedade Value para Cancelar, como
Figura 6.12.

21. Adicione o cdigo a seguir dentro do script em Javascript, como mostra a
prxima imagem:
function Cancelar(){
prm.abortPostBack();
}
Figura 6.13.
Este cdigo simples e demonstra claramente como utilizar o mtodo abort-

PostBack(). Lembre-se que prm uma varivel que tem uma instncia da classe
PageRequestManager.
22. Ainda no HTML, localize o cdigo do Button que est dentro do UpdatePro-
gress e modifique-o para o seguinte:
<input id=Button2 type=button value=Cancelar onclick=Cancelar()

/>
A modificao foi simples, apenas adicionamos o evento onclick, que chama

a funo Cancelar().

A seguir (Figura 6.14), a modificao no cdigo HTML:
captulo
6
Figura 6.14.
23. Execute e teste sua aplicao. Agora, se voc clicar em Cancelar, a atualizao
parada imediatamente (Figura 6.15).
Figura 6.15.

Para finalizar, quero que voc conhea a propriedade isInAsyncPostBack. Ela
contm o valor true, se a atualizao ou PostBack que est sendo efetuado assn-
crono e tm o valor false, se a atualizao for sncrona. Vamos utiliz-la:
24. Altere o cdigo da funo Exibir4() para a seguinte:
function Exibir4(){
if (prm.get _ isInAsyncPostBack()){
alert(PageLoaded);
}
}
Aqui, fizemos uso do mtodo get _ isInSyncPostBack para recuperar o valor

da propriedade isInAsyncPostBack da classe PageRequestManager que est sendo
referenciada pela varivel prm. Ento, se o valor for true, a mensagem do mtodo
alert() ser exibida, se o valor for false, no.
25. Execute e teste sua aplicao novamente.

Perceba que agora ao iniciar a aplicao, a mensagem que estava sendo exibida
pelo evento PageLoaded no foi mais. Isso porque na funo Exibir4() que
utilizada por esse evento estamos verificando se a atualizao assncrona, e, nes-
se caso, o valor false. J ao usar a atualizao assncrona, a mensagem exibida
normalmente.

Captulo 7
Usando o AJAX ASP.NET em aplicaes j existentes
Para usar o AJAX ASP.NET em uma aplicao j existente voc precisa fazer
algumas modificaes no arquivo Web.config.
Nos passos a seguir, vamos entender melhor na prtica quais so essas modifi-
caes:
1. Crie uma nova aplicao ASP.NET normal, utilizando o Template ASP.NET

Web Site, como mostra a Figura 7.1:
Figura 7.1.
2. Abra o arquivo Web.config.
3. Adicione o seguinte cdigo, logo abaixo da tag <configuration>:
<configSections>
<sectionGroup name =system.web.extensions type =System.
Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.
Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31
bf3856ad364e35>
<sectionGroup name=scripting type=System.Web.Configuration.
ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35>
<section name=scriptResourceHandler type=System.Web.
Configuration.ScriptingScriptResourceHandlerSection, System.Web.
bf3856ad364e35 requirePermission=false allowDefinition=Machine
ToApplication/>

<sectionGroup name =webServices type =System.Web.
Config uration.ScriptingWebSer vicesSectionGroup, Syste m.Web.
bf3856ad364e35>
<section name=jsonSerialization type=System.Web.
Config uration.ScriptingJsonSerializationSection, System.Web.
1bf3856ad364e35 requirePermission=false allowDefinition=Every
where/>
<section name=profileService type=System.Web.
Configuration.ScriptingProfileServiceSection, System.Web.Extensions,
Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35
requirePermission=false allowDefinition=MachineToApplication/>
<section name=authenticationService type=System.Web.
Configuration.ScriptingAuthenticationServiceSection, System.Web.
bf3856ad364e35 requirePermission=false allowDefinition=Machine
ToApplication/>
</sectionGroup>
</sectionGroup>
</sectionGroup>
</configSections>
captulo
Observe, na Figura 7.2 a seguir, o local exato onde o cdigo deve ser inserido:
7
Figura 7.2.
Usando o AJAX ASP.NET em aplicaes j existentes 115

Para no ser necessrio digitar todo este texto, crie uma aplicao em branco
usando o Template ASP.NET AJAX - Enabled Web Site e copie o cdigo que est
no Web.config.
Os elementos inseridos dentro da tag <configSections> criam sees e sub-
sees de configurao para a classe SystemWebExtensionsSectionGroup. Voc
configura as propriedades para estas sees usando o elemento <system.web.
extensions>.
4. Adicione o seguinte cdigo, logo abaixo da tag <pages>:
<controls>
<add tagPrefix=asp namespace=System.Web.UI
assembly=System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35/>
</controls>
Observe, na Figura 7.3 a seguir, o local exato onde o cdigo deve ser inserido:
Figura 7.3.
O elemento <controls> registra os namespaces AJAX ASP.NET, no assembly

System.Web.Extensions e mapeia estes namespaces para serem usados utilizando a tag
asp, como neste exemplo em que registramos o controle ScriptManager na pgina:
<asp:ScriptManager ID =ScriptManager1 runat=server>

</asp:ScriptManager>

5. Adicione o seguinte cdigo, logo abaixo da tag <compilation>:
<assemblies>
<add assembly =System.Web.Extensions,
Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e
35/>
</assemblies>
</compilation>
<httpHandlers>
<remove verb=* path=*.asmx/>
<add verb=* path=*.asmx validate=false
type=System.Web.Script.Services.ScriptHandlerFactory, System.Web.
bf3856ad364e35/>
< a d d v e r b = * p a t h = * _ A p p S e r v i c e.
a x d v a l id at e = fa l s e ty p e = Sy s t e m.W e b.Sc r i p t.S e r v ic e s.
ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35/>
<add verb =GET,HEAD path =ScriptResource.
axd type=System.Web.Handlers.ScriptResourceHandler, System.Web.
bf3856ad364e35 validate=false/>
</httpHandlers>
captulo
<httpModules>
<add name =ScriptModule type =System.Web. 7
Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35/>
</httpModules>
O elemento <assemblies> registra o assembly System.Web.Extensions. O

elemento <httpHandlers> adiciona os novos manipuladores de eventos para as
requisies via script. O elemento <httpModules> define os mdulos HTTP que
so utilizados em aplicaes AJAX ASP.NET .
Observe na Figura 7.4 a seguir, o local exato onde o cdigo deve ser inserido:
Usando o AJAX ASP.NET em aplicaes j existentes 117

Figura 7.4.
Observe na imagem que no cdigo anterior tambm temos uma leve mudana na
tag <compilation>. Precisamos retirar a barra que encerra essa tag para inserir a
tag <assemblies>. A tag <compilation> fica assim:
<compilation debug=false strict=false explicit=true >
Essas so as modificaes necessrias no Web.config. No necessria nenhuma

outra modificao.
Agora, adicione os controles AJAX ASP.NET necessrios na sua aplicao. Lem-
bre-se de adicionar o controle ScriptManager em todas as pginas que for utilizar
o AJAX ASP.NET.

Captulo 8
Usando Web Services em suas aplicaes AJAX ASP.NET
Quando utilizamos Web Services, ns temos o desenvolvimento voltado para o
navegador (Client-Centric). At agora, utilizamos nossas aplicaes com a maior
parte da lgica voltada para o servidor (Server-Centric). Os Web Services transmitem
dados em XML e apenas permite o trfego de dados que tenham sido solicitados.
No entanto, para manipular estes dados, ou seja, trat-los, format-los e exibi-los,
precisaremos utilizar Javascript aliado ao DOM.
Neste Captulo, vou concentrar em como tornar seu Web Service disponvel em
uma aplicao AJAX ASP.NET, e como us-lo em suas aplicaes. Para entender
mais sobre Javascript e DOM, consulte os Apndices A e B.
Vamos iniciar o nosso exemplo prtico para entendermos os conceitos propostos.
Site chamada Web Services, como mostra a Figura 8.1. Neste exemplo, usarei a
linguagem VB.NET.
Figura 8.1.
Vamos agora adicionar um Web Service nossa aplicao para isso:
2. Clique com o boto direito sobre o nome do projeto na janela Solution Explorer
e selecione Add New Item.
3. Em Templates, selecione Web Service. Vamos alterar o nome de nosso Web

Service. Para isto, em Name digite Calcular.asmx, para que seja criado um arquivo

de cdigo separado para o Web Service. Selecione a opo Place code in separate
file, como mostra a Figura 8.2 a seguir:
Figura 8.2.
4. Clique em Add.
captulo
8
5. Para permitir que o Web Service seja acessado por script, voc precisa adicionar
o atributo ScriptServiceAttribute classe do mesmo. Para isto, adicione o seguinte
atributo acima do nome da classe:
<System.Web.Script.Services.ScriptService()> _
Em C#:
[System.Web.Script.Services.ScriptService]
O atributo ScriptService est localizado no namespace System.Web.Script.Ser-

vices. Se voc importar este namespace no Web Service, poder fazer referncia ao
atributo ScriptService implicitamente desta forma:
<ScriptService()> _
Usando Web Services em suas aplicaes AJAX ASP.NET 121

Em C#:
[ScriptService]
6. Substitua a funo HelloWorld que j est criada no Web Service pela funo
Somar. Segue o cdigo:
<WebMethod()> _
Public Function Somar(ByVal a As Integer, ByVal b As Integer) As
String
Return a + b
End Function
Em C#:
[WebMethod]
public string Somar(int a, int b)
{
return Convert.ToString(a + b);
}
Seu painel de cdigo do Web Service deve estar assim (Figura 8.3):
Figura 8.3.
O atributo WebMethod precisa estar em todos os mtodos do Web Service que

estiverem disponveis para serem acessados remotamente.

7. Vamos testar nosso Web Service. Para isto, clique com o boto direito sobre
o mesmo na janela Solution Explorer e selecione View in Browser, como mostra a
Figura 8.4:
Figura 8.4.
exibida a seguinte pgina no seu navegador (Figura 8.5) listando os mtodos que es-
tiverem disponveis para o acesso remoto. No nosso exemplo, apenas o mtodo Somar. captulo
8
Figura 8.5.

8. Clique em Somar.
Agora voc pode testar o mtodo Somar, como mostra a Figura 8.6 seguinte:
Figura 8.6.
9. Teste seu Web Service digitando um nmero para cada caixa de texto e clicando
em Chamar. O resultado exibido em XML (Figura 8.7).
Figura 8.7.

Todos os dados de um Web Service so transmitidos usando o padro XML.
10. Agora que nosso Web Service j est criado, volte para a pgina Default.aspx
e verifique se o controle ScriptManager j est adicionado pgina; caso no esteja,
adicione o mesmo utilizando a guia AJAX Extensions na Toolbox.
Para utilizarmos um Web Service, ou seja, para conseguirmos chamar seus m-
todos em nossa pgina, precisamos ter uma classe em Javascript com um mtodo
correspondente ao que em questo.
Esta classe vai efetuar a chamada do Web Service e manipular a transferncia
de dados. O AJAX ASP.NET, por meio do controle ScriptManager, cria esta classe
(conhecida como classe Proxy) em Javascript automaticamente, poupando nosso
trabalho e tempo.
11. Entretanto, para que o controle ScriptManager possa criar a classe Proxy para
o nosso Web Service precisamos fazer referncia ao mesmo no prprio controle. Para
isso, clique sobre o controle ScriptManager para selecion-lo e, na janela Properties,
localize a propriedade Services, como mostra a Figura 8.8:
captulo
8
Figura 8.8.
12. Clique sobre as reticncias (...) na propriedade Services para exibir a janela
ServiceReference e adicione o nome do arquivo do Web Service em Path, como
Figura 8.9.

A propriedade InlineScript usada para especificar se a classe Proxy deve ser
inserida na pgina como um bloco de script (se for true) ou por meio de uma requi-
sio separada (se for false). O valor false o padro. O valor false melhor quando
mltiplas pginas fazem requisio ao mesmo Web Service e se o cache do navegador
estiver habilitado. J o valor true desta propriedade pode melhorar o desempenho,
reduzindo o nmero de requisies, o que especialmente til quando temos muitas
referncias ao Web Service em uma mesma pgina e poucas nas demais. No nosso
exemplo, no vamos alterar esta propriedade.
Se voc verificar o cdigo HTML da sua pgina, o controle ScriptManager tem
agora uma nova tag chamada Services com referncia para o Web Service, como
mostra o cdigo a seguir:
<asp:ScriptManager ID =ScriptManager1 runat=server >

<Services>
<asp:ServiceReference Path=calcular.asmx />
</Services>
13. Na Toolbox, localize a guia HTML, como mostra a Figura 8.10:
Figura 8.10.
Com voc aprendeu no comeo deste Captulo com o uso dos Web Services ns temos
o desenvolvimento orientado para o navegador. Por isso, os Server Controls do ASP.NET
no so muito teis nestas ocasies e precisamos usar mais Javascript e DOM.
14. Adicione os seguintes controles HTML pgina Default.aspx:

2 Input (Text);
1 Input (Button).

15. Mude a propriedade Value do boto para Calcular.
16. Adicione tambm um controle Label, que ser usado apenas para apresentar
o resultado.
17. Organize os controles, como a Figura 8.11 a seguir:
captulo
Figura 8.11. 8
18. D um clique duplo sobre Button1.
Por no ser um Web Control, este boto cria automaticamente uma funo para
manipular o seu evento onclick em Javascript, como mostra o seguinte cdigo:
<script language=javascript type=text/javascript>


</script>
Esta funo tambm j referenciada no cdigo HTML do boto no evento

onclick para que o navegador possa fazer a chamada corretamente, como mostra o
seguinte cdigo:

< i n p u t i d = B u t t o n 1 t y p e = b u t t o n v a l u e = C a l c u l a r
language=javascript onclick=return Button1 _ onclick() />
Voc poderia ter criado esta funo sozinho e feito a referncia no boto, mas o
Visual Studio 2005 ajuda nessa situao tambm, poupando um pouco de trabalho.
Na verdade, o Visual Studio 2005 s no ajuda muito quando trabalhamos com cdigo
Javascript, mas na prxima verso desta ferramenta teremos muitas novidades que
iro aumentar muito a produtividade, quando no uso desta linguagem de script.
19. Modifique a funo Button1_onclick e adicione a funo QuandoCompleta,

como mostra o seguinte cdigo:

</script>
Seu cdigo HTML deve estar como na Figura 8.12:
Figura 8.12.

20. Execute sua aplicao. Digite um nmero em cada caixa de texto e clique no
boto Calcular. O resultado exibido como mostra a Figura 8.13:
Figura 8.13.
21. Pare a execuo de sua aplicao.
Vamos analisar o cdigo das funes Javascript para entender melhor o funcio- captulo
namento. 8
A funo chamada pelo boto a Button1_onclick. Nela, primeiramente decla-

ramos duas variveis (numero1 e numero2) que vo armazenar o valor recuperado
das caixas de texto por meio do mtodo getElementById do DOM, como mostra o
cdigo:

A seguir, na mesma funo, chamamos o mtodo Somar do Web Service passando

como parmetro os dois valores, conforme especificado na assinatura do mtodo no
Web Service, como mostra o cdigo a seguir:
Calcular.Somar(numero1,numero2, QuandoCompleta);
Perceba que, para chamar o mtodo Somar, usamos a classe Calcular que foi
criada pelo ScriptManager. Neste mtodo, passamos mais um valor, na verdade, uma

referncia a uma outra funo (a funo QuandoCompleta), que vai receber o valor
retornado pelo Web Service. Assim, enquanto o Web Service retorna o resultado, a
funo QuandoCompleta executada.
A funo QuandoCompleta recebe um parmetro. O nome criado para este
exemplo foi args, mas voc pode nome-lo como desejar. Este parmetro usado
para recuperar o valor dentro da funo.
Ainda sobre a funo QuandoCompleta, a seguinte linha de cdigo apenas en-
contra o elemento Label1 na pgina, usando o mtodo getElementById e atribui ao
mesmo o valor que est contido em args.
document.getElementById(Label1).innerText = args;
Opcionalmente, podemos criar mais duas funes Javascript para ajudar no tra-
tamento de erros em chamadas a Web Services. Estas funes podem ser passadas
como parmetro na chamada ao mtodo do Web Service, como fizemos com a funo
QuandoCompleta. Vamos compreender melhor como isso funciona seguindo com
o exemplo.
22. Adicione as seguintes funes Javascript, logo abaixo da funo Quando-

Completa:
function QuantoErro(args) {
alert(Houve um erro na chamada ao web service.);
}
function QuandoTimeOut(args) {
alert(A chamada ao servio excedeu o tempo limite.);
}
23. Altere a chamada ao mtodo Somar, passando as duas novas funes, como
mostra o cdigo a seguir:
Calcular.Somar(numero1, numero2, QuandoCompleta, QuantoErro,

QuandoTimeOut);

Figura 8.14.
24. Vamos simular um erro no nosso Web Service para ver a funo QuantoErro
em ao. Para isto, volte ao painel de cdigo do Web Service e adicione dentro do
mtodo Somar o seguinte cdigo: captulo
8
Throw New Exception(houve um erro)
Em C#:
throw new Exception(houve um erro);
Como mostra a Figura 8.15:

Figura 8.15.
O cdigo anterior apenas cria um erro ou exceo, impedindo o correto funcio-

namento do mtodo Somar.
25. Execute sua aplicao e teste. A seguinte mensagem deve ser exibida
(Figura 8.16):
Figura 8.16.
Esta mensagem foi exibida porque dentro do mtodo QuantoErro est o cdigo:
alert(Houve um erro na chamada ao web service.);
Voc pode personaliz-lo para que melhor se adapte sua aplicao a partir do
cdigo Javascript. O mtodo QuandoTimeOut executado quando o Web Service
excede o tempo de resposta.

Captulo 9
Aprofundando no uso do controle UpdatePanel
Neste Captulo voc vai aprender como utilizar o controle UpdatePanel em Mas-
ter Pages e Web Controls e de forma mais abrangente tambm vamos conhecer um
pouco mais sobre customizao de erros em aplicaes AJAX ASP.NET.
Site chamada UpdatePanelAvancado, como mostra a Figura 9.1 a seguir. Neste
exemplo, usarei a linguagem C#.
Figura 9.1.
Primeiramente, vamos adicionar uma Master Page em nosso projeto. Para isso:
2. Na janela Solution Explorer, clique com o boto direito do mouse sobre o nome
do projeto e selecione Add New Item, como mostra a Figura 9.2:
Figura 9.2.

3. Em Templates, selecione Master Page, marque Place code in separate file para
que o cdigo da pgina fique em um arquivo separado, como mostra a Figura 9.3:
Figura 9.3.
4. Clique em Add.
5. No cdigo HTML da Master Page digite o seguinte cdigo dentro da tag

<div>:
<h1>Master Page</h1>
<hr />
Deve ficar como mostra a Figura 9.4:
captulo
9
Figura 9.4.
Aprofundando no uso do controle UpdatePanel 135

Esse texto serve apenas para colocarmos algum contedo na Master Page de
forma que durante o exemplo fique claro que algum contedo da pgina est sendo
recuperado da pgina Master Page. claro que, em suas aplicaes, a Master Page
ter bem mais contedo, como imagens e at mesmo controles de menu etc.
6. V para o modo Design na Master Page, o contedo das pginas sero execu-
tados em lugar do ContentPlaceHolder, como mostra a Figura 9.5:
Figura 9.5.
7. Vamos agora excluir a pgina Default.aspx porque ela no faz referncia

Master Page. Para isto, clique com o boto direito sobre a pgina Default.aspx na
janela Solution Explorer e selecione Delete, como mostra a Figura 9.6 a seguir:

Figura 9.6.
Voc pode adicionar a referncia pgina Master Page, no cdigo HTML de

uma pgina ASP.NET sem precisar excluir o arquivo caso seja necessrio. Para isto,
voc deve adicionar o atributo MasterPageFile=~/MasterPage.master
diretiva @Page da pgina em questo e colocar o contedo da pgina dentro da
captulo
tag Content. Para simplificar, no exemplo apenas exclumos a pgina. Vamos agora 9
adicionar uma nova com referncia Master Page.
8. Clique com o boto direito sobre o nome do projeto e selecione Add New Item.
9. Em Templates, selecione Web Form. O nome do arquivo deve ser Default.aspx

e devem estar marcadas as opes Place code in separate file e Select master page,

Figura 9.7.
A opo Select master page faz com que uma nova caixa de dilogo seja exibida
aps o clique no boto Add, permitindo a escolha de uma Master Page.
10. Clique em Add.
11. Na janela Select a Master page, selecione MasterPage.master e clique em

OK, como mostra a Figura 9.8:
Figura 9.8.
Voc pode ter mais do que uma Master Page em sua aplicao. A janela Select
a Master Page permite que voc escolha qual Master Page ser associada pgina

que voc est criando. Como no nosso exemplo o objetivo mostrar como utilizar
o UpdatePanel em aplicaes com Master Page, apenas a criao de uma ser o
suficiente.
A pgina Default.aspx deve estar semelhante Figura 9.9 a seguir:
Figura 9.9.
O contedo acinzentado deixa claro que o mesmo proveniente da Master Page.

O contedo desta pgina deve ser adicionado dentro do Content que em tempo de
execuo substitui o ContentPlaceHolder da Master Page.
12. Volte para a Master Page e arraste um controle ScriptManager na pgina

utilizando a guia AJAX Extensions na Toolbox, como mostra a Figura 9.10:
captulo
9
Figura 9.10.

Voc pode adicionar o controle ScriptManager diretamente na Master Page ou
dentro do Content apenas na pgina que for utilizar AJAX. Durante o exemplo,
vamos trabalhar das duas formas.
Quando voc adiciona o ScriptManager na Master Page, todas as pginas que
o tiverem referenciado podero utilizar o AJAX ASP.NET sem que voc precise
arrastar o controle novamente dentro delas. Ou seja, o controle estar disponvel em
todas as pginas referenciadas. Neste caso, se voc desejar que alguma das pginas
filhas no possa usar, o controle precisar fazer isso programaticamente.
Caso voc adicione o controle ScriptManager apenas na pgina, dentro do Con-
tent, nenhuma outra pgina poder utilizar o AJAX ASP.NET; a menos, claro, que
voc tambm adicione um controle ScriptManager dentro da pgina em questo.
13. Na pgina Default.aspx, adicione um UpdatePanel e dentro dele adicione os

seguintes controles:
2 TextBox;
1 Label;
1 Button.
14. Altere a propriedade Text do Button1 para Resultado.
15. Organize os controles, como mostra a Figura 9.11 a seguir:
Figura 9.11.

16. D um clique duplo sobre o Button1 e digite o seguinte cdigo dentro do seu
procedimento de evento:
int a = Int32.Parse(TextBox1.Text);
int b = Int32.Parse(TextBox2.Text);
int res = a / b;
Label1.Text = res.ToString();
Em VB.NET:
Dim a As Integer = TextBox1.Text

Dim b As Integer = TextBox2.Text
Dim res As Integer = a / b
Label1.Text = res.ToString()
Seu painel de cdigo deve estar assim:
captulo
9
Figura 9.12.
17. Execute sua aplicao e teste. O resultado deve ser obtido de maneira assn-
crona, como se o controle ScriptManager estivesse diretamente na pgina Default.
aspx.

Veja na Figura 9.13 o resultado da aplicao:
Figura 9.13.
Se voc desejar desabilitar a atualizao assncrona apenas em uma pgina, ser

necessrio usar o evento Page_Init da pgina em questo para iniciar uma instncia
do ScriptManager e mudar sua propriedade EnablePartialRendering para false.
Para isso:
18. Adicione o seguinte cdigo dentro da classe da pgina Default.aspx:
protected void Page _ Init(object sender, EventArgs e)

{
ScriptManager sm = ScriptManager.GetCurrent(Page);
sm.EnablePartialRendering = false;
}
Em VB.NET:
Protected Sub Page _ Init(ByVal sender As Object, ByVal e As

System.EventArgs) Handles Me.Init
Dim sm As ScriptManager = ScriptManager.GetCurrent(Page)
sm.EnablePartialRendering = False
End Sub
Seu painel de cdigo deve estar como na Figura 9.14:

Figura 9.14.
19. Execute e teste sua aplicao. Agora a atualizao no deve ser assncrona e
a pgina deve ser atualizada completamente a cada clique no boto.
20. Remova o procedimento Page_Init ou comente o mesmo para que possamos

utilizar a atualizao assncrona novamente na pgina Default.aspx.
21. Remova o controle ScriptManager da Master Page e adicione o mesmo na

pgina Default.aspx, como mostra a Figura 9.15 a seguir:
captulo
9
Figura 9.15.

22. Execute e teste sua aplicao. Ela deve funcionar normalmente.
Figura 9.16.
Vamos agora compreender um pouco melhor como customizar erros em nossas

aplicaes AJAX ASP.NET.
23. Para gerar erro em nossa aplicao, basta solicitar uma diviso por zero, como
Figura 9.17.
Uma exceo (erro) gerada, como mostra a seguinte mensagem (Figura

9.18):

Figura 9.18.
24. Agora, execute a aplicao sem o Debug para que o mesmo no intercepte e
faa a manipulao do erro. Para isto, voc pode clicar em Ctrl + F5 ou, no menu
Debug, selecionar Start Without Debugging.
25. Faa novamente uma diviso por zero. O AJAX ASP.NET intercepta e trata o
erro, mas a mensagem (Figura 9.19) genrica e pode no ser agradvel ao usurio
final do seu projeto.
Figura 9.19.
Vamos agora personalizar essa mensagem.

captulo
9
26. Altere o cdigo do procedimento de evento Button1_Click para o seguinte:
try
{
int a = Int32.Parse(TextBox1.Text);
int b = Int32.Parse(TextBox2.Text);
int res = a / b;
Label1.Text = res.ToString();
}
catch (DivideByZeroException)
{
throw new Exception(Voc no pode efetuar uma diviso de
+
TextBox1.Text + por + TextBox2.Text);
}

Em VB.NET:
Try
Dim a As Integer = TextBox1.Text
Dim b As Integer = TextBox2.Text
Dim res As Integer = a / b
Label1.Text = res.ToString()
Catch ex As Exception
Throw New Exception(Voc no pode efetuar uma diviso
de & TextBox1.Text & por & TextBox2.Text)
End Try
Seu painel de cdigo deve estar como na Figura 9.20:
Figura 9.20.
Apenas adicionamos o bloco de tratamento de erros Try...Catch...Finally com

o objetivo de verificar qual erro est ocorrendo e emitir assim, a mensagem de erro
adequada. Voc pode ter vrios catch (como voc j deve fazer em suas aplicaes
ASP.NET) em seus blocos de tratamento de erros verificando as possibilidades de
erros e tratando-os de forma adequada.
27. Agora, novamente execute a aplicao sem o Debug para que o mesmo no
intercepte e faa a manipulao do erro. Para isto, voc pode teclar Ctrl + F5 ou no
menu Debug selecionar Start Without Debugging.

28. Tente novamente fazer uma diviso por zero. A seguinte mensagem perso-
nalizada deve ser exibida:
Figura 9.21.
29. Clique em OK e pare a execuo do projeto.
Agora voc j sabe como criar mensagens de erros personalizadas para suas apli-
caes. Voc pode usar todo o poder do bloco de tratamento de erros Try...Cath...
Finally como usa atualmente em suas aplicaes ASP.NET.
Para finalizar, neste Captulo vamos estudar o uso de Web User Controls em
nossas aplicaes AJAX ASP.NET.
30. Clique com o boto direito sobre o nome do projeto e selecione Add New
Item.
31. Agora, em Templates, selecione Web User Control. Mude o nome do controle
para calendario.ascx. Certifique-se que esteja marcada a opo Place code in sepa-
rate file e clique em Add.
captulo
9
Figura 9.22.

32. Na Toolbox, localize o controle calendar e adicione o mesmo dentro do Web
User Control calendario.aspx, como mostra a Figura 9.23:
Figura 9.23.
33. Adicione um UpdatePanel na pgina Default.aspx e arraste o Web User Control

calendario.aspx para dentro dele, como mostra a Figura 9.24:
Figura 9.24.

Figura 9.25.
Ao clicar no calendrio, os dias so alterados assincronamente sem que a pgina

seja completamente atualizada.
Para utilizar um Web User Control com o AJAX ASP.NET em sua aplicao,
voc pode adicionar o mesmo dentro de um UpdatePanel, como acabamos de fazer,
ou j adicionar o UpdatePanel dentro do controle.
Vamos criar um novo Web User Control para mostrarmos como funciona a se-
gunda opo.
captulo
35. Adicione um segundo Web User Control ao projeto chamado ExibirData.ascx, 9
Figura 9.26.

36. Dentro deste Web User Control, adicione um UpdatePanel com um Label
dentro do mesmo, como mostra a Figura 9.27:
Figura 9.27.
37. No procedimento de evento Page_Load do Web User Control ExibirData.

ascx adicione o seguinte cdigo:
Label1.Text = DateTime.Now.ToLongTimeString();
Em VB.NET:
Label1.Text = DateTime.Now.ToLongTimeString()
Veja na Figura 9.28 como deve ficar o cdigo:

Figura 9.28.
38. Adicione o Web User Control que acabamos de criar pgina Default.aspx,
captulo
9
Figura 9.29.

39. Execute e teste a aplicao.
Figura 9.30.
A hora exibida no Label como especificamos no controle. Vamos agora colocar

um boto na pgina Default.aspx que, ao ser clicado, atualiza assincronamente a
hora do controle ExibirData.ascx.
39. Adicione um Button na pgina Default.aspx, como mostra a Figura 9.31:
Figura 9.31.
40. Volte para o Web User Control ExibirData.ascx e adicione o seguinte cdigo
dentro da classe:

public UpdatePanelUpdateMode UpdateMode
{
get { return this.UpdatePanel1.UpdateMode; }
set { this.UpdatePanel1.UpdateMode = value; }
}
public void Update()

{
this.UpdatePanel1.Update();
}
Em VB.NET:
Public Property UpdateMode() As UpdatePanelUpdateMode

Get
Return Me.UpdatePanel1.UpdateMode
End Get
Set(ByVal value As UpdatePanelUpdateMode)
Me.UpdatePanel1.UpdateMode = value
End Set
End Property
Public Sub Update()

Me.UpdatePanel1.Update()
End Sub
O painel de cdigo do Web User Control deve ficar assim (Figura 9.32):
captulo
9
Figura 9.32.

O cdigo anterior torna acessvel publicamente por meio do modificador public a
propriedade UpdateMode do controle UpdatePanel1 que est no Web User Control
e o mtodo Update do mesmo controle.
41. Novamente na pgina default.aspx, selecione o Web User Control ExibirData.

ascx e, na janela Properties, localize a propriedade UpdateMode.
42. Mude a propriedade UpdateMode para Conditional, como mostra a Figura

9.33:
Figura 9.33.
Esta propriedade s est disponvel aqui porque deixamo-la pblica no Web User
Control.
43. D um clique duplo sobre o Button2 e adicione o seguinte cdigo no proce-

dimento de evento Button2_click:
this.ExibirData1.Update();
Em VB.NET:
me.ExibirData1.Update()
Veja na Figura 9.34 como deve ficar o cdigo:

Figura 9.34.
Este mtodo tambm s est disponvel porque o tornamos pblico no Web User
Control.
44. Execute e teste sua aplicao. A cada clique no boto, o controle ExibirData.
captulo
ascx atualizado, mas a pgina completamente atualizada. 9
Isso acontece porque o controle Button2 um Server Control e fora uma atuali-
zao sncrona atravs de Post. Para resolver isto, basta adicionar este Button dentro
de um UpdatePanel que esteja na pgina ou arrastar mais um UpdatePanel para a
mesma e o colocar dentro dela.
45. Adicione um UpdatePanel dentro da pgina Default.aspx e arraste o Button2

para dentro do mesmo, como mostra a Figura 9.35:

Figura 9.35.
46. Execute e teste sua aplicao. Agora, temos uma atualizao AJAX, ou seja,
assncrona sempre que o button2 clicado, fazendo uma atualizao em um Web
User Control.

Captulo 10
Aprofundando no uso de Web Services e no
desenvolvimento voltado para o navegador (Cliente-Centric)
Este captulo muito importante para quem deseja criar uma aplicao voltada
para o navegador (Client-Centric). Nele, voc aprender:
recuperar e enviar dados em forma de tipos complexos, como objetos, por
exemplo, atravs de Web Services;
usar um arquivo separado de cdigo Javascript, centralizando o cdigo no
mesmo, melhorando assim a clareza e facilitando a manuteno;
conhecer e usar o controle ScriptManagerProxy;
usar mtodos da classe da prpria pgina para comunicao em XML como
em um Web Service;
conhecer ainda mais profundamente sobre a manipulao de erros em chamadas
a Web Services.
Vamos compreender os conceitos propostos na prtica como de costume.

Para isso:
Site chamada WebServiceAvancado, como mostra a Figura 10.1 a seguir. Neste
exemplo, usarei a linguagem C#.
Figura 10.1.
Primeiramente, vamos criar uma Master Page visando futuramente apresentar

o controle ScriptManagerProxy.

2. Na janela Solution Explorer, clique com o boto direito sobre o nome do projeto
e selecione Add New Item.
3. Em Templates, selecione Master Page, certifique-se que a opo Place code in

separate file, na parte inferior esteja selecionada, como mostra a Figura 10.2:
Figura 10.2.
4. Clique em Add.
5. Arraste um controle ScriptManager na pgina Master Page utilizando a guia

AJAX Extensions na Toolbox.
OBSERVAO
captulo
10
Quando voc adiciona o ScriptManager na Master Page, todas as pginas
que a tiverem referenciado podero utilizar o AJAX ASP.NET sem que voc
precise arrastar o controle novamente dentro delas. Ou seja, o controle estar
disponvel para todas as pginas referenciadas. Quando voc adiciona o controle
ScriptManager apenas na pgina dentro do Content, nenhuma outra pgina
poder utilizar o AJAX ASP.NET; a menos, claro, que voc tambm adicione
um controle ScriptManager dentro da pgina em questo.
Aprofundando no uso de Web Services ... 159

6. No cdigo HTML da Master Page, digite o seguinte cdigo logo a seguir da
tag de fechamento do controle ScriptManager, como ilustra a Figura 10.3:
<h1>
Master Page
</h1>
<hr />
Figura 10.3.
Este texto serve apenas se colocarmos algum contedo na Master Page, de forma
que, durante o exemplo, fique claro que algum contedo est sendo recuperado da
pgina Master Page.
7. Vamos agora excluir a pgina Default.aspx criada automaticamente pelo Visual

Studio porque ela no faz referncia Master Page. Para isto, clique com o boto
direito sobre a pgina Default.aspx na janela Solution Explorer e selecione Delete.
Voc pode adicionar a referncia pgina Master Page no cdigo HTML de uma
pgina ASP.NET sem precisar excluir o arquivo caso seja necessrio. Para simplificar
nosso exemplo, apenas exclumos a pgina. Vamos agora adicionar uma nova pgina
com referncia Master Page.

8. Clique com o boto direito sobre o nome do projeto e selecione Add New
Item.
9. Em Templates selecione Web Form, o nome do arquivo deve ser Default.aspx

e devem estar marcadas as opes Place code in separate file e Select master page,
Figura 10.4.
OBSERVAO
Voc pode ter mais do que uma Master Page em sua aplicao. A janela Select
a Master Page permite que voc escolha qual Master Page ser associada
captulo
pgina que voc est criando. A opo Select master page faz com que uma 10
nova caixa de dilogo seja exibida aps o clique no boto Add, permitindo a
escolha de uma Master Page.
10. Clique em Add.
11. Na janela Select a Master page selecione MasterPage.master e clique em OK


Figura 10.5.
A nova pgina Default.aspx criada. O prximo passo adicionar um Web Ser-

vice nossa aplicao.
12. Na janela Solution Explorer clique com o boto direito sobre o nome do
projeto e selecione Add New Item.
13. Em Templates, selecione Web Service. Certifique-se que a opo Place code
in separate file esteja selecionada, como mostra a Figura 10.6:
Figura 10.6.

14. Clique em Add.
Para que voc possa compreender como transmitir e usar um tipo complexo em
suas aplicaes, vamos criar uma classe simples chamada Produto, antes de progra-
marmos o cdigo em nosso Web Service. No nosso exemplo vamos transmitir um
objeto produto por meio do nosso Web Service. Para isso:
15. Novamente, clique com o boto direito sobre o nome do projeto e selecione
Add New Item.
16. Em Templates, selecione Class e nomeie a nova classe como Produto.cs,

Se a linguagem utilizada for VB.NET, o nome da classe ser Produto.vb.
Figura 10.7.
captulo
17. Clique em Add. 10
18. Voc ento questionado se deseja adicionar o arquivo da classe em uma

pasta especialmente reservada a ele chamada App_Code. Isto uma boa prtica,
clique em Sim.
Figura 10.8.

19. Digite o seguinte cdigo dentro da classe Produto:
private String _ nome;

private String _ descricao;
private int _ quantidade;
public String Nome {

get { return _ nome; }
set { _ nome = value; }
}
public String Descricao

{
get { return _ descricao; }
set { _ descricao = value; }
}
public int Quantidade

{
get { return _ quantidade; }
set { _ quantidade = value; }
}
Em VB.NET:
Private _ nome As String

Private _ descricao As String
Private _ quantidade As Integer
Public Property Nome() As String

Get
Return _ nome
End Get
Set(ByVal value As String)
_ nome = value
End Set
End Property
Public Property Descricao() As String

Get
Return _ descricao
End Get
Set(ByVal value As String)
_ descricao = value
End Set
End Property
Public Property Quantidade() As Integer

Get
Return _ quantidade

End Get
Set(ByVal value As Integer)
_ quantidade = value
End Set
End Property
Seu painel de cdigo deve estar semelhante ao da Figura 10.9:
Figura 10.9.
Vamos agora implementar o cdigo do Web Service. Para permitir que o Web Ser- captulo
vice seja acessado via Script voc precisa adicionar o atributo ScriptServiceAttribute 10
classe do mesmo. Este atributo est no namespace System.Web.Script.Services.
20. Importe o namespace System.Web.Script.Services usando o seguinte cdigo:
using System.Web.Script.Services;
Em VB.NET:
Imports System.Web.Script.Services

21. Adicione a referncia ao atributo logo acima da declarao da classe com o
cdigo:
[ScriptService]
Em VB.NET:
<ScriptService()> _
Se voc desejar, poder fazer a referncia completa explicitamente, usando o

seguinte cdigo:
[System.Web.Script.Services.ScriptService]
Em VB.NET:
<System.Web.Script.Services.ScriptService()> _
Dessa forma, voc no precisa fazer referncia ao namespace no topo da

classe.
22. Adicione o mtodo RecuperaProduto dentro da classe do Web Service, usando

o seguinte cdigo:
[WebMethod]
public Produto RecuperaProduto()
{
Produto p = new Produto();
p.Nome = Produto1;
p.Descricao = Descricao;
p.Quantidade = 30;
return p;
}
Em VB.NET:
<WebMethod()> _
Public Function RecuperaProduto() As Produto
Dim p As New Produto
p.Nome = Produto1
p.Descricao = Descricao
p.Quantidade = 30
Return p
End Function

Seu painel de cdigo deve estar semelhante Figura 10.10:
Figura 10.10.
Este um mtodo simples que retorna um objeto do tipo Produto ao molde da

classe que criamos. No cdigo, apenas criamos um objeto Produto chamado p, com
a linha a seguir:
Produto p = new Produto();
Em VB.NET: captulo
10
Dim p As New Produto
Depois, atribumos um valor a cada uma de suas propriedades:
p.Nome = Produto1;
p.Descricao = Descricao;
p.Quantidade = 30;
Em VB.NET:
p.Nome = Produto1

p.Descricao = Descricao
p.Quantidade = 30
E finalmente, retornamos o objeto utilizando o cdigo a seguir:
return p;
Em VB.NET:
Return p
Para que voc compreenda como centralizar seu cdigo Javascript em um arquivo
separado vamos criar agora um arquivo com a extenso .js.
23. Novamente, clique com o boto direito sobre o nome do projeto e selecione
Add New Item.
24. Em Templates, selecione JScript File e nomeie o arquivo como JScript.js

Figura 10.11.
25. Clique em Add.
26. Dentro do arquivo JScript.js, digite o seguinte cdigo Javascript:

WebService.RecuperaProduto(QuandoCompleta);
}
function QuandoCompleta (args) {

var nome = args.Nome;
var descricao = args.Descricao;
var quantidade = args.Quantidade;
document.getElementById(ctl00 _ ContentPlaceHolder1 _ TextBox1).
innerText = nome;
innerText = descricao;
innerText = quantidade;
}
O arquivo JScript.js deve estar semelhante ao que aparece na Figura 10.12:
captulo
10
Figura 10.12.
A maior parte deste cdigo no novidade para voc, entretanto, caso tenha d-
vidas, consulte o Captulo 8. Apenas fique atento ao parmetro args que agora um
objeto do tipo Produto que tem as mesmas propriedades que criamos no nosso Web
Service. Para recuper-los, fazemos de forma idntica a que estamos acostumados
em nossas aplicaes ASP.NET, mas dessa vez em Javascript. Veja o cdigo:

var nome = args.Nome;
var descricao = args.Descricao;
var quantidade = args.Quantidade;
27. Na pgina Default.aspx, adicione os seguintes controles:

3 TextBox;
1 Input (Button) este controle encontrado na guia HTML da Toolbox.
28. Mude a propriedade Value do Button1 para Atualizar e organize os controles,

conforme a Figura 10.13:
Figura 10.13.
Como voc viu no Captulo 8, para utilizarmos um Web Service em nossa pgina
precisamos fazer referncia ao mesmo. Isto faz com que o AJAX ASP.NET 2.0 gere
o cdigo necessrio para que usemos a classe e os mtodos do nosso Web Service
em nossas aplicaes AJAX. Para isso:
29. Na Master Page, clique sobre o controle ScriptManager e, na janela Properties,

localize a propriedade Services.
30. Clique sobre as reticncias (...) na propriedade Services para exibir a janela
ServiceReference Collection Editor e adicione o nome do arquivo do Web Service
em Path, como mostra a Figura 10.14:

Figura 10.14.
Para utilizarmos um arquivo de script Javascript (arquivo com extenso .js) em

nossa pgina, tambm precisamos fazer referncia ao mesmo utilizando o controle
ScriptManager. Para isto:
31. Clique sobre o controle ScriptManager para selecion-lo e na janela Properties

localize a propriedade Scripts, como mostra a Figura 10.15:
captulo
10
Figura 10.15.
32. Clique sobre as reticncias (...) na propriedade Scripts para exibir a janela
ScriptReference e adicione o nome do arquivo de script, como mostra a Figura
10.16:

Figura 10.16.
Se voc verificar o cdigo HTML da sua Master Page o controle ScriptManager

agora tem uma nova tag chamada Scripts com referncia para o arquivo JScript.js
como mostra o cdigo a seguir:

<Services>
<asp:ServiceReference Path=WebService.asmx
/>
</Services>
<Scripts>
<asp:ScriptReference Path=JScript.js />
</Scripts>
33. Antes de executar a aplicao, voc precisa alterar o cdigo HTML do Button1
adicionando o evento onclick com referncia funo Javascript Button1_onclick que
est no arquivo de script. Segue como deve ficar o cdigo HTML do Button1:
<input id=Button1 type=button value=Atualizar onclick=Button1 _

onclick() />
34. Execute sua aplicao. Clique no boto Atualizar. O nome do produto, descri-
o e quantidade devem preencher as caixas de texto, como mostra a Figura 10.17:

Figura 10.17.
Voc acaba de utilizar um tipo complexo em Javascript de forma simples, utili-

zando o Web Service.
Vamos agora conhecer o controle ScriptManagerProxy.
35. Volte para a pgina Master Page e apague as referncias tanto para o Web
Service quanto para o arquivo de script do controle ScriptManager. O cdigo HTML
do seu controle ScritpManager deve ficar assim:
36. Na pgina Default.aspx, adicione um controle ScriptManagerProxy utilizando

a guia AJAX Extensions na Toolbox, como mostra a Figura 10.18:
captulo
10
Figura 10.18.

37. Clique no controle ScriptManagerProxy1 para selecion-lo e na janela Pro-
perties localize as propriedade Scripts e Services, como mostra a Figura 10.19:
Figura 10.19.
38. Adicione as referncias ao Web Service e ao arquivo JScript.js ao ScriptMa-

nagerProxy, como voc faz com o controle ScriptManager.
O cdigo HTML do ScriptManagerProxy deve ficar assim:
<asp:ScriptManagerProxy ID =ScriptManagerProxy1 runat=server>

<Services>
<asp:ServiceReference Path=WebService.asmx />
</Services>
<Scripts>
<asp:ScriptReference Path=JScript.js />
</Scripts>
</asp:ScriptManagerProxy>
Como mostra a Figura 10.20:
Figura 10.20.

39. Execute e teste sua aplicao. Ela funciona normalmente.
O controle ScriptManagerProxy deve ser usado em conjunto com Master Page
quando voc precisa fazer uso de um Web Service e/ou um arquivo de script apenas
para a pgina em questo.
Se voc deixar a referncia ao Web Service no controle ScriptManager na Master
Page, todas as pginas que fizerem referncia a ela podero usar o Web Service em
questo. Mas quando voc quer que apenas uma das pginas consiga acessar um
determinado Web Service voc adiciona um ScriptManagerProxy dentro da prpria
pgina que faz a referncia.
O controle ScriptManagerProxy no substitui o controle ScriptManager. Voc
ainda precisa ter o ScriptManager na pgina por meio da Master Page, como usamos
no nosso exemplo.
Tambm pode ser til em suas aplicaes o uso do controle ScriptManagerProxy
associado a Web User Control.
Voc pode usar um mtodo da prpria pgina ASP.NET como um WebMethod.
Neste caso, voc no precisa criar um arquivo separado para o Web Service com
exteso .asmx. Para isso:
40. Na pgina Default.aspx, importe o namespace System.Web.Services usando

o seguinte cdigo:
using System.Web.Services;
Em VB.NET:
Imports System.Web.Services
Isso permite que voc adicione o atributo WebMethod em um mtodo da prpria

pgina ASP.NET.
captulo
10
41. Dentro do procedimento de evento Page_Load da pgina Default.aspx, digite
o seguinte cdigo:
H t t p C o n t e x t.C u r r e n t.S e s s i o n.A d d ( a g o r a , D a t e T i m e.N o w.

ToLongTimeString());
Em VB.NET:
HttpContext.Current.Session.Add(agora, DateTi me.Now.

ToLongTimeString())

Esse cdigo apenas adiciona na seo a hora em que a pgina foi executada.
Este valor ser recuperado em AJAX usando um mtodo da prpria pgina, que
criaremos a seguir:
42. Adicione o mtodo RecuperarHoraLoad dentro da classe da pgina Default.

aspx, usando o seguinte cdigo:
[WebMethod]
public static String RecuperarHoraLoad()
{
return (string)HttpContext.Current.Session[agora];
}
Em VB.NET:
<WebMethod()> _
Public Shared Function RecuperarHoraLoad() As String
Return HttpContext.Current.Session(agora).ToString
End Function
O atributo WebMethod torna este mtodo acessvel a clientes remotos de forma

semelhante ao Web Service. Em C# o mtodo precisa ter o modificador static e em
VB.NET o modificador Shared como mostra a Figura 10.21 e o cdigo a seguir:
Figura 10.21.

43. Adicione as seguintes funes Javascript no arquivo JScript.js:
function RecuperarValorSessao()
{
PageMethods.RecuperarHoraLoad(QuandoCompleta2,QuantoErro,QuandoTi
meOut);
}
function QuandoCompleta2(args) {
alert(args)
}
function QuantoErro(args) {
alert(Houve um erro na chamada.);
}
function QuandoTimeOut(args) {
alert(A chamada ao servio excedeu o tempo limite.);
}
A Figura 10.22 ilustra o arquivo JScript.js aps a incluso das novas funes:
captulo
10
Figura 10.22.

Quando vamos chamar um mtodo da prpria pgina, usamos o PageMethod
seguido do nome do mtodo e seus respectivos parmetros, como mostra o cdigo
em Javascript a seguir:
PageMethods.RecuperarHoraLoad(QuandoCompleta2,QuantoErro,QuandoTi
meOut);
44. Na Master Page selecione o controle ScriptManager e na janela Properties

localize a propriedade EnablePageMethods. Marque esta propriedade como true
Figura 10.23.
Essa propriedade torna possvel o uso de WebMethods da prpria pgina em

nossas aplicaes.
45. Adicione mais um controle HTML do tipo Input (Button) na pgina Default.
aspx, como mostra a Figura 10.24:
Figura 10.24.

Esse boto ser responsvel por chamar a funo que recupera a hora do incio
da sesso utilizando o mtodo RecuperarHoraLoad da prpria pgina Default.aspx,
que est com o atributo WebMethod. Para isto:
46. Altere o cdigo HTML do Button2 adicionando o evento onclick com refern-
cia funo Javascript RecuperarValorSessao que est no arquivo de script. Segue
como deve ficar o cdigo HTML do Button2:
<input id=Button2 type=button value=button onclick=Recuper

arValorSessao() />
47. Execute sua aplicao. Clique no Button2.
A hora de incio da seo exibida, como mostra a Figura 10.25:
captulo
10
Figura 10.25.
Agora para finalizar, vamos apresentar alguns mtodos que ajudam na manipu-
lao de erros em chamadas a Web Service.
48. No arquivo JScript.js altere o contedo da funo QuantoErro para o se-

guinte:
var stackTrace = args.get _ stackTrace();

var message = args.get _ message();
var statusCode = args.get _ statusCode();

var exceptionType = args.get _ exceptionType();
var timedout = args.get _ timedOut();
alert(stackTrace);
alert(message);
alert(statusCode);
alert(exceptionType);
alert(timedout);
Veja, na Figura 10.26, como deve ficar a funo aps a alterao:
Figura 10.26.
49. No painel de cdigo da pgina Default.aspx vamos criar um erro usando o

seguinte cdigo.
throw new Exception(Houve um erro);
Em VB.NET:
Throw New Exception(Houve um erro)

Veja, na Figura 10.27, em que local deve ser adicionado o cdigo:
Figura 10.27.
As seguintes mensagens de erro so exibidas como solicitamos no cdigo Javas-

cript da funo que trata o erro:
Para o mtodo get _ stackTrace() (Figura 10.28):

captulo
10
Figura 10.28.
Para o mtodo get _ message() (Figura 10.29):

Figura 10.29.
Para o mtodo get _ statusCode() (Figura 10.30):
Figura 10.30.
Para o mtodo get _ exceptionType() (Figura 10.31):
Figura 10.31.
Para o mtodo get _ timedOut() (Figura 10.32):
Figura 10.32.

Captulo 11
AJAX Control Toolkit
O AJAX Control Toolkit um conjunto de componentes prontos para voc
utilizar em suas aplicaes AJAX ASP.NET . Alm disso, ele disponibiliza um fra-
mework que torna fcil para voc desenvolver novos componentes de acordo com a
sua necessidade.
O cdigo fonte do AJAX Control Toolkit aberto e pode ser encontrado no
portal www.codeplex.com. Ele faz parte de uma iniciativa da Microsoft em open
source (cdigo fonte aberto).
O AJAX Control Toolkit construdo usando como base o AJAX ASP.NET, que
voc conheceu a fundo nos Captulos anteriores. No AJAX Control Toolkit voc
conta hoje (at o fechamento deste livro) com 34 controles, sendo que o objetivo
ultrapassar os 50.
Usando o AJAX Control Toolkit, voc melhora a interface e apresentao da suas
aplicaes sem precisar de um conhecimento profundo em Javascript.
Instalando o AJAX Control Toolkit

1. Acesse o site http://ajax.asp.net (Figura 11.1).
Figura 11.1.
2. Localize o boto Download the Control Toolkit, como mostra a Figura 11.2:

Figura 11.2.
Voc deve ser direcionado pgina do AJAX Control Toolkit no Portal CodePlex.
3. Localize e clique no link para download o arquivo AjaxControlToolkit.zip,

captulo
11
Figura 11.3.
AJAX Control Toolkit 185

Voc pode optar por fazer o download do AJAX Control Toolkit sem o cdigo-
fonte, como foi mostrado na Figura 11.3.
4. Sero exibidos os termos de licena e uso, como mostra a Figura 11.4 a seguir:
Figura 11.4.
5. Clique em I Agree.
Ser exibida a janela de download (Figura 11.5):
Figura 11.5.
6. Clique em Salvar e escolha o local no seu computador onde o arquivo deve

ser salvo.

Como o arquivo est compactado no formato .zip, voc vai precisar descompac-
t-lo. Voc pode fazer isso no local de sua preferncia; no meu caso, prefiro colocar
os arquivos descompactados do AJAX Control Toolkit na pasta C:\Arquivos de
programas\Microsoft ASP.NET juntamente com os arquivos do AJAX ASP.NET,
Figura 11.6.
Se voc entrar na pasta ASP.NET 2.0 AJAX Extensions, vai localizar os arquivos
do AJAX ASP.NET, incluindo suas dlls, como mostra a Figura 11.7 a seguir:
captulo
11
Figura 11.7.
Para descompactar o arquivo, vou usar o Assistente para extrao do prprio Win-
dows XP SP2. No entanto, voc pode usar o WinZIP ou WinRAR, como preferir.

7. Para usar o Assistente para extrao, voc clica com o boto direito no arquivo
AjaxControlToolkit.zip em seu computador e seleciona Extrair tudo. Ser aberta a
seguinte janela (Figura 11.8):
Figura 11.8.
8. Clique em Avanar.
9. Como eu disse anteriormente, voc pode descompactar os arquivos onde prefe-

rir; a minha preferncia pessoal no caminho: C:\Arquivos de programas\Microsoft
ASP.NET\Ajax Control Toolkit, como mostra a Figura 11.9:
Figura 11.9.
10. Clique em Avanar.
Os arquivos vo sendo descompactados, como mostra a Figura 11.10 a seguir:

Figura 11.10.
11. Ao final, clique em Concluir para exibir os arquivos (Figura 11.11):
Figura 11.11.
A Figura 11.12 mostra os arquivos que foram descompactados:
captulo
11
Figura 11.12.

A pasta AjaxControlExtender contm um instalador que ser usado logo a seguir
para instalar templates na sua mquina que facilitam a criao de aplicaes usando
o AJAX Control Toolkit no Visual Studio .NET 2005.
A pasta AjaxControlToolkit contm o cdigo-fonte dos controles.
A pasta SampleWebSite tem um site que demonstra como voc pode usar os con-
troles. Voc pode acess-lo na url http://ajax.asp.net/ajaxtoolkit/. L voc encontrar
muitas informaes inportantes sobre como usar os controles do AJAX Control
Toolkit, alm de ser uma referncia importante.
A pasta TemplateVSI contm os arquivos do projeto, que por sua vez gerar a
instalao do software que est na pasta AjaxControlExtender.
Na pasta ToolkitTests, voc encontrar testes automatizados para cada um dos
controles. Estes testes so teis principalmente se voc quiser colaborar com a co-
munidade no CodePlex ou fizer alteraes nos controles.
Voc pode abrir a soluo clicando em AjaxControlToolkit.sln. No entanto, a
soluo no pode ser aberta no Visual Studio Express 2005 Web Developer.
12. Entre na pasta AjaxControlExtender e execute o arquivo AjaxControlExten-

der.vsi (Figura 11.13).
Figura 11.13.
iniciado um instalador, como mostra a Figura 11.14:

Figura 11.14.
13. Clique em Next.
Voc vai receber a seguinte mensagem (Figura 11.15):
Figura 11.15.
14. Clique em Yes.

captulo
11
15. Ento, clique em Finish (Figura 11.16).

Figura 11.16.
A instalao vai ser executada.
16. Clique em Close (Figura 11.17).
Figura 11.17.
A instalao est concluda.

Conhecendo o AJAX Control Toolkit
1. Crie uma nova aplicao, mas, desta vez, ao invs de usar o Template ASP.
NET AJAX - Enabled Web Site, selecione o template AJAX Control Toolkit Web
Site, como mostra a Figura 11.18:
Figura 11.18.
Este template foi adicionado ao Visual Studio na instalao do AjaxControlEx-

tender.vsi.
O nome usado para a nova aplicao foi IntroAJAXControlTookit. Neste exemplo,

usarei a linguagem VB.NET.
Aps clicar em OK, a aplicao criada, como mostra a Figura 11.19:
captulo
11
Figura 11.19.

2. Abra a pgina Default.aspx, como mostra a Figura 11.20:
Figura 11.20.
3. Na parte final da Toolbar, clique com o boto direito sobre a mesma selecio-
nando a opo Add Tab, como mostra a Figura 11.21:
Figura 11.21.

4. D o nome de AJAX Control Toolkit para a nova guia, como mostra a Figura
11.22:
Figura 11.22.
5. Clique com o boto direito na guia que acabamos de criar e selecione a opo
Choose Items (Figura 11.23).
captulo
11
Figura 11.23.

6. Na janela Choose Toolbox Items, clique em Browse (Figura 11.24).
Figura 11.24.
7. Localize o arquivo AjaxControlToolkit.dll. Ele est na pasta C:\Arquivos de pro-

gramas\Microsoft ASP.NET\Ajax Control Toolkit\SampleWebSite\Bin (Figura 11.25).
Figura 11.25.
8. Clique em Open.
9. Clique em OK na janela Choose Toolbox Items (Figura 11.26).

Figura 11.26.
Ns precisamos adicionar os controles manualmente porque o AJAX Control

Toolkit vem em um arquivo compactado sem instalador. A instalao que executamos
usando o arquivo AjaxControlExtender.vsi apenas criou o template para as aplica-
es. J o processo de instalao que fizemos no ASP.NET adiciona a guia AJAX
Extensions automaticamente, diferente do que precisamos fazer aqui.
Todos os controles do AJAX Control Toolkit so adicionados guia. A Figura

11.27 a seguir mostra alguns deles:
captulo
11
Figura 11.27.

Muitos desses controles, como voc pde perceber, possuem o sufixo Extender
(palavra Extender em seus nomes). Esses controles adicionam funcionalidades aos
controles j existentes do ASP.NET. Um exemplo o ConfirmButtonExtender, que
usaremos neste exemplo.
10. Arraste um Label e um Button pgina Default.aspx, como mostra a Figura

11.28:
Figura 11.28.
Para usar o AJAX Control Toolkit voc precisa ter o controle ScriptManager na
pgina porque utiliza a base do AJAX ASP.NET para seus controles, como mostra
a Figura anterior (Figura 11.28).
11. D um clique duplo sobre o Button1 e digite o seguinte cdigo no procedi-

mento de evento Button1_Click do mesmo:
Label1.Text = DateTime.Now.ToLongTimeString()
Em C#:

Label1.Text = DateTime.Now.ToLongTimeString();
Seu painel de cdigo deve ficar assim (Figura 11.29):
Figura 11.29.
12. Localize o controle ConfirmButtonExtender na guia AJAX Control Toolkit

da Toolbox e adicione-o na pgina Default.aspx.
Para utilizar o AJAX Control Toolkit voc no precisa necessariamente criar

sua aplicao usando o template AJAX Control Toolkit Web Site. Ao arrastar um
controle para a pgina, as dlls necessrias so adicionadas pasta BIN do seu projeto
automaticamente.
13. A seguinte mensagem exibida porque voc criou o projeto usando o template
AJAX Control Toolkit Web Site. Quando voc usa o template, a dll j adicionada
captulo
ao projeto na criao do mesmo. Selecione Apply to all items e clique em Yes (Figura
11
11.30).
Figura 11.30.

O controle adicionado ao formulrio, como mostra a Figura 11.31 a seguir:
Figura 11.31.
14. Selecione o controle ConfirmButtonExtender1 e, na janela Properties, localize

a propriedade TargetControlId. Selecione Button1, como mostra a Figura 11.32:
Figura 11.32.
Somente os controles que podem ser extendidos usando o ConfirmButtonExtender

(no caso, o Button) aparecem na lista de seleo da propriedade TargetControlID.
Se tivessem mais botes em nossa pgina, eles seriam listados.

O que um controle Extender faz acrescentar funcionalidades a um controle ASP.
NET comum. Por isso, precisamos associar um controle a ele, sempre utilizando a
propriedade TargetControlID. A maior parte dos controles do AJAX Control Toolkit
so Extenders que aumentam as funcionalidades dos controles para o cliente (nave-
gador), assim como estamos fazendo com o Button1 at agora no nosso exemplo.
15. Selecione o Button1 e na janela Properties localize a guia Extenders. As

novas propriedades que o controle ConfirmButtonExtender adicionou ao Button1
so exibidas, como mostra a Figura 11.33:
Figura 11.33.
Como voc relacionou o Button1 com o ConfirmButtonExtender, ele agora tem

novas propriedades. Neste caso, uma destas propriedades a ConfirmText.
16. Digite Voc tem certeza? na propriedade ConfirmText do Button1, como

captulo
11
Figura 11.34.

17. Execute sua aplicao e clique no boto.
exibida uma mensagem de confirmao, como mostra a Figura 11.35:
Figura 11.35.
Se voc clicar em Cancelar nada vai acontecer. Mas, ao clicar em OK, a ao definida
no evento Click do Button1 executada, como mostra a Figura 11.36:
Figura 11.36.
18. Pare a execuo do programa.

Vamos conhecer mais um controle.

19. Adicione um controle ASP.NET Panel na pgina Default.aspx e arraste os
controles da pgina dentro do mesmo, como mostra a Figura 11.37:
Figura 11.37.
20. Arraste para a pgina o controle AlwaysVisibleControlExtender da guia AJAX

Control Toolkit na Toolbox, como na Figura 11.38:
captulo
11
Figura 11.38.

21. Selecione o controle AlwaysVisibleControlExtender e, na janela Properties,
selecione Panel1 para a propriedade TargetControlID (Figura 11.39).
Figura 11.39.
22. Agora localize as novas propriedades do Panel1 na guia Extenders, como

Figura 11.40.
23. Selecione Right para a propriedade HorizontalSide.
24. Teste sua aplicao (Figura 11.41).

Figura 11.41.
No nosso exemplo no temos contedo na pgina que permita o uso da barra de

rolagem, mas voc j pode ver o painel posicionado no canto superior direito. Apenas
coloquei uma borda no painel para facilitar a visualizao.
A Figura 11.42 mostra o painel alinhado na parte inferior:
captulo
11
Figura 11.42.

Agora voc j conhece o AJAX Control Toolkit e capaz de utiliz-lo em suas
aplicaes. A seguir, uma apresentao dos controles.
Para visualizar os controles em ao, acesse o site: http://ajax.asp.net/ajaxtoolkit/.
Controle Accordion: este controle permite que voc crie mltiplos painis e exiba
um deles de cada vez bastando clicar no ttulo do mesmo (Figura 11.43);
Figura 11.43.
Controle AlwaysVisibleControlExtender: permite deixar um controle ASP.NET

sempre visvel na pgina. Veja, a seguir, as posies disponveis:
topo esquerdo;
centralizado no topo;
topo direito;
ao meio esquerdo;
ao meio e ao topo;
ao meio direito;
embaixo esquerda;
embaixo ao centro;
embaixo direita.
No exemplo a seguir (Figura 11.44), a hora est sendo exibida no topo direito da
pgina. No importa o contedo da pgina ou a rolagem da mesma, a hora vai ficar
sempre na mesma posio.

Figura 11.44.
Controle Animation: adiciona efeitos e animaes sua pgina;
Controle AutoCompleteExtender: atravs do uso de Web Service, voc pode

recuperar informaes que o ajudem a autocompletar um controle TextBox de
acordo com a digitao do usurio (Figura 11.45);
Figura 11.45.
Controle CalendarExtender: pode ser usado em conjunto com o TextBox para

que, quando o usurio clique no mesmo, seja exibido um calendrio para facilitar
a digitao/entrada de dados no formato de data (Figura 11.46);
captulo
11
Figura 11.46.

Controle CascadingDropDown: pode ser referenciado a um controle DropDown-
List para automaticamente pular os dados de um outro controle DropDownList
conforme a escolha do anterior (Figura 11.47);
Figura 11.47.
Controle CollapsiblePanelExtender: permite que voc facilmente adicione se-

es que podem ser ocultadas/exibidas em sua pgina. Por exemplo, um painel
pode ser exibido ao clicar no sinal (+), ou ocultado ao clicar no sinal (-) (Figura
11.48);
Figura 11.48.
Controle ConfirmButtonExtender: permite que seja exibida uma caixa de

confirmao antes do evento do boto ser executado. Se o usurio clicar em
cancelar, o evento no ser disparado (Figura 11.49);
Figura 11.49.
Controle DragPanelExtender: permite que um controle seja arrastado, ou

seja, movimentado pelo usurio pela pgina como se movimenta uma janela
no Windows (Figura 11.50);

Figura 11.50.
Controle DropDownExtender: pode ser relacionado aos mais populares contro-

les ASP.NET e permite que seja exibido um menu drop-down para selecionar
o valor do controle, como mostra a Figura 11.51;
Figura 11.51.
Controle DropShadowExtender: permite a exibio de uma sombra em um

controle Panel. Voc pode especificar vrias opes para personalizar esta
sombra (Figura 11.52);
Figura 11.52.
Controle DynamicPopulateExtender: modifica o contedo de um controle ASP.

captulo
NET com o resultado de uma chamada a um Web Service; 11
Controle FilteredTextBoxExtender: ajuda a prevenir a entrada de dados invlidos

de usurios em controles TextBox. Por exemplo, usando este controle voc pode
restringir a digitao em apenas nmeros, apenas letras minsculas etc.;

Controle HoverMenuExtender: pode ser relacionado a qualquer controle ASP.
NET incluindo o gridView, de forma que seja exibido um painel pop-up de
acordo com o contedo em que ponteiro do mouse vai passando por cima;
Controle ListSearchExtender: permite que voc localize informaes em um

ListBox ou DropDownList, de acordo com o que vai digitando. Muito til
quando h muitos itens nestes controles;
Controle MaskedEditExtender: formata a entrada de dados em um controle

TextBox (Figura 11.53). Este controle foi criado pelo brasileiro Fernando
Cerqueira. Parabns Cerqueira!;
Figura 11.53.
Controle ModalPopupExtender: exibe uma janela que quando ativa somente

seu contedo pode ser usado (Figura 11.54);
Figura 11.54.
Controle MutuallyExclusiveCheckBoxExtender: usado com o controle CheckBox.

Neste controle, voc pode indicar um segundo CheckBox usando a proprieda-
de KEY do controle MutuallyExclusiveCheckBoxExtender. Os dois controles
CheckBox no podero selecionar a mesma linha de opo. Este controle til

quando temos dois controles CheckBox em que podem ser selecionadas vrias
opes em cada um deles, mas no podem ser selecionadas opes iguais entre
os controles;
Controle NoBot: previne bot/spam usando CAPTCHA para distinguir compu-

tadores de humanos;
Controle NumericDropDownExtender: pode ser relacionado a um TextBox de

forma a exibir dois botes, um para cima e outro para baixo, de modo que, ao
clicar nos botes, os valores vo sendo modificados. Voc pode usar os botes
para incrementar e decrementar o valor do TextBox de forma aritmtica sim-
ples, como +1 ou -1; tambm pode exibir um a partir de uma lista de valores,
como meses ou anos; alm disso, pode recuparar um valor a partir de um Web
Service (Figura 11.55);
Figura 11.55.
Controle PagingBulletedListExtender: pode ser relacionado a um controle

BulletedList, promovendo paginao;
Controle PasswordStrength: avalia o contedo de um TextBox determinando

o nvel de complexidade do dado para ser uma senha (Figura 11.56);
Figura 11.56.
Controle PopupControlExtender: pode ser relacionado a qualquer controle ASP.

NET com o objetivo de exibir uma janela pop-up com informaes adicionais
que ajudam a preencher o controle ASP.NET (Figura 11.57);
captulo
11
Figura 11.57.
Controle Rating: permite que os usurios selecionem um nmero de estrelas,

que possibilitar avaliar determinado contedo. Muito til em tutoriais, blogs
e fruns (Figura 11.58);

Figura 11.58.
Controle ReorderList: permite reordenar uma lista de itens interativamente;
Controle ResizableControlExtender: permite o redimensionamento pelo usurio

de um elemento da pgina;
Controle RoundedCornersExtender: permite arredondar os cantos de um ele-

mento na pgina. Voc pode escolher quais cantos deseja arredondar, angulao
e borda;
Controle SliderExtender: exibe uma barra de rolagem que pemite ao usurio

escolher um valor dentro de uma faixa definida. Pode ser usado na horizontal
e vertical (Figura 11.59);
Figura 11.59.
Controle SliderShowExtender: disponibiliza botes para navegao em uma

galeria de fotos. Voc pode configurar o controle para exibir as imagens uma
a uma automaticamente por meio dos botes Play e Stop (Figura 11.60);
Figura 11.60.

Controle Tabs: cria uma srie de guias que podem ser utilizadas para organizar
o contedo da pgina (Figura 11.61);
Figura 11.61.
Controle TextBoxWatermarkExtender: exibe uma marca dgua dentro do con-

trole para especificar o que deve ser digitado dentro do mesmo, por exemplo
(Figura 11.62);
Figura 11.62.
Controle ToggleButtonExtender: usado com o controle CheckBox, permite

exibir imagens customizadas para a propriedade Checked (Figura 11.63);
Figura 11.63.
Controle UpdatePanelAnimationExtender: usado para animar o controle Upda-

tePanel quando estiver sendo atualizado e quando terminada a atualizao
assncrona;
Controle ValidatorCalloutExtender: aumenta a funcionalidade dos controles

de validao do ASP.NET, permitindo a exibio de uma janela com informa-
es detalhadas sobre o preenchimento do campo, incluindo um cone (Figura captulo
11.64). 11
Figura 11.64.

Apndice A
Javascript
Para utilizar o Javascript em uma pgina HTML, usada a tag <script> e o
atributo type, definido como: text/javascript. Exemplo:
//cdigos JavaScript
</script>
Assim, o navegador entender que no contedo dessa tag h comandos Javascript

para serem executados.
Voc pode inserir seu cdigo Javascript em trs locais na pgina HTML. So
eles:
Arquivo externo com extenso .js;
No head entre as tags <head> e </head>;
No body entre as tags <body> e </body>.
Voc pode usar uma combinao desses locais tambm.
Vamos conhecer a peculiaridade de cada uma deles.
Arquivo externo com extenso .js

O arquivo externo chamado desta forma:
<head>
<script type=text/javascript src=externo.js></script>
</head>
Ou seja, por meio do atributo src da tag <script>, indicamos a localizao do

arquivo externo, assim, o navegador pode localiz-lo e execut-lo.
Em arquivos externos no utilizamos a tag <script>, somente os cdigos.
Vamos conhecer algumas das vantagens de se trabalhar dessa forma:
Facilidade na manuteno: uma vez que o script est localizado em apenas um
arquivo, voc tem um local central para edio ou correo dos cdigos;
Carregamento mais rpido da pgina: o arquivo externo armazenado no cache
do navegador. Assim, o navegador no precisa baix-lo em todas as pginas que
fazem referncia ao mesmo;
Semntico: o arquivo externo separa a camada de comportamento (Javascript)
da camada de contedo (HTML).

No head entre as tags
<head> e </head>
O script inserido desta forma:
<head>
//cdigos JavaScript
</script>
</head>
Os cdigos Javascript localizados entre as tags <head> e </head> da pgina

so executados ao serem chamados, ou seja, quando algum evento for provocado,
como o evento onclick,onmouseover,onload entre outros.
Nessa forma, o script carregando antes de algum utiliz-lo, ou seja, antes do
carregamento do contedo que est entre as tags <body> e </body>.
No body entre as tags

<body> e </body>
O script inserido desta forma:
<body>
//cdigos JavaScript
</script>
</body>
Os cdigos inseridos entre as tags <body> e </body> da pgina so inicialmente

executados enquanto a pgina carregada, mas tambm podem ser chamados quando
algum evento for provocado.
A tag <noscript>
A tag <noscript> nos permite disponibilizar um contedo alternativo ao dis-

posto via script. Isso significa que dentro desta tag disponibilizamos contedo para
o usurio que no tiver suporte ao Javascript em seu navegador. apndice
A
Veja um exemplo:
Apndice A 217
alert(Ol fulano.);
</script>
<noscript>
<p>Ol fulano.</p>
</noscript>
No exemplo anterior, ser exibida a mensagem Ol fulano, atravs do alert()

uma funo do Javascript que exibe uma mensagem atravs de um popup box para
quem tem suporte ao Javascript. Caso contrrio, a mesma mensagem aparecer para
quem no tem suporte ao Javascript, porm, atravs da tag <noscript> na forma
de texto.
Comentrios em Javascript
Tudo que estiver englobado pelos comentrios ignorado pelo interpretador do

Javascript.
H dois tipos de comentrios, so eles: // e /* */. O primeiro o comentrio de
somente uma linha, enquanto o segundo suporta vrias linhas e conhecido como
comentrio de bloco.
Observe os exemplos:
// Comentrio de uma linha.
/* Comentrio de vrias linhas, o interpretador ignora todo esse

contedo. O que nos permite a criao de notas e lembretes em
nossos cdigos. */
</script>
Ainda sobre comentrios em Javascript, observe que os navegadores que no o

suportam iro exibi-lo como se fosse parte do contedo da pgina. Para prevenir esta
prtica, utilizamos o comentrio em HTML associado ao cdigo Javascript.
<head>

</script>
</head>

As duas barras (//) antes do fechamento do comentrio previnem que o interpre-
tador do Javascript as interpretem.
Case Sensitive
Javascript uma linguagem Case Sensitive, ou seja, diferencia minsculas de

maisculas. Meu diferente de meu em Javascript. Ento, tenha ateno ao digitar
os comandos e usar as variveis Javascript em suas aplicaes.
Ponto-e-vrgula (;) no final das declaraes
Uma boa prtica ao programar utilizando Javascript sempre usar o ; (ponto-e

-vrgula) no final das suas declaraes, mas seu uso no obrigatrio.
Voc precisa utilizar o ponto-e-vrgula se usar algum compressor de Javascript,
para reduzir o tamanho do arquivo. Como os compressores distribuem os cdigos
em uma nica linha, sem eles ser impossvel determinar onde comea e termina
uma instruo, ocasionando erro.
Variveis
Vejamos um exemplo de como declarar uma varivel:
var nomeVariavel = valorVariavel;
ou
nomeVariavel = valorVariavel;
Voc pode criar uma varivel com ou sem a declarao var, mas aconselhvel
utiliz-la.
Quando criamos uma varivel dentro de uma funo, a tornamos local, ou seja,
acessvel somente dentro da funo em que foi criada. J as variveis globais, so
declaradas fora das funes e ficam acessveis a toda e qualquer funo na pgina
em que a varivel esteja.
Exemplo de como atribuir um valor a uma varivel:

apndice
A
numeroFuncionario = 23;
Entendemos pelo sinal de igual como recebe. Assim, numeroFuncionario

recebe 23.
Apndice A 219
Operadores
Operadores so usados para representar expresses de clculo, comparao,

condio e atribuio. Portanto, temos os seguintes tipos de operadores:
Operadores aritmticos
Operador Representao em Javascript Exemplo

Multiplicao * a * b Multiplica-se o valor de a por b.
Diviso / a / b Divide-se o valor de a por b.
Mdulo % a % b Retorna o resto da diviso de a por b.
Adio + a + b Soma de a e b.
Subtrao - a b Subtrao de a com b.
Incremento ++ a ++ Neste caso, somado 1 ao valor de a.
Decremento -- a -- Neste caso, subtrado 1 do valor de a.
Tabela Ap. A.1: Operadores aritmticos.
Operadores de relacionais
Operador Representao Exemplo

em Javascript
Maior > a > b Se o valor de a for maior que o valor de b, ento o
resultado desta expresso verdadeiro, seno falso.
Maior ou igual >= a >= b Se o valor de a for maior ou igual o valor de b,

ento o resultado desta expresso verdadeiro, seno
falso.
Menor < a < b Se o valor de a for menor que o valor de b, ento

o resultado desta expresso verdadeiro, seno
falso.
Menor ou igual <= a <= b Se o valor de a for menor ou igual que o valor
de b, ento o resultado dessa expresso verdadeiro,
seno falso.
Igual a == a == b Se o valor de a for igual ao valor de b, ento o

resultado dessa expresso verdadeiro, seno falso.
Igual a (compara o === a === b Se o valor e o tipo de dado de a for igual a b,

valor e o tipo) ento o resultado desta expresso verdadeiro, seno
falso.
Diferente de != a != b Se o valor de a for diferente do valor de b, ento

o resultado desta expresso verdadeiro, seno
falso.
Tabela Ap. A.2: Operadores de relacionais.

Operadores lgicos
Operador Representao Exemplo

em Javascript
E && a == 5 && b > 9 Caso o valor de a seja igual a cinco e o valor
de b maior que nove, o resultado verdadeiro, seno falso.
Ou || a == 5 || b > 9 Se o resultado de a for igual a cinco ou o valor

de b for maior que nove, ento o resultado verdadeiro. O
resultado s ser falso se as duas expresses retornarem falso.
No ! ! a == 5 Se o resultado de a for igual a 5, ento o resultado

ser falso. O operador no inverte o resultado da expresso.
Tabela Ap. A.3: Operadores lgicos.
Operadores de atribuio
Operador Exemplo o mesmo que

= x=y x=y
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y
/= x/=y x=x/y
%= x%=Y x=x%y
Tabela Ap. A.4: Operadores de atribuio.
Operador condicional
Operador condicional aquele que atribui um valor a uma determinada vari-
vel com base em uma condio, ou seja, se a condio for verdadeira, teremos um
valor x, caso contrrio, um valor y.
Conhea a sintaxe desse tipo de condio:
nomeDaVarivel = (condio) ? valorSeVerdadeiro : valorSeFalso;
Agora, observe um exemplo para uma melhor compreenso:
var nota = 65;

apndice
var resposta = (nota >= 60) ? Aprovado. : Reprovado.;
A
No exemplo anterior fizemos o seguinte processo: inicialmente temos uma vari-

vel denominada nota com o valor 65. Em seguida, a varivel resposta com um valor
Apndice A 221
condicional, ou seja, se o valor da varivel nota for maior ou igual a 60, teremos o
valor Aprovado, caso contrrio, teremos Reprovado.
Estruturas de controle
Como o prprio nome diz, as estruturas de controle servem para controlar a
execuo dos nossos programas. Elas so dividas em:
Estruturas de deciso
Em Javascript temos as seguintes estruturas de deciso:
Declarao if
Sintaxe:
if (condio) {
//cdigo a ser executado quando a condio for verdadeira.
}
Exemplo:
var idade = 19;

if(idade >= 18) {
alert(Voc pode ter sua carteira de motorista);
}
No exemplo anterior, a declarao if verifica se a varivel idade maior ou igual

a 18. Como a condio verdadeira, ou seja, a varivel idade tem o valor 18, ser
exibido o texto Voc pode ter sua carteira de motorista.
Declarao if...else
Sintaxe:
if (condio) {
} else {
//cdigo a ser executado quando a condio for falsa.
}
Exemplo:

var sexo = feminino;
if(sexo == masculino) {
alert(Homem!);
} else {
alert(Mulher!);
}
No exemplo anterior, a declarao if verifica se a varivel sexo igual a mascu-

lino. Como a condio falsa, ou seja, a varivel sexo no tem o valor masculino e,
sim, feminino, ser exibido o texto Mulher.
Declarao if...else if...else

Sintaxe:
if (condio) {
} else if (2 condio) {
//cdigo a ser executado quando a 2 condio for verdadeira.
} else {
//cdigo a ser executado quando a primeira e a segunda condio
forem falsas.
}
Exemplo:
var moeda = Dlar;

if(moeda == Real) {
alert(Voc precisa usar o Real!);
} else if(moeda == Dlar) {
alert(Voc precisa usar o Dlar!);
} else {
alert(Voc no pode usar nem o dlar nem o real!);
}
No exemplo acima, realizamos duas verificaes: perguntamos se a varivel moeda

tem o valor Real (a primeira). Caso seja verdadeiro, exibir o texto Voc precisa usar
o Real; e perguntamos se a mesma varivel tem o valor Dlar (a segunda). Neste
caso, exibir o texto Voc precisa usar o Dlar!
Caso a varivel no tenha nenhum dos dois valores Real ou Dlar , exibir o
texto Voc no pode usar nem o dlar nem o real.
apndice
A
Declarao switch
Sintaxe:
Apndice A 223
switch(expresso) {
case valor 1:
//cdigo a ser executado se a expresso = valor 1;
break
case valor 2:
//cdigo a ser executado se a expresso = valor 2;
break
default:
//cdigo a ser executado se a expresso for diferente do valor
1 e valor 2;
}
Exemplo:
var estado = PR;

switch(estado) {
case PR:
alert(Voc mora no Paran.);
break
case SP:
alert(Voc mora em So Paulo.);
break
case SC:
alert(Voc mora em Santa Catarina.);
break
default:
alert(Em que estado voc mora?);
}
Temos a varivel estado com o valor PR. Iniciamos nossa declarao condicional
com o switch, passando a ele como parmetro a expresso (varivel) estado.
Ento, utilizamos o case. Para isto, necessrio verificar o seguinte: se o valor
da varivel for PR, exibimos um texto; se for SP, exibimos outro, e assim por diante;
se o valor da varivel no coincidir com nenhum dos valores nos cases, exibimos um
texto padro (default).
O valor da expresso comparado com os valores de cada case da estrutura. Caso

ocorra um valor semelhante, o cdigo a ele associado executado.
O break previne que o prximo case seja executado automaticamente.
Estruturas de Repetio
Em Javascript temos as seguintes estruturas de repetio:

Loop For
Sintaxe:
for (var = valorInicial; var <= valorFinal; var = var +

incremento) {
//cdigo a ser executado.
}
Exemplo:
var numero = 1;
for (numero = 1; numero <= 10; numero++) {
alert(Numero atual: + numero);
}
No exemplo anterior, temos a varivel numero que inicia com 1 e, em seguida,

um loop for que funciona da seguinte maneira: temos o valor inicial (1) e o valor
final (10) para a varivel numero, seguido de um incremento (++). Isso significa
dizer que o loop iniciar com a varivel numero com o valor 1 e finalizar quando
ela alcanar um valor maior que 10. O cdigo a ser executado ser uma mensagem
de alerta dizendo ao usurio o nmero atual do looping. Resumindo: enquanto a
varivel numero for menor ou igual 10, o cdigo ser executado.
Loop while
Sintaxe:
while (var <= valorFinal) {

}
Exemplo:
var numero = 1;
while (numero <= 10) {
alert(Numero atual: + numero);
numero = numero + 1;
}
Conforme voc pode ver no exemplo do loop while, o cdigo executado apndice
enquanto a condio for verdadeira. A
Loop do...while
Sintaxe:
Apndice A 225
do {
} while (var <= valorFinal);
Exemplo:
var numero = 1;
do {
alert(Nmero atual: + numero);
numero = numero + 1;
} while (numero < 1).
Essa estrutura igual ao While, s que a condio verificada no final do bloco

de cdigo. Por isso, mesmo que o valor da condio seja falso ele vai executar o cdigo
associado pelo menos uma vez.
Break
O comando break interrompe a execuo do loop. Exemplo:
var numero = 15;

for (numero = 15; numero < 20; numero++) {
if(numero == 17) {
break;
}
alert(Nmero: + numero);
}
Utilizamos a condio if para detectar quando a varivel numero estiver no

nmero 17. Quando isto ocorrer, utilizamos o comando break para interromper o
loop, assim, chegaremos somente at o nmero 17.
Continue
O comando continue interrompe o loop em um determinado momento e con-
tinua com o mesmo:
var idade = 24;

for (idade = 24; idade <= 34; idade++) {
if(idade == 30) {
continue;
}
alert(Voc tem + idade + anos ?);
}

No exemplo anterior, o loop for deveria rodar do nmero 24 at o 34, porm, o
comando continue interrompe a exibio do nmero 30.
Pop-up boxes
Existem trs tipos de Pop-up boxes com Javascript. So elas:
Alert
Exemplo:
alert(Voc esta usando o ALERT);
No navegador aparecer como mostra a Figura Ap. A.1.
Figura Ap. A.1.
Confirm
Exemplo:
confirm(Voc esta usando o CONFIRM);
A figura a seguir ilustra nosso exemplo:
Figura Ap. A.2.
Prompt
Exemplo:
prompt(Voc esta usando o PROMPT,);

apndice
A
Veja, na Figura Ap. A.3, como o navegador se comportar:
Apndice A 227
Figura Ap. A.3.
No comando prompt voc pode sugerir uma resposta (Figura Ap. A.4). Exemplo:
prompt(Voc esta usando o PROMPT,E sugerindo uma resposta);
Figura Ap. A.4.
Funes
Funo um conjunto de cdigos a serem executados para uma determinada

finalidade. Quando voc estiver escrevendo seus programas, vai notar que muitos
cdigos digitados so iguais, ou seja, que voc precisa digit-los em vrios locais.
As funes auxiliam nisso. Voc pode criar funes e depois cham-las em seu
programa sempre que for necessrio.
Voc pode chamar uma funo de qualquer lugar da pgina ou at mesmo de
outras pginas, contanto que o script esteja em um arquivo externo (.js).
As funes podem conter parmetros ou no; quando eles existem, so informados
funo quando a chamamos.
Questes importantes sobre o uso de funes

a palavra function sempre deve ser escrita com letras minsculas;
o nome da funo pode conter letras minsculas e/ou maisculas;
as chaves { } indicam o incio e o trmino da funo;
mesmo que uma funo no contenha parmetros, os parentses ( ) devem ser
includos aps o nome da funo.

Sintaxe sem parmetros
function nomeDaFuncao() {
//cdigos referente funo.
}
Exemplo:
function HelloWorld() {
alert(Ol mundo.);
}
// Exemplo para cham-la.
<a href=# onclick=javascript:HelloWorld();>Chamar a Funo</a>
Sintaxe com parmetros
function nomeDaFuncao(varivel 1, variavel 2, ...) {

//cdigos referente funo.
}
Exemplo:
function HelloWorld(nome) {
alert(Ol + nome);
}
// Exemplo para cham-la.
<a href=# onclick=javascript:HelloWorld(Moroni);>Chamar a
Funo</a>
Esta mensagem pode ser personalizada uma vez que o parmetro passado a ela
o nome de algum usurio.
Quando queremos que uma funo retorne algum valor, utilizamos a declarao
return, que tem o papel de especificar o valor retornado pela funo.
Exemplo:
function calculo(valor1,valor2) {
total = valor1 * valor2;
return total;
}
// Chamando a funo atravs do alert().
alert(calculo(23,5)); apndice
A
Apndice A 229
No exemplo anterior, chamamos a funo calculo fornecendo a ela dois par-
metros: valor1 (23) e valor2 (5). Nesta funo, temos a varivel total que multiplica
os dois parmetros informados e retorna o valor utilizando o return.
Eventos
Podemos definir um evento como uma ocorrncia ou algum acontecimento

realizado por uma pgina, uma ao do mouse, teclado, entre outros. Esses eventos
podem ser detectados pelo Javascript e disparar cdigo associado aos mesmos.
Em muitos dos casos, os eventos so utilizados em combinao com as funes.
Isso significa dizer que a funo no ser executada at que o evento ocorra.
Vamos conhecer os principais eventos:
onclick
O evento onclick ocorre quando o usurio clica sobre algum elemento da
pgina, por exemplo: um link, uma imagem, um boto entre outros.
Exemplo:
onclick=javascript:nomeDaFuncao(parametroSeHouver);
onload e onunload
O evento onload executado quando uma pgina HTML carregada por com-
pleto, incluindo as imagens. J o evento onunload ocorre quando o usurio sai
de uma pgina. Eles so opostos entre si.
Exemplo:
<body onload=nomeDaFuncao(); onunload=nomeDaFuncao();>
onmouseover e onmouseout
Enquanto o evento onmouseover acionado quando o mouse se localiza na
rea de um elemento, o onmouseout executado quando o mouse sai dessa
rea.
Exemplo:
onmouseover=funcaoParaMouseOver();
onmouseout=funcaoParaMouseOut();
onsubmit

Para realizarmos a validao de um formulrio utilizamos o evento onsubmit,
o que significa dizer: ao enviar os dados do formulrio. Este evento trabalha em
conjunto com uma funo da seguinte forma: associamos ao formulrio a chamada
de uma funo, e esta tem por objetivo validar os dados submetidos e retornar um
valor verdadeiro (true) ou falso (false).
Se o valor retornado for verdadeiro, o formulrio enviado, caso contrrio, o envio
bloqueado at que os dados sejam preenchidos como desejamos.
Exemplo:
onsubmit=return confereFormulario();
O evento onclick tambm pode chamar uma funo para validar um formulrio,
assim como outros eventos.
onfocus, onblur e onchange
Esses trs eventos so utilizados na maioria das vezes em associao com algum
elemento de formulrio.
O evento onfocus ocorre quando o usurio clica em um link ou em um campo
de texto e o foco mantido at que outro elemento o ganhe.
J o onblur executado quando o elemento perde o foco.
O exemplo mais clssico para o evento onchange (ao trocar/mudar) quando
alteramos uma opo na lista de um combobox. Nesta ao, ocorre o onchange.
Exemplos:
onfocus=funcaoParaFocus(); onblur=funcaoParaBlur();
<select ... onchange=funcaoParaChange(); ...>
onkeydown, onkeypress e onkeyup

Esses trs eventos so utilizados em associao com o teclado. Com eles, podemos
contar os caracteres de uma textarea, realizar o preview de algum texto, efetuar uma
busca instantnea, entre outras opes.
Os eventos onkeydown e onkeypress so semelhantes e ocorrem quando uma
tecla pressionada pelo usurio em seu teclado. J o onkeyup executado quando
a tecla liberada, ou seja, quando for pressionada e em seguida liberada.
Exemplos:
apndice
onkeydown=funcaoParaKeyDown();
onkeypress=funcaoParaKeyPress(); A
... onkeyup=funcaoParaKeyUp(); ...
Apndice A 231
Arrays
O Array possibilita armazenarmos diversos valores em uma nica varivel. Des-

sa forma, seria uma varivel com vrios valores e esses valores so armazenados e
acessados por meio de uma ordem.
Como exemplo, imagine uma varivel com o nome escalacaoBrasil. Para
ela, precisaremos armazenar onze valores, uma vez que o time tem onze jogadores.
Veja o exemplo a seguir.
O objeto Array definido pela palavra-chave new.
var escalacaoBrasil = new Array();

var escalacaoBrasil = new Array(11);
Ambos os exemplos anteriores esto corretos. A diferena entre eles que o se-
gundo informa o tamanho (valor total) que o Array ter atravs do nmero inteiro
(integer) 11 (onze).
Agora, vamos conhecer duas formas para criarmos um Array.
var escalacaoBrasil = new Array();

escalacaoBrasil [0] = Gomes;
escalacaoBrasil [1] = Cicinho;
escalacaoBrasil [2] = Gilberto;
escalacaoBrasil [3] = Lucio;
escalacaoBrasil [4] = Juan;
escalacaoBrasil [5] = Gilberto Silva;
escalacaoBrasil [6] = Mineiro;
escalacaoBrasil [7] = Kaka;
escalacaoBrasil [8] = Ronaldinho Gaucho;
escalacaoBrasil [9] = Robinho;
escalacaoBrasil [10] = Fred;
var escalacaoBrasil = new Array(Gomes, Cicinho, Gilberto,

Lucio, Juan, Gilberto Silva, Mineiro, Kaka, Ronaldinho
Gaucho, Robinho, Fred);
Os valores podem ser acessados assim:
alert(diasDaSemana[4]); // Exibir: Juan.
Portanto, para referenciarmos um valor dentro de um Array, basta indicarmos

o nome do Array e o ndice numrico do valor. importante lembrar que o ndice
numrico se inicia com 0 (zero).

Se voc especificar algum nmero ou os valores true/false (verdadeiro/falso) como
o valor de um Array, o tipo da varivel ser numrica e Booleana, respectivamente,
ao invs de string.
Os mtodos mais utilizados do objeto Array()
Mtodo Descrio
join() Coloca todos os elementos de um Array em uma string e os separam por um
delimitador especificado.
shift() Retorna o primeiro valor de um Array e remove os demais.
pop() Retorna o ltimo elemento de um Array e remove os demais.
reverse() Inverte a ordem dos elementos de um Array.
slice() Retorna os elementos selecionados de um Array.
sort() Ordena os elementos de um Array.
Tabela Ap. A.5: Mtodos mais utilizados do objeto Array().
Data
Para trabalharmos com datas e horrios em Javascript fazemos uso do objeto

Date().
Exemplo:
var dataAtual = new Date();

alert(dataAtual);
No exemplo anterior, teremos a data e o horrio atual, ou seja, o exato momento

em que o script foi executado. O resultado aparecer no formato a seguir:
Mon Jun 26 2006 15:29:13 GMT-0300 (Hora oficial do Brasil)
Para manipular esse resultado, existem vrias prticas eficientes.

Veja um novo exemplo adaptado ao nosso formato dd/mm/aaaa.
var data = new Date(); apndice

A
var mes = new Array(12)
mes[0] = Janeiro;
mes[1] = Fevereiro;
mes[2] = Maro;
Apndice A 233
mes[3] = Abril;
mes[4] = Maio;
mes[5] = Junho;
mes[6] = Julho;
mes[7] = Agosto;
mes[8] = Setembro;
mes[9] = Outubro;
mes[10] = Novembro;
mes[11] = Dezembro;
alert(data.getDate() + / + mes[data.getMonth()] + / + data.

getFullYear());
No exemplo anterior, utilizamos o objeto Date e trs de seus mtodos: getDa-

te(), getMonth() e getFullYear().
O primeiro retorna o dia do ms (de 1 a 31), o segundo o ms (de 0 a 11) e o ltimo
o ano, com quatro dgitos.
O diferencial neste ltimo est na utilizao do Array para o ms, uma vez que o
mtodo getMonth() retorna nmeros de 0 (zero) a 11 (onze) e, assim, o nmero 4
(quatro) representaria o ms de maio. Diferentemente de nossa representao usual,
onde esse ms representado pelo algarismo 5 (cinco).
Assim, utilizamos um Array para atribuirmos o nome do ms (pode ser algarismos
tambm) de acordo com o nmero retornado pelo mtodo.
Os mtodos mais utilizados do objeto Date()
Mtodo Descrio
Date() Retorna a data e o horrio atual.
getDate() Retorna o dia do ms (1-31).
getDay() Retorna o dia da semana (0-6).
getMonth() Retorna o ms (0-11).
getFullYear() Retorna o ano com quatro dgitos.
getHours() Retorna a hora (0-23).
getMinutes() Retorna os minutos (0-59).
getSeconds() Retorna os segundos (0-59).
getMilliseconds() Retorna os milissegundos (0-999).
getTimezoneOffset() Retorna a diferena em minutos entre o tempo local e o do
Meridiano de Greenwich (GMT).
Tabela Ap. A.6: Mtodos mais utilizados do objeto Date().
Os mtodos na tabela anterior precisam atuar em conjunto com o objeto Date()

porque que so mtodos desse objeto.
Sua utilizao da seguinte forma:

// Uma forma
new Date().nomeDoMetodo();
// Outra forma
var data = new Date();
data.nomeDoMetodo();
String
O objeto string utilizado para manipular um texto armazenado em uma varivel.

importante ressaltar que, alm do objeto string, h a string literal. Quando utili-
zamos alguns dos mtodos do objeto string na string literal, essa ltima convertida
automaticamente e temporariamente em um objeto string. Por exemplo, o mtodo
length retorna a quantidade de caracteres em uma string. Isto porque a string literal
no um objeto, ento no pode conter mtodos, fazendo-se necessria a converso
da mesma para um objeto.
Veja a utilizao desse mtodo abaixo em ambos os casos:
var texto1 = AJAX;

var texto2 = new String(AJAX );
alert(A varivel texto1 contm: + texto1.length +

caracteres.);
alert(A varivel texto2 contm: + texto2.length +
caracteres.);
No exemplo anterior, teremos o valor trs nos dois casos (string literal texto1;
objeto string texto2) porque trs o total de caracteres contido em AJAX.
Os mtodos mais utilizados do objeto String()
Mtodo Descrio
indexOf() Retorna a posio da primeira ocorrncia de um valor especificado em
uma string.
lastIndexOf() Retorna a posio da ltima ocorrncia de um valor especificado em uma
string.
match() Procura por um valor especfico em uma string. Se encontrado, ele (va-
lor) retornado, caso contrrio, retorna null.
replace() Substitue alguns caracteres por outros caracteres em uma string.
toLowerCase() Exibe os caracteres da string em minsculos.
toUpperCase() Exibe os caracteres da string em maisculos. apndice
substr() Extrai uma quantidade especfica de caracteres de uma string a partir de A

um ndice inicial.
substring() Extrai os caracteres de uma string entre dois ndices.
Tabela Ap. A.7: Mtodos mais utilizados do objeto String().
Apndice A 235
Math
O objeto Math disponibiliza diversos valores e funes para nos ajudar na rea-
lizao de operaes matemticas. A seguir uma relao dos valores matemticos
que podem ser acessados pelo objeto Math.
Math Nome Valor

Math.E E 2.718281828459045
Math.PI PI 3.141592653589793
Math.SQRT2 square root of 2 1.4142135623730951
Math.SQRT1 _ 2 square root of 1/2 0.7071067811865476
Math.LN2 natural log of 2 0.6931471805599453
Math.LN10 natural log of 10 2.302585092994046
Math.LOG2E base-2 log of E 1.4426950408889634
Math.LOG10E base-10 log of E 0.4342944819032518
Tabela Ap. A.8: Mtodos mais utilizados do objeto Math.
Mtodos (funes) matemticas

ceil()
Arredonda o valor informado para cima at o nmero inteiro mais prximo.
Exemplo:
var numero = 6.1;

alert(Math.ceil(numero));
// Exibir o valor 7.
floor()
Arredonda o valor informado para baixo at nmero inteiro mais prximo.
Exemplo:
var numero = 6.1;

alert(Math.floor(numero));
// Exibir o valor 6.
max()
Retorna o nmero de maior valor entre dois nmeros especificados.
var numero1 = 6.7;

var numero2 = 3.8;
alert(Math.max(numero1,numero2));
// Exibir o valor 6.7

min()
Retorna o nmero de menor valor entre dois nmeros especificados.
var numero1 = 6.7;

var numero2 = 3.8;
alert(Math.min(numero1,numero2));
// Exibir o valor 3.8
random()
Retorna um nmero entre 0 e 1.
alert(Math.random());
alert(Math.random()*59);
// Exibir nmeros aleatrios entre 0 e 59 - Exemplo:
58.92792655560298
round()
Arredonda o valor informado para o nmero inteiro mais prximo, seja positivo
ou negativo.
var numero1 = 6.7;

alert(Math.round(numero1));
// Exibir o valor 7
var numero2 = -3.8;
alert(Math.round(numero2));
// Exibir o valor -4
apndice
A
Apndice A 237
Apndice B
DHTML e DOM
DHTML e DOM so utilizados em conjunto com o Javascript e nos oferecem a

possibilidade de desenvolvermos aplicativos mais eficientes e criativos para nossos
projetos.
DHTML Dynamic Hyper Text Markup Language: a possibilidade de tornar
as pginas HTML mais dinmicas e interativas do trabalho, em conjunto de
trs tecnologias: HTML, CSS e JavaScript;
DOM Document Object Model: uma plataforma e uma interface de lingua-
gem-neutra que possibilita aos programas e scripts acessar e atualizar dinami-
camente o contedo e o estilo de um documento. O DOM um padro W3C,
ou seja, um padro da Web (web standards), e todos os navegadores atuais
vm utilizando esses padres, mas ainda podem existir excees.
O DOM nos fornece a representao estrutural de documentos HTML e XML,

definindo a forma como a estrutura que pode ser acessada por programas e scripts, pos-
sibilitando-nos a modificao na estrutura do documento, do estilo e do contedo.
A representao do documento ocorre por meio de uma rvore de ns (tree of
node) em que cada objeto possui sua propriedade e mtodo.
Vejamos a imagem a seguir representando uma tree of node:
Figura Ap. B.1.
Na figura anterior temos a estrutura de um documento HTML que foi represen-

tado pelo DOM. Podemos encar-la como uma rvore genealgica.
As duas tags <li> so filhas do mesmo parent (pai). Ento, a tag <ul> e <h1>
so siblings (irms).
A tag <p> est localizada dentro da tag <h1>, assim a tag <p> filha dessa ltima.
Na nomenclatura do DOM a chamaremos de child node (tag <p>) ou child.

Cada tag na marcao HTML representa uma linha e ter a mesma localizao
na rvore do DOM (DOM tree).
Diferentemente do Javascript, o DOM no uma linguagem, ele concede a es-
trutura de um documento e seus elementos. Ento, utilizamos o DOM associado ao
Javascript. O DOM utilizado para termos acesso estrutura, estilo e contedo de
um documento, enquanto que o Javascript, para manipul-los.
O DOM foi desenvolvido para ser independente de qualquer linguagem de pro-
gramao, ento, diversas linguagens o utilizam para ter acesso ao documento, mas
a linguagem Javascript a mais comum.
J o termo DHTML uma combinao de tecnologias (XHTML, CSS e Ja-
vascript) e partiu de uma estratgia de marketing da Netscape e da Microsoft para
descrever a nova tecnologia suportada pela quarta gerao (4.x) de seus navegado-
res. Essa tecnologia no um padro do W3C. Ento, precisamos desenvolver um
DHTML crossbrowser, ou seja, um DHTML que funcione em diversos navegadores
no s nos da Microsoft e Netscape. Por isso, utilizaremos o DOM do W3C que tem
o suporte em todos os navegadores atuais.
Exemplo de DHTML
JavaScript:
function modificarClasse(nomeClasse) {
var obj = document.getElementById(conteudo);
obj.className = nomeClasse;
}
</script>
HTML:
<div id=conteudo class=menu>

<h1>Titulo</h1>
<p>Conteudo ...</p>
<a href=../../noscript.htm onclick=modificarClasse(nodestaque
); return false;>Alterar aparncia</a>
</div>
CSS:
#conteudo {
width: 500px;
padding: 15px;
line-height: 1.5em;
}
.destaque {
apndice
background-color: #666666;
B
Apndice B 241
border: 1px solid #fc6c6c;
}
.nodestaque {
background-color: #ffffff;
border: 1px solid #000000;
}
Nos cdigos anteriores, utilizamos trs tecnologias (HTML, CSS e Javascript).

No link Altere minha aparncia, adicionamos o evento onclick que chama a
funo changeClass, passando a ela o nome da nova classe, nodestaque.
A funo JavaScript changeClass recebe o parmetro nodestaque passado a
ela e o utiliza para adicionar ao objeto desejado conteudo uma nova classe CSS.
Os elementos getElementById e className do DOM so discutidos adiante.
Os mtodos GetElementById
e GetElementByTagName
O mtodo getElementById do DOM simplesmente retorna o elemento cujo

atributo ID foi especificado. Caso o elemento no exista ou o ID informado seja
incorreto, ele retornar null.
Ateno: no podem existir dois objetos em uma pgina com o mesmo valor de
um atributo ID.
Considere o seguinte campo de um formulrio:
<input type=text id=Telefone name=Telefone>
Para acessarmos o valor digitado nesse campo de texto em Javascript procede-

remos assim:
document.nomeDoFormulario.Telefone.value
Ou seja, precisamos declarar document mais o nome do formulrio em que o

campo se localiza e seu nome espeficado no atributo name.
Se utilizarmos o mtodo getElementById, podemos acess-lo assim:
document.getElementById(Telefone).value
Ao invs de informarmos toda a localizao do objeto, dizemos apenas o seu

atributo ID ao mtodo getElementById.

J o mtodo getElementsByTagName retorna diversos objetos com a tag espe-
cficada no mtodo. Portanto, ao invs de informarmos um atributo e termos como
retorno um nico objeto, informarmos uma tag e temos todas aquelas que constam
na pgina em questo.
Para entender melhor, vamos a um exemplo:
function ModificarEstiloLink() {
var links = document.getElementsByTagName(a);
for(var x = 1; x < links.length; x++) {
var link = links[x];
link.style.textDecoration = underline;
}
}
Esta funo utiliza o mtodo getElementsByTagName para recuperar todos

os objetos a da pgina, ou seja, todos os links da pgina. Adicionamos esta co-
leo de objetos em um Array, depois varremos o mesmo utilizando o loop for
atribuindo o estilo underline para cada um deles.
Observe que a propriedade text-decoration das CSS representado por
textDecoration. Sempre que desejar utilizar uma propriedade CSS e esta conter
a estrutura nome-outronome, retire o hfen e coloque em maiscula a primeira letra
do segundo nome.
Os mtodos Style e ClassName

O mtodo style, como seu prprio nome j diz, utilizado para alterar o estilo
de um objeto. Ele usado de forma idntica ao atributo style do HTML, s que, ao
invs de ser atribudo na marcao HTML, usado um script.
Exemplo:
function Ocultar(id) {
var obj = document.getElementById(id);
obj.style.display = none;
}
A funo Ocultar(id) recebe o id do objeto que ser o alvo do script. Este id

atribudo varivel obj usando mtodo getElementById.
Em seguida, usamos o mtodo style para alterar a propriedade display do
objeto em questo para none.
Semelhante ao mtodo style, o mtodo className tem a funo de alterar o
estilo de um objeto, s que este deve ser definido por uma classe CSS.
apndice
B
Apndice B 243
A vantagem do mtodo className que podemos alterar as propriedades do
estilo na folha de estilo vinculada pgina, ou seja, no precisamos alterar o script
quando desejarmos alterar o estilo e, sim, as propriedades da classe CSS.
Exemplo:
function Ocultar(id) {
var obj = document.getElementById(id);
obj.className = OcultarObj;
}
O script anterior altera a propriedade class do objeto recuperado pelo mtodo

getElementById. Ento, o cdigo CSS que estiver nesta classe ser usado a partir
deste momento por este objeto.
A seguir, a classe OcultarObj:
.OcultarObj {
display: none;
}
O mtodo className mais vantajoso do que o style porque nos possibilita

alterar o estilo sem alterar o script, ou seja, basta modificarmos as propriedades
da classe utilizada. Ao invs de ocultar e exibir o objeto utilizando a propriedade
display, podemos utilizar a propriedade visibility. Para isto, simplesmente
alteramos a propriedade da classe OcultarObj, assim:
.OcultarObj {
visibility: hidden;
}
O mtodo innerHtml
Para alterarmos ou inserirmos contedo ou uma marcao HTML em um objeto,
utilizamos o mtodo innerHTML.
Imaginemos uma tag <div> em sua marcao HTML e que essa tag esteja com
o atributo ID definido como menu. Podemos utilizar o mtodo getElementById
para acess-la e o mtodo innerHTML para manipular seu contedo ou marcao
HTML.
Exemplo de como alterar o contedo de uma tag:
var obj = document.getElementById(menu);

obj.innerHTML = Novo contedo.;

Utilizando o operador de atribuio += podemos acrescentar contedo ao j
existente de uma tag como marcao HTML.
var obj = document.getElementById(menu);

obj.innerHTML += Novo contedo.;
Os mtodos appendChild
e createElement
O mtodo appendChild adiciona um n (node, filho) ao final da lista de
filhos (children) de um elemento pai (parent node).
Exemplo:
var novoElemento = document.createElement(hr);

document.getElementById(menu).appendChild(novoElemento);
Em primeiro lugar, definimos qual ser o novo elemento ou a nova tag a ser
criada, nesse caso, a tag hr.
Na segunda linha, fizemos referncia ao atributo ID de uma tag e esta ser o pai do
novo elemento que ser adicionado. Em seguida, utilizamos o mtodo appendChild
informando a ele a tag que criamos na varivel novoElemento.
Para concluir, a tag hr foi adicionada como filho do elemento cujo atributo ID
igual a menu.
O mtodo createElement a soluo quando voc necessita criar um novo
elemento em sua marcao HTML, mas no h possibilidades de alterar a marcao
j existente e o novo elemento deve ser inserido mediante algum evento ocorrido na
pgina ou ocasionado pelo usurio.
Vejamos como utiliz-lo:
function novaTag(nTag) {
var conteudo = document.getElementById(menu);
var novoElemento = document.createElement(nTag);
novoElemento.appendChild(document.createTextNode(Teste));
conteudo.appendChild(novoElemento);
}
Primeiro referenciamos ao atributo ID de uma tag para que possamos utiliz-la

como referncia:

apndice
B
Apndice B 245
Definimos qual ser a nova tag a ser criada. Observe que essa informao
oriunda de um parmetro (nTag) da funo em questo:
Fornecemos um novo contedo ao elemento criado utilizando o appendChild

e o createTextNode. Finalizamos inserindo o novo elemento criado atravs do
appenChild.
Assim, esse novo elemento foi criado como um novo filho do elemento referen-
ciado na varivel conteudo.
Os mtodos insertBefore
e insertAfter
O mtodo insertBefore usado quando precisamos inserir algum elemento
em um local especfico e no como o mtodo appendChild, que insere o objeto
sempre como o ltimo filho (child) de um elemeto pai (parent).
Exemplo:

</script>
Primeiramente, informamos qual elemento ser criado. Esse elemento infor-

mado utilizando o parmetro nTag da funo. Em seguida, inserimos contedo ao
elemento criado.
Fazemos referncia a um elemento por meio do getElementById na varivel
referencia.
Criamos a varivel parentTag, concedendo-a o valor referencia.parent-
Node, ou seja, o nosso elemento como referncia, e especificando que ele ser um
n pai (parentNode).
Para concluir, utilizamos o mtodo insertBefore anexado varivel parent-
Tag. Os atributos desse mtodo so os seguintes: novoElemento (o elemento que

ser criado) e referencia (para sabermos onde inserir o novo elemento, ou seja,
anterior a qual elemento).
O mtodo insertAfter no existe, apenas se em certos momentos precisarmos
inserir algum elemento posterior a um elemento especfico. Para isto, utilizamos o
mtodo insertBefore, tambm da seguinte forma:
Marcao HTML:
<div id=menu>
<h1 id=tit>Titulo</h1>
</div>
Script utilizado:

</script>
Primeiro, informamos qual elemento ser criado. Esse elemento informado

atravs do parmetro (nTag) da funo. Em seguida, inserimos contedo ao ele-
mento criado.
Usamos o mtodo getElementById para fazer referncia ao elemento na va-
rivel referencia.
Criamos a varivel parentTag, dando a ela o valor referencia.parentNode,
ou seja, o nosso elemento como referncia e especificando que ele ser um n pai
(parentNode).
Para concluir, utilizamos o mtodo insertBefore anexado varivel parent-
Tag. Os atributos desse mtodo so os seguintes: novoElemento (o elemento que
ser criado) e referencia.nextSibling (next = prximo; Sibling = irmo).
Aqui est a diferena. Esses atributos informam que o novo elemento ser o prximo
irmo da tag referenciada na varivel referencia.
Se a nova tag ser o prximo irmo, quer dizer que ela ser inserida posterior-
mente tag informada como referncia.
apndice
B
Apndice B 247
Os mtodos setAttribute
e getAttribute
O mtodo setAttribute tem a finalidade de inserir ou modificar um atributo
em um elemento existente. A sintaxe do mtodo compreende no seguinte:
setAttribute(nomeDoAtributo,valorDoAtributo);
Exemplo:

</script>
No exemplo anterior, criamos os atributos id e class e definimos respectiva-

mente os seguintes valores: titulo e destaque.
O mtodo getAttibute usado para recuperar um atributo a fim de mani-
pul-lo.
Sintaxe:
getAttribute(nomeDoAtributo);
Exemplo:

</script>

Apndice C
Instalando o Visual Studio Web
Developers Express Edition 2005
e o SQL Server 2005 Express Edition
Para baixar e instalar os softwares Visual Studio Web Developers Express Edition
2005 e o SQL Server 2005 Express Edition siga os procedimentos:
1. Primeiramente, necessrio fazer o download do instalador. Para isto, acesse
o site:
http://msdn.microsoft.com/vstudio/express/vwd/download/
Neste site voc encontrar informaes sobre os requisitos necessrios para
instalar a aplicao.
2. Aps ter baixado os arquivos, execute o arquivo vwdsetup.exe. A instalao

iniciada.
3. Na janela Visual Web Developers 2005 Express Edition Setup clique em Next
> para continuar o processo de instalao, como mostra a Figura Ap.C.1.
Figura Ap. C.1.
4. Na prxima janela, selecione I accept the terms of the License Agreement e

clique em Next > para continuar (Figura Ap.C.2).

Figura Ap. C.2.
5. Em seguida, surgir uma tela solicitando sobre o que deseja instalar. Deixe
marcada a opo Microsoft SQL Server 2005 Express Edition x86 (Download Size:
55 MB) para instalar o mesmo. Eu aconselho a instalao da documentao tambm.
Para isto, selecione a opo Microsoft MSDN 2005 Express Edition (Download Size:
248 MB), como mostra a Figura Ap.C.3.
Figura Ap. C.3.
Apndice C 251
apndice
C
6. Clique em Next > para continuar.
7. A tela seguinte (Figura Ap.C.4) exibe a pasta na qual ser instalado o software e
tambm o espao disponvel no disco. Clique em Install > para iniciar a instalao.
Figura Ap. C.4.
Ser feito o download dos arquivos selecionados e a instalao dos produtos,

como mostra a Figura Ap.C.5:
Figura Ap. C.5.

Depois de concludo, voc pode utilizar o produto por 30 dias sem registro. Para
perodo acima de 30 dias necessrio o registro, que gratuito. Para isto, clique em
Register Now na tela de encerramento (Figura Ap.C.6).
Figura Ap. C.6.
8. Clique em Exit para finalizar a instalao.
Apndice C 253
apndice
C

Universidade AJAX PDF

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Universidade AJAX PDF

Загружено:

Авторское право:

Доступные форматы

rosto.

Conselho Administrativo: Alessandro Gerardi, Alessio Fon Melozo,

Diretor Editorial: Luis Matos

Assistncia Editorial: Monalisa Neves e Carolina Evangelista

Preparao de Originais: Ricardo Dino Freitas

Reviso: Guilherme Laurito Summa

Projeto Grfico: Daniele Ftima

Diagramao: Fabiana Pedrozo

Capa: Sergio Bergocce

Dados Internacionais de Catalogao na Publicao (CIP)

M868u Moroni, Herbert.

Universidade Ajax / Herbert Moroni.

1. Programa de Computadores. I. Ttulo.

Apndice A ................................................................ 215

Apndice B ................................................................ 239

Apndice C ................................................................ 249

1. Entre no Visual Studio e crie um novo Web Site chamado IntroducaoAjax.

4. Na pgina Default.aspx, adicione trs controles HTML do tipo Input (Text),

5. Organize os controles, como na figura a seguir:

Vai ficar assim:

7. Ainda na pgina Default.aspx, clique no boto Source para ir ao cdigo HTML

8. Insira o seguinte cdigo dentro da tag <Head> da pgina:

No se preocupe se no compreender o cdigo Javascript agora, logo adiante ex-

9. Adicione o atributo onload=openAjax(); na tag <Body>. Vai ficar

10. Ainda no cdigo HTML, adicione o atributo onkeyup=total(); nas

<input id=Text1 type=text onkeyup=total(); value=0

Segue o contedo em HTML inteiro do arquivo Default.aspx, caso voc tenha

<%@ Page Language=VB AutoEventWireup=false CodeFile=Default.

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://

<html xmlns=http://www.w3.org/1999/xhtml >

11. Agora vamos para o arquivo Default2.aspx.

If Request.QueryString(B) <> Nothing Then

Vai ficar assim:

Se voc estiver usando a linguagem C#, segue o cdigo:

13. A ltima modificao. V para o cdigo HTML da pgina Default2.aspx e

Apenas clique em OK para habilitar o Debug.

Vamos agora analisar as trs funes Javascript que usamos:

O objeto XMLHttpRequest foi primeiramente implementado pela Microsoft

Aqui verificamos se a requisio est completa e ento atribumos o valor re-

status retorna um nmero que representa o status HTTP. Por exemplo,

No vou me aprofundar em exemplos sobre estas propriedades, mas voc pode

Se os valores digitados nas duas primeiras caixas de texto forem 12 e 11 respec-

Nesta funo, usamos os mtodos open e send. A seguir, a descrio detalhada

Para finalizar, nesta funo voc conheceu a propriedade onreadystate-

Instalando o AJAX ASP.NET

1. Visite o site (Figura 2.1):

2. No menu, clique em AJAX, ou acesse diretamente a url:

3. Na parte superior, clique em Download.

4. Com a pgina aberta, clique no boto Download ASP.NET AJAX v1.0.

8. Marque a opo I accept the terms in the License Agreement e clique em

9. Clique em Install para continuar (Figura 2.8).

10. Aps concluir a instalao, desmarque a opo Display Microsoft ASP.NET,

A instalao foi concluda com sucesso.

Conhecendo o AJAX ASP.NET

2. Selecione o Template ASP.NET AJAX - Enabled Web Site e crie um novo

O controle ScriptManager responsvel por tornar os scripts disponveis para

4. Na janela Add New Item, em Templates, selecione SQL Database. Mude o

Repare que a conexo ao banco de dados que acabamos de criar exibida na

12. Preencha as colunas Nome e Completa, conforme a prxima imagem. Note

15. Um Assistente chamado TableAdapter Configuration Wizard iniciado.

18. Clique no boto Query Builder.

21. Clique em OK.

25. Clique em Next >.