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 • São 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 autorização prévia por escrito da editora, poderá ser reproduzida ou transmitida sejam quais
forem os meios empregados: eletrônicos, mecânicos, fotográficos, gravação ou quaisquer outros.
Diretor Editorial: Luis Matos
Assistência Editorial: Monalisa Neves e Carolina Evangelista
Preparação de Originais: Ricardo Dino Freitas
Revisão: Guilherme Laurito Summa
Projeto Gráfico: Daniele Fátima
Diagramação: Fabiana Pedrozo
Capa: Sergio Bergocce
Dados Internacionais de Catalogação na Publicação (CIP)

(Câmara Brasileira do Livro, SP, Brasil)
M868u Moroni, Herbert.
Universidade Ajax / Herbert Moroni.

– São Paulo : Digerati Books, 2007.
256 p.
ISBN 978-85-60480-53-1
1. Programa de Computadores. I. Título.
CDD 006.786
Sumário
Capítulo 1
Entendendo o AJAX ...................................................... 9
O que é o AJAX?..........................................................................................................10
A primeira função .....................................................................................................19
A segunda função ......................................................................................................20
A terceira função .......................................................................................................21
Considerações sobre o uso do AJAX .........................................................................22
Capítulo 2
AJAX ASP.NET ........................................................... 25
Instalando o AJAX ASP.NET.....................................................................................26
Conhecendo o AJAX ASP.NET ................................................................................30
Capítulo 3
O controle UpdatePanel .............................................. 59
Capítulo 4
O controle UpdateProgress ......................................... 77
Capítulo 5
O controle Timer ......................................................... 87
Capítulo 6
A classe PageRequestManager ................................... 99
Capítulo 7
Usando o AJAX ASP.NET em
aplicações já existentes ............................................. 113
Capítulo 8
Usando Web Services em suas
aplicações AJAX ASP.NET ....................................... 119
Capítulo 9
Aprofundando no uso do controle UpdatePanel ....... 133
Capítulo 10
Aprofundando no uso de Web Services
e no desenvolvimento voltado para o
navegador (Cliente-Centric) ...................................... 157
Capítulo 11
AJAX Control Toolkit ................................................ 183
Instalando o AJAX Control Toolkit ........................................................................184
Conhecendo o AJAX Control Toolkit ....................................................................193
Apêndice A ................................................................ 215

Javascript...................................................................................................................... 216
Arquivo externo com extensão .js ............................................................................ 216
No head – entre as tags <head> e </head> ......................................................... 217
No body – entre as tags <body> e </body> ......................................................... 217
A tag <noscript> ................................................................................................... 217
Comentários em Javascript .................................................................................... 218
Case Sensitive ......................................................................................................... 219
Ponto-e-vírgula (;) no final das declarações ......................................................... 219
Variáveis .................................................................................................................. 219
Operadores .............................................................................................................. 220
Operadores aritméticos ....................................................................................... 220
Operadores de relacionais ................................................................................... 220
Operadores lógicos ............................................................................................. 221
Operadores de atribuição .................................................................................... 221
Operador condicional ......................................................................................... 221
Estruturas de controle ................................................................................................ 222
Estruturas de decisão ............................................................................................. 222
Declaração if ........................................................................................................ 222
Declaração if...else .............................................................................................. 222
Declaração if...else if...else ................................................................................. 223
Declaração switch ............................................................................................... 223
Estruturas de Repetição ........................................................................................ 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
Funções..................................................................................................................... 228
Questões importantes sobre o uso de funções .................................................. 228
Sintaxe – sem parâmetros .................................................................................... 229
Sintaxe – com parâmetros .................................................................................. 229
Eventos ..................................................................................................................... 230
Arrays ...................................................................................................................... 232
Os métodos mais utilizados do objeto Array() ................................................. 233
Data ........................................................................................................................... 233
Os métodos mais utilizados do objeto Date() ................................................ 234
String ........................................................................................................................ 235
Os métodos mais utilizados do objeto String() ............................................ 235
Math ......................................................................................................................... 236
Métodos (funções) matemáticas ........................................................................ 236
Apêndice B ................................................................ 239

DHTML e DOM ........................................................................................................240
Os métodos GetElementById e GetElementByTagName ..................................... 242
Os métodos Style e ClassName ................................................................................ 243
O método innerHtml ..................................................................................................244
Os métodos appendChild e createElement .............................................................. 245
Os métodos insertBefore e insertAfter .................................................... 246
Os métodos setAttribute e getAttribute .................................................................. 248
Apêndice C ................................................................ 249

Instalando o Visual Studio Web Developers Express
Edition 2005 e o SQL Server 2005 Express Edition .............................................. 250
Capítulo 1
Entendendo o AJAX
Você vai verificar que, durante todo este livro, vamos trabalhar com vários exem-
plos passo a passo. Isto facilita a compreensão, a memorização e já mostra como você
pode, na prática, aplicar os conhecimentos que está adquirindo. Fique à vontade
para me acompanhar nas práticas em seu próprio computador ou apenas estudar os
passos no decorrer dos exemplos.
Para acompanhar os exemplos, você precisa ter uma versão do Visual Studio insta-
lada em sua máquina; desde que seja a versão 2005, você pode usá-la tranqüilamente,
no entanto, estarei usando nos exemplos o Visual Studio Web Developers Express
Edition 2005, por ser uma versão gratuita e que pode ser baixada facilmente do site
da Microsoft. Se tiver dúvidas sobre onde baixar e como instalar esta ferramenta,
consulte o Apêndice C no final deste livro. Estarei usando também a versão Express
do SQL Server 2005, para os exemplos com banco de dados.
As ferramentas Express da Microsoft são destinadas a estudantes, entusiastas etc.
que querem conhecer e aprender mais sobre suas funcionalidades. São ferramentas
com algumas limitações quando utilizadas para desenvolvimento corporativo, porém,
com recursos incríveis e produtivos. É possível 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 produção, vamos fazer nosso
primeiro exemplo para compreender o que é o AJAX e como utilizá-lo em nossas
aplicações ASP.NET.
O que é o AJAX?
AJAX é a abreviação de Asynchronous JavaScript and XML. Não é uma tecnologia,
e sim, uma metodologia, que utiliza vários recursos e tecnologias, como Javascript,
DOM e XML. O objetivo do AJAX é evitar que a cada solicitação do servidor a página
precise ser completamente recarregada. Para isto, usamos o objeto XMLHttpRequest,
por meio do Javascript, para intermediar todas as solicitações 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
capítulo
1
Figura 1.1.
Nesse nosso primeiro exemplo, vamos criar uma aplicação cliente com Javascript
e o objeto XMLHttpRequest, que solicita ao servidor uma simples adição de dois
valores inteiros. Para isto, teremos duas páginas na nossa aplicação: uma que atuará
como o cliente e outra como servidor, que retornará o valor calculado.
2. Crie um novo formulário para sua aplicação com o nome Default2.aspx. Para
isto, clique com o botão 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 opção Place code in separate
file (isso faz com que seja criado um arquivo separado para o código da página) e
clique em Add.
Figura 1.3.
4. Na página Default.aspx, adicione três 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.
capítulo
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 página Default.aspx, clique no botão Source para ir ao código HTML

da página.
8. Insira o seguinte código dentro da tag <Head> da página:
<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;
}
capítulo
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>
Não se preocupe se não compreender o código Javascript agora, logo adiante ex-
plicar e, em detalhes cada uma das funções do código anterior. Para maiores detalhes
sobre Javascript e DOM, você pode consultar os Apêndices A e B também.
9. Adicione o atributo onload=”openAjax();” na tag <Body>. Vai ficar

assim:
<body onload=”openAjax();”>
Isso faz com que a função Javascript openAjax() seja executada assim que a
página for carregada.
10. Ainda no código HTML, adicione o atributo onkeyup=”total();” nas

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

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

alguma dúvida:
<%@ 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 página em branco para que o evento Page_Load
seja criado e digite o seguinte código:
capítulo
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 código é bem simples. Primeiro declaramos duas variáveis do tipo Integer
e atribuímos o valor 0 a elas.
Então, verificamos se existe um parâmetro A com valor. Se sim, atribuímos esse
valor à variável. Fazemos o mesmo com o parâmetro B. A última linha escreve a
soma dos valores das duas variáveis. Esse texto será recuperado pelo nosso programa
AJAX e atribuído à caixa de texto necessária.
Se você estiver usando a linguagem C#, segue o código:
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 modificação. Vá para o código HTML da página Default2.aspx e

apague tudo, deixando apenas a primeira linha de código, que contém a diretiva
Page, como na imagem a seguir:
Figura 1.9.
14. Volte para a página Default.aspx e execute sua aplicação (para isto, você pode
clicar em F5). A seguinte tela poderá aparecer:
Figura 1.10.
capítulo
1
Apenas clique em OK para habilitar o Debug.

A seguinte janela se abre:
Figura 1.11.
Digite alguns números 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 página. Isto é AJAX. Usamos Javascript,
o objeto XMLHttpRequest e o DOM para fazer solicitações ao servidor rodando
ASP.NET.
Vamos agora analisar as três funções Javascript que usamos:
A primeira função
}
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
métodos 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 função.
Se estivermos trabalhando com o Internet Explorer, vamos adicionar o ActiveX
XMLHTTP à variável ajax que declaramos antes desta função no Javascript. Se
for outro navegador, vamos atribuir o objeto XMLHttpRequest. Eles trabalham
de forma idêntica.
A segunda função
docu ment.getElementById(‘Text3’).value = ajax.
responseText;
}
}
Aqui verificamos se a requisição está completa e então atribuímos o valor re-

tornado por ela à terceira caixa de texto. Fazemos isso por meio da propriedade
readyState do objeto XMLHttpRequest. Esta propriedade possui cinco estágios,
que vão de 0 a 4. O número 4 indica que a requisição está completa. A seguir, uma
descrição completa dos cinco estágios:
• 0 - não inicializado;
• 1 - carregamento;
• 2 - carregado;
• 3 - interativo;
• 4 - completo.
Você pode utilizar o estágio 1 para exibir uma mensagem de carregando, por
exemplo, até que o estágio 4 esteja completo.
Uma outra propriedade que usamos nesta função é a responseText. Por meio
dela, atribuímos o valor que está sendo retornado à caixa de texto. Esta propriedade
sempre retorna uma string com os dados do servidor Web, mas, ao invés 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 Apêndices A e B.
Temos também a propriedade onreadystatechange, que será comentada
quando estudarmos a próxima função.
O objeto XMLHttpRequest tem mais duas propriedades importantes que podem
ser bem úteis em suas páginas. São elas: status e statusText.
capítulo
1
• status – retorna um número que representa o status HTTP. Por exemplo,

pode retornar o número 404 indicando que a página solicitada não pôde ser
encontrada;
• statusText – retorna um texto associado ao código do status HTTP. Por exemplo,
pode retornar “Página não encontrada”.
Não vou me aprofundar em exemplos sobre estas propriedades, mas você pode
utilizá-las como utilizamos a propriedade readState para enriquecer ainda mais
suas aplicações AJAX.
A terceira função
function total() {
+
ajax.send();
}
Esta função pega os valores das duas primeiras caixas de texto e envia para a
página Default2.aspx como parâmetro. A página 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 código anterior vai atribuir a seguinte string à variável url:
“Default2.aspx?A=12&B=11”
Nesta função, usamos os métodos open e send. A seguir, a descrição detalhada

dos métodos disponíveis no objeto XMLHttpRequest:
• open (método, url, síncrono, usuário, senha): inicia uma nova requisição, em que:
• método – requisição HTTP, pode ser “GET” ou “POST”;
• url – endereço da URL que será requisitada no servidor web;
• síncrono – se o método trabalhará de forma síncrona ou assíncrona; o valor
padrão é true, que quer dizer assíncrona;
• usuário e senha – se o servidor Web necessitar de uma autenticação.
• send(dados): envia a requisição, enviando opcionalmente os dados;
• abort(): aborta uma requisição em atividade;
• setRequestHeader(nome, valor): informa um cabeçalho (header) para a
requisição;
• getResponseHeader(nome): retorna o valor do cabeçalho (header) informado;
• getAllResponseHeaders(): retorna uma string contendo todos os cabeçalhos
(header).
Para finalizar, nesta função você conheceu a propriedade onreadystate-

change do objeto XMLHttpRequest. Ela indica qual função será executada
sempre que o estado do objeto XMLHttpRequest for alterado. No nosso caso, a
função atualizar().
Considerações sobre
o uso do AJAX
Como você percebeu, embora possa criar aplicações com interfaces bem mais ricas
em AJAX, isto não é 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 não, certos tipos de extensões que podem
influenciar na execução do código. Podemos ter ainda a situação de o Javascript,
simplesmente não estar habilitado no navegador do cliente.
Então, você vai precisar escrever o código Javascript para cada uma das possi-
bilidades e testá-las. Ainda assim, para os navegadores sem suporte, ao Javascript
será necessário o que chamamos de Javascript não-obstrutivo, ou seja, sua página
deve rodar sem os recursos do AJAX. Isso porque na Internet cada visitante é um
potencial cliente e você não pode eliminar potenciais clientes porque eles não têm
os recursos que você precisa para que eles naveguem no seu site.
Para programar em Javascript também, não 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 preço. Com o ganho na
interface, temos uma perda de produtividade e isso não é bom. Principalmente para
os programadores ASP.NET, que têm à sua disposição 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
capítulo
1
ninguém 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 aplicações ASP.NET,
foram criados vários frameworks, ou seja, bibliotecas de código Javascript que pode-
mos usar no desenvolvimento com AJAX. O Google tem um framework destes, mas
eles também não ajudam muito para quem desenvolve em ASP.NET usando o Visual
Studio.NET, pela difícil integração com o mesmo. Através deles, perdemos o poder
dos Web Server Controls, como você viu no exemplo que fizemos neste Capítulo.
Tentando ajudar na produtividade dos programadores .NET, a Microsoft lan-
çou seu próprio 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 considerável
de produtividade.
A Microsoft também tem outras iniciativas para melhorar o desenvolvimento
com AJAX, principalmente com a versão futura do Visual Studio, que deve ajudar
na depuração de erros do Javascript.
Capítulo 2
AJAX ASP.NET
O objetivo deste capítulo é mostrar a você o poder do framework AJAX ASP.
NET em suas aplicações Web: como ele pode melhorar a produtividade e deixar suas
aplicações mais interativas.
Instalando o AJAX ASP.NET

Vamos agora instalar os recursos que usaremos do AJAX ASP.NET. Se você
tiver instalado em sua máquina versões 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 instalação. Se
você estiver conectado a Internet pode fazê-lo e, em seguida, a instalação seguindo
o passo a passo durante os próximos exemplos; caso contrário, faça o download do
arquivo e depois instale em sua máquina, 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.
capítulo
2
Figura 2.2.
4. Com a página aberta, clique no botão Download ASP.NET AJAX v1.0.
Figura 2.3.
AJAX ASP.NET 27
Você será direcionado a uma página de download da Microsoft, como mostra a
Figura 2.4 a seguir:
Figura 2.4.
5. Clique no botão Download. Você pode salvar este arquivo no seu disco rígido,
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
capítulo
será feito e a instalação será iniciada, como mostra a Figura 2.6: 2
Figura 2.6.
7. Clique em Next.
8. Marque a opção 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. Após concluir a instalação, desmarque a opção Display Microsoft ASP.NET,

2.0 AJAX Extensions 1.0 Release Notes e clique em Finish (Figura 2.9).
Figura 2.9.
A instalação foi concluída com sucesso.
Conhecendo o AJAX ASP.NET

1. Entre no Visual Studio 2005 e clique em Create Web Site (Figura 2.10).
capítulo
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 instruções usadas pelos
componentes ASP.NET AJAX. Nos próximos tópicos, você vai conhecer estas alte-
rações e aprender a usar o AJAX ASP.NET em aplicações 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 instalação, o Assembly AJAX - ExtensionToolbox.DLL foi referenciado
na ToolBox do Visual Studio; o resultado disso é a nova guia que você tem disponível
agora na sua Toolbox, como mostra a Figura 2.12:
Figura 2.12.
No modo Design, na página Default.aspx, você nota mais uma diferença: o con-
trole ScriptManager, como mostra a Figura 2.13:
Figura 2.13.
O controle ScriptManager é responsável por tornar os scripts disponíveis para

o navegador do cliente. Por isso, ele é necessário em todas as páginas que você for
utilizar o AJAX ASP.NET. Ele é a parte central do framework o AJAX ASP.NET
capítulo
e controla todos os recursos AJAX na página. 2
3. Vamos agora adicionar um banco de dados ao nosso projeto. Para isso, na janela
Solution Explorer, clique com o botão 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
prática, clique em Sim.
Figura 2.16.
Repare que a conexão 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 botão 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
capítulo
figura a seguir: 2
Figura 2.19.
8. Clique com o botão direito sobre ProjetoId e selecione Set Primary Key, como
mostra a próxima figura. Isso torna o campo ProjetoId a chave primária da nossa
tabela.
Figura 2.20.
AJAX ASP.NET 35
9. Ainda em ProjetoId, na janela Column Properties, marque a opção Yes na
propriedade (Is Identity), como mostra a Figura 2.21:
Figura 2.21.
10. Clique em Salvar. Surgirá uma caixa de diálogo 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 botão direito sobre a tabela Projetos e selecione Show
Table Data (Figura 2.23).
capítulo
2
Figura 2.23.
12. Preencha as colunas Nome e Completa, conforme a próxima imagem. Note

que o campo ProjetoId é autonumerável como desejamos, quando o tornamos chave
primária e marcamos a opção Identity.
Figura 2.24.
AJAX ASP.NET 37
13. Para realizar o acesso aos dados em nossas aplicações, vamos utilizar um
Dataset tipado. Há várias técnicas 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 invés de escolher a
opção SQL Database, selecione a opção 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
específica. 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 opção Wich data connection should
your application use to connect to the database? e clique em Next >.
capítulo
2
Figura 2.27.
16. O próximo passo é decidir se deseja que a string de conexão ao banco de dados
seja adicionada ao arquivo de configuração. 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 opção Use SQL statements e clique em
Next > (Figura 2.29).
AJAX ASP.NET 39
Figura 2.29.
18. Clique no botão 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.
capítulo
2
Figura 2.31.
20. A janela Query Builder nos ajuda na criação dos comandos SQL. Selecione
ProjetoID, Nome e Completa, na tabela Projetos, e digite a cláusula WHERE, como
mostra a Figura 2.32:
Figura 2.32.
21. Clique em OK.
22. A próxima janela exibe o comando SQL criado pelo Query Builder e permite
que você faça ajustes, se necessário. 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 próxima tela (Figura 2.34) você pode escolher e nomear os métodos que deseja
que o assistente crie para manipulação e recuperação dos dados.
Figura 2.34.
23. Para nosso exemplo, não vamos utilizar o método Fill, então desmarque esta
opção.
24. Mude o nome do método Return a DataTable para GetProjetosPorStatus,
capítulo
como mostra a Figura 2.35. 2
Figura 2.35.
25. Clique em Next >.
A próxima tela (Figura 2.36) resume todas as tarefas que serão 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 método GetProjetosPorStatus. Para isto, clique com o botão
direito sobre o mesmo e selecione Preview Data (Figura 2.38):
Figura 2.38.
Será exibida a janela Preview Data (Figura 2.39):
capítulo
2
Figura 2.39.
28. No parâmetro Completa, digite false em Value e clique em Preview (Figura

2.40). Serão 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.
capítulo
2
Figura 2.43.
32. No GridView1, na propriedade DataSourceID, clique em New Data Source.

Será iniciado um Assistente.
33. Selecione Object e, na opção 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 próximo passo do assistente permite que selecionemos o objeto TableAdapter.
O TableAdapter contém o método que criamos para recuperar os dados da nossa
tabela. Ele foi criado quando criamos o Dataset.
34. Na tela seguinte, selecione a opção como mostra, a Figura 2.45 e, em seguida,
clique em Next >.
Figura 2.45.
Você pode agora escolher o método do TableAdapter que deseja. Nós só temos
um método, 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 opção escolhida no DropDownList1. Se o valor do DropDownList1 for Com-
pleto, ou seja, true, serão exibidos apenas os registros que o campo Completa tive-
rem o valor true. Se o valor do DropDownList1 for Incompleto, ou seja, false, serão
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).
capítulo
2
Figura 2.47.
37. Clique em Finish.
38. Na Smart Tag do GridView1, marque as opções 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 também 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 aplicação, marque a propriedade AutoPostBack do
controle DropDownList1 como true. Senão ao selecionarmos uma opção não será
disparado o Post que atualiza o GridView.
41. Execute sua aplicação.
Perceba que cada vez que você muda a opção do DropDownList1 a página é
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 atualizações parciais da

página, sem a necessidade de recarregá-la completamente toda vez que uma opção
for selecionada.
42. Adicione um controle UpdatePanel, como mostra a Figura 2.51. Ele está
localizado na guia AJAX Extensions na Toolbox.
capítulo
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 próximo Capítulo.
45. Execute a aplicação.
46. Perceba agora que, a cada seleção do DropDownList1, apenas o GridView1 é

atualizado (Figura 2.54). Não é necessário o recarregamento de toda a página.
Figura 2.54.
Você vai aprender detalhes sobre o UpdatePanel e o uso da Trigger no próximo
capítulo
Capítulo. Por enquanto, apenas entenda o seguinte: já que o DropDownList1 está 2
fora do UpdatePanel1, precisamos indicar ao mesmo que o DropDownList1 será o
responsável por realizar a chamada da atualização 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 página ainda é totalmente recarre-

gada. Vamos resolver isso agora.
48. Pare a aplicação e volte à página 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 opção

Conditional (Figura 2.57).
Figura 2.57.
51. Execute a aplicação (Figura 2.58).
capítulo
2
Figura 2.58.
Agora, tanto ao usar o DropDownList1, quanto o DetailsView1, você obtém o

recarregamento parcial da página.
52. Para finalizar, apenas quero apresentar para você o controle UpdateProgress.
Para isto, adicione o mesmo à sua página Default.aspx e digite dentro dele o texto
“Atualizando”, como mostra a Figura 2.59:
Figura 2.59.
AJAX ASP.NET 55
O conteúdo deste controle será exibido enquanto a página recarregar algum dos
UpdatePanels. Como nosso exemplo é bem simples e o recarregamento bem rápido,
se você executar a página agora não vai conseguir visualizar o texto por ser muito rá-
pida sua apresentação. Para que você possa ver o texto, vamos manipular a Thread no
momento de atualização do GridView1, fazendo com que leve ao menos três segundos.
Para isto, siga os próximos passos.
53. Selecione o ObjectDataSource1 e, na janela Properties, clique no botão 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 código.
54. Digite dentro do procedimento o seguinte código:
System.Threading.Thread.Sleep(3000)
Seu painel de código deve ficar como mostra a Figura 2.61:
capítulo
2
Figura 2.61.
55. Vamos testar. Execute a aplicação (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 Capítulo você aprendeu como é fácil construir aplicações com AJAX uti-
lizando o framework AJAX ASP.NET e conheceu os seus principais controles.
AJAX ASP.NET 57
Capítulo 3
O controle UpdatePanel
No Capítulo anterior, você já utilizou o UpdatePanel e pôde comprovar os bene-
fícios que ele proporciona às suas aplicações.
Usando o UpdadePanel, você pode atualizar partes específicas da página, sem a
necessidade de usar nenhum código Javascript. Assim, você tem uma boa redução
no tráfico 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, então o mesmo deve estar ou ser adicionado
na página quando você for utilizar o UpdatePanel.
Neste Capítulo, faremos uma prática em que você aprenderá:
• usar triggers;
• trabalhar com vários UpdatePanel em uma mesma página;
• usar UpdatePanel aninhados;
• atualizar e criar UpdatePanel programaticamente;
• conhecer os controles que não são compatíveis com o UpdatePanel.
1. Crie uma nova aplicação 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 página Default.aspx,

e organize-os conforme a Figura 3.2:
capítulo
3
Figura 3.2.
3. Dê um clique duplo sobre a página Default.aspx, e no painel de código digite

o seguinte código 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-vírgula. Desta forma:
TextBox1.Text = DateTime.Now.ToString()
Esse código tem por objetivo atribuir o valor da data e hora atual nas duas caixas
de texto. Seu painel de código deve estar como na Figura 3.3:
O controle UpdatePanel 61
Figura 3.3.
4. Execute e teste sua aplicação.

Perceba que ao clicar no botão, a data e hora atual são exibidas em cada uma das
caixas de texto (Figura 3.4).
Figura 3.4.
5. Pare a execução da aplicação.
6. Adicione um controle UpdatePanel na página Default.aspx e mova os controles
TextBox2 e Button1 para dentro do mesmo, conforme a Figura 3.5:
capítulo
3
Figura 3.5.
8. Clique sobre o botão e, perceba que agora, apenas a caixa de texto que está
dentro do UpdatePanel é executada. Temos então um carregamento assíncrono dentro
do UpdatePanel usando AJAX (Figura 3.6).
Figura 3.6.
9. Pare a execução da aplicação.
Qualquer controle dentro de um UpdatePanel dispara uma atualização assín-
crona, ou seja, uma atualização apenas dentro do UpdatePanel. Se a propriedade
ChildrenAsTrigger estiver com valor true, esta propriedade será sempre true
por padrão. Se você deixar essa propriedade como false, os controles dentro do
UpdatePanel não chamarão uma atualização assíncrona.
É muito difícil alterarmos a propriedade ChildrenAsTrigger, porque geralmente
pelo menos um dos controles dentro do UpdatePanel é usado para solicitar atualiza-
ção assíncrona. No entanto, algumas vezes precisamos que um controle específico
que está dentro do UpdatePanel não chame uma atualização assíncrona. 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 botão Add, como mostra a Figura 3.8:
Figura 3.8.
Perceba que são exibidas duas opções: AsyncPostBackTrigger e PostBackTrigger.
12. Clique sobre PostBackTrigger.
13. Em ControlID, selecione o controle Button1, como mostra a Figura 3.9 a capítulo
seguir: 3
Figura 3.9.
14. Clique em OK.
O código 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 código anterior que a tag <Triggers> é quem faz referência ao controle
que não vai disparar uma atualização assíncrona.
Perceba que, ao clicar no botão, toda a página é atualizada novamente, pois as
duas caixas de texto são atualizadas com a data.
16. Pare a execução 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 não chame uma atualização assíncrona, você pode
também usar uma trigger para fazer com que um controle fora do UpdatePanel
execute uma atualização assíncrona. 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 opção AsyncPostBackTrigger, no botão Add, como

capítulo
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
atualização assíncrona.
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 código anterior que a tag <Triggers> é quem faz referência ao controle
e ao evento que dispara a atualização assíncrona.
21. Execute e teste sua aplicação.
Vamos entender agora a propriedade UpdateMode, usada quando temos mais do

que um UpdatePanel na mesma página.
22. Adicione mais um UpdatePanel à página e arraste o controle TextBox1 para

dentro do mesmo, como mostra a Figura 3.13:
Figura 3.13.
23. Execute a aplicação. Perceba que sempre que você clica no Button1 os dois
UpdatePanel são atualizados (Figura 3.14).
capítulo
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 padrão –, qualquer controle na página que dispara uma atualização assíncrona
atualiza o UpdatePanel em questão. Quando esta mesma propriedade foi definida
como Conditional, apenas os controles dentro do mesmo ou com trigger apontada
para o mesmo efetuam atualização assíncrona.
Não há limite em relação ao número de UpdateControls a serem utilizados em
uma página.
25. Execute a aplicação. Agora, ao clicar no botão, 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 botão 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. capítulo
3
28. Certifique-se que a propriedade UpdateMode dos dois controles UpdatePanel
estejam como Conditional.
29. Execute e teste a aplicação.
Perceba que, ao clicar no botão dentro do UpdatePanel2, somente o mesmo é

atualizado. Já ao clicar no botão que está dentro do UpdatePanel1, é disparada a
atualização assíncrona dos dois controles UpdatePanel.
Agora, vamos aprender a atualizar e criar UpdatePanel programaticamente.
30. Adicione mais um Button à sua aplicação fora de qualquer UpdatePanel, como
mostra a Figura 3.18 a seguir:
Figura 3.18.
Se você executar sua página agora, esse botão não fará nenhuma solicitação
assíncrona. Ao clicar sobre ele, a página é completamente atualizada.
31. Dê um clique duplo sobre o Button que você acabou de adicionar e digite o
seguinte código no procedimento de evento do mesmo:
UpdatePanel1.Update();
Isso ainda não é o suficiente para realizar uma atualização assíncrona, precisamos
registrar o controle como uma trigger. Fazemos isso adicionando o seguinte código
no procedimento de evento Page_Load:
ScriptManager1.RegisterAsyncPostBackControl(Button3);
Button3 é o nome ou ID do Button que adicionamos.
32. Execute sua aplicação e teste. Agora, você já é capaz de chamar uma atuali-
zação assíncrona programaticamente.
33. Agora, vamos criar um controle UpdateControl programaticamente. Para isto,

adicione uma nova página à sua aplicação com o nome de Default2.aspx.
34. Adicione um controle ScriptManager nessa página.
35. Dentro da classe Default2, adicione o seguinte código:
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(); capítulo
} 3
Seu painel de código deve estar assim (Figura 3.19):
Figura 3.19.
A seguir, o mesmo código 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 aplicação (Figura 3.20).
Figura 3.20.
Vamos agora compreender o código:

Primeiramente, criamos os três objetos que vamos utilizar na nossa página.
• 1 UpdatePanel;
• 1 Button;
• 1 TextBox;
Fizemos isso com o código a seguir:
UpdatePanel up1 = new UpdatePanel();

Button Button1 = new Button();
TextBox TextBox1 = new TextBox();
capítulo
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,
não precisávamos ter alterado a propriedade UpdateMode para este contexto, mas
por motivo didático mostrei como realizar esta tarefa.
up1.ID = “UpdatePanel1”;
up1.UpdateMode = UpdatePanelUpdateMode.Conditional;
Também precisamos atribuir um identificador único para os controles TextBox

e Button, já que os criamos programaticamente também. Fizemos isso usando as
seguintes linhas de código:
Button1.ID = “Button1”;
TextBox1.ID = “TextBox1”;
A propriedade Text do Button1 foi modificada para Button apenas para o botão
no exemplo não ser exibido em branco.
Button1.Text = “Button”;
Depois, criamos um manipulador de evento para o Button1 com a seguinte linha

de código, em que Button1_Click é o nome de um procedimento que criamos.
Button1.Click += new EventHandler(Button1 _ Click);
O código a seguir mostra o procedimento Button1_Click. É nele que atribuímos

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

{
}
Nós precisamos vincular os controles TextBox1 e Button1 no UpdatePanel. Fa-

zemos isso adicionando os controles na propriedade ContentTemplateContainer do
UpdatePanel usando o seguinte código:
up1.ContentTemplateContainer.Controls.Add(Button1);
up1.ContentTemplateContainer.Controls.Add(TextBox1);
Para finalizar, vinculamos o nosso UpdateControl à página usando o código:
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 não podem ser utilizados dentro do UpdatePanel. Segue uma descrição deles,
além 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.
Capítulo 4
O controle UpdateProgress
O controle UpdateProgress sempre funciona associado a um UpdatePanel e sua
função é exibir informações sobre o progresso de atualização assíncronas, ou seja,
atualizações AJAX.
Neste Capítulo, faremos uma prática que o habilitará a:

• usar apenas um UpdateProgress para toda a página;
• usar múltiplos UpdateProgress;
• usar o UpdateProgress dentro e fora do UpdatePanel.
1. Crie uma nova aplicação 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 página Default.aspx:

• 3 Label;
• 2 UpdatePanel;
• 1 Button;
• 1 Calendar.
3. Certifique-se que o controle ScriptManager esteja adicionado à página.
4. Organize os controles como a Figura 4.2, sendo que o controle Label1 está
fora de qualquer UpdatePanel, o Label2 e o Button1 estão dentro do UpdatePanel1
e o Label3 e o Calendar estão dentro do UpdatePanel2.
capítulo
4
Figura 4.2.
5. Dê um clique duplo sobre a página e digite o seguinte código dentro do pro-

cedimento de evento Page_Load:
Label1.Text = DateTime.Now.ToString
Segue o mesmo código em C#:
Label1.Text = DateTime.Now.ToString();
6. Este mesmo código 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
necessários, você pode dar um clique duplo sobre o Button1 e fazer o mesmo para
o controle Calendar, depois apenas digite o código. Seu painel de código deve ficar
O controle UpdateProgress 79
Figura 4.3.
7. Execute a aplicação. Clique sobre o botão e o calendário. Eles devem atualizar os

seus respectivos labels com a data e a hora atuais de forma assíncrona (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:
capítulo
4
Figura 4.5.
9. Se você executar o exemplo agora, não notará diferença alguma. Isto porque o
processamento assíncrono que está sendo realizado é bem simples – apenas trazer a
data e a hora e adicionar no label – e rápido. Para visualizarmos o uso do UpdatePro-
gress, vamos utilizar o método Sleep da classe Thread que está no namespace System.
Threading para fazer com que o processamento assíncrono demore três segundos.
Para isto, adicione a seguinte linha de código dentro dos métodos Button1_Click e
Calendar1_SelectionChanged:
O código em C# é quase o mesmo:
System.Threading.Thread.Sleep(3000);
Figura 4.6.
10. Execute sua aplicação (Figura 4.7).
Figura 4.7.
Agora sim, ao executar uma atualização assíncrona o texto Aguarde... é exibido
durante três segundos (3.000 milissegundos), o tempo que a atualização leva para
ser processada. O UpdateProgress é muito útil quando trazemos informações de
um banco de dados que pode levar alguns segundos, informando ao usuário que a
solicitação 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 padrão desta propriedade
é 500 milissegundos.
capítulo
Você também pode adicionar dentro do controle UpdateProgress o código HTML, 4
para a exibição 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 não utiliza nenhum espaço na página até que seja necessário. True é o valor
padrão. Se você executar sua aplicação, vai perceber que sempre que o texto Aguar-
de... é exibido o restante da página é movido para baixo, e quando ele desaparece o
conteúdo volta à sua posição original.
Se a propriedade DynamicLayout tiver o valor false, o conteúdo não vai ser mo-
vido porque o UpdateProgress já vai estar ocupando o espaço necessário na página,
estando apenas com sua visibilidade oculta.
12. Localize agora na janela Properties a propriedade AssociatedUpdatePanelID.

Esta propriedade é usada quando você quer associar um UpdatePanel específico ao
UpdateProgress em questão. Selecione UpdatePanel1 para esta propriedade, como
Figura 4.9.
13. Adicione mais um UpdateProgress na página, 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).
capítulo
4
Figura 4.11.
15. Execute a aplicação 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 assíncrona no
momento que outra já está sendo executada, por padrão, 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 aplicação.
Agora você já sabe como utilizar o controle UpdateProgress em suas aplicações.

É 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 operações serão as
mesmas ou parecidas.
Capítulo 5
O controle Timer
O controle Timer permite a atualização da página em intervalos de tempo de-
finidos.
Neste Capítulo, faremos uma prática onde você entenderá o que é, e como utilizar
o controle Timer.
1. Crie uma nova aplicação 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 página, caso não

esteja, adicione o mesmo utilizando a guia AJAX Extensions na Toolbox.
3. Adicione um controle UpdatePanel na página.
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:
capítulo
5
Figura 5.2.
5. Dê um clique duplo sobre o controle Timer1 e, no procedimento de evento

criado Timer1_Tick, digite o seguinte código:
Label1.Text = “Atualizado em: “ + DateTime.Now.ToString();
Em VB.NET, o código é quase o mesmo apenas sem o ponto-e-vírgula, 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 atualização. Este evento é semelhante ao Click do botão, 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 padrão é 60.000 milissegundos, ou seja, 60 segundos ou 1
minuto. Altere este valor para 3.000 milissegundos (três segundos), como mostra a
Figura 5.4:
Figura 5.4.
OBSERVAÇÃO
Quanto menor o intervalo de tempo, mais solicitações o controle efetuará ao

servidor, aumentando o tráfego de rede e o consumo de banda. Procure utilizar
o maior intervalo de tempo possível para o contexto de suas aplicações.
7. Execute e teste sua aplicação. Perceba que a aproximadamente cada três se-
gundos é atualizada a data e a hora no Label1.
Quando digo “aproximadamente”, é isso mesmo. Você vai entender por que
agora:
capítulo
5
8. Adicione o seguinte código dentro do procedimento de evento Timer1_Tick,
como mostra a Figura 5.5 logo a seguir:
Em VB.NET, o código é quase o mesmo apenas sem o ponto-e-vírgula, como

segue:
Figura 5.5.
O controle Timer 91
Este código não é novidade para você a esta altura do livro. Novamente, vamos
retardar um pouco o processamento do método por motivos didáticos.
9. Execute sua aplicação. Perceba que a atualização é executada a cada seis se-
gundos, e não três como configuramos na propriedade Interval.
Isso acontece sempre que o controle Timer estiver dentro do UpdatePanel. A
contagem é iniciada sempre que a antiga solicitação é finalizada. Como no nosso
exemplo, este tempo é de três segundos, ele foi somado ao tempo do controle Timer.
Mas, em nossas aplicações dificilmente, sabemos o tempo exato que vai levar uma
atualização assíncrona porque ela depende do volume de dados que está sendo tra-
fegado e da utilização de banda.
10. Com o objetivo de realizar a atualização a exatamente cada três 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 atualização assíncrona em um UpdatePanel é
necessário 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:
capítulo
5
Figura 5.7.
12. Execute sua aplicação. Agora sim, a cada exatamente três segundos a atuali-
zação é efetuada. Fique atento, visualize a seguinte circunstância:
O controle Timer efetua uma atualização assíncrona a cada três segundos. Mas
uma das atualizações demora mais do que três segundos para ser finalizada. Então,
antes que a atualização acabe é iniciada uma outra. O que acontece com a primeira
que não acabou ainda? A resposta é: a primeira atualização, a que não finalizou
ainda, é terminada e a nova é iniciada.
Segue o código 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 execução da sua aplicação e vamos agora compreender como trabalhar
com múltiplos 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 código a seguir no procedimento Timer1_Tick, como mostra a

Figura 5.9 logo a seguir:
Label2.Text = “Atualizado em: “ + DateTime.Now.ToString();
capítulo
5
Figura 5.9.
18. Execute sua aplicação. Agora, a cada três segundos ambos UpdatePanel serão
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 código 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).
capítulo
5
Figura 5.13.
23. Execute sua aplicação. Agora, o UpdatePanel1 é atualizado a cada três se-
gundos e o UpdatePanel2 é atualizado a cada cinco segundos.
Com esse exemplo concluído, você é capaz de utilizar o controle Timer em suas
aplicações AJAX ASP.NET.
O controle Timer 97
Capítulo 6
A classe PageRequestManager
Até agora, em todos os nossos exemplos não usamos Javascript ou DOM, mas
eles podem ser necessários nas seguintes circunstâncias:
• controlar como múltiplas atualizações assíncronas são processadas. Por padrão,
a última atualização sobrepõe à primeira, mas podemos controlar isso usando
Javascript e DOM;
• disponibilizar informações sobre a atualização assíncrona que está sendo exe-
cutada. Isso melhora a experiência do usuário com a página, principalmente
quando temos múltiplos controles UpdatePanel;
• possibilidade de cancelar uma atualização assíncrona enquanto a mesma é
processada;
• exibir mensagens de erro customizadas;
• enviar informações para o servidor de controle que não está sendo usado na
atualização assíncrona. 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 código que está sendo processado
no servidor, e influencia o resultado da atualização assíncrona.
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 aplicação ASP.NET. Esta classe possui métodos, propriedades e eventos
que permitem que você customize a atualização assíncrona utilizando Javascript e
DOM. Para conhecer melhor o Javascript e o DOM consulte os Apêndices A e B.
Neste Capítulo, faremos uma prática que o ensinará a:

• trabalhar com os eventos da classe PageRequestManager;
• parar uma atualização assíncrona.
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 à página; caso não
esteja, adicione o mesmo utilizando a guia AJAX Extensions na Toolbox.
3. Adicione um controle UpdatePanel na página. 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 página, como mostra a Figura 6.2:
capítulo
6
Figura 6.2.
6. Dê um clique duplo sobre o Button1 e digite o seguinte código para o proce-

dimento de evento Button1_Click:
Label1.Text = DateTime.Now.ToString();
Em VB.NET, o código é diferente apenas por não ter o ponto-e-vírgula no

final.
A classe PageRequestManager 101

Figura 6.3.
7. Execute e teste sua aplicação (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 página ASP.NET possui uma
série de eventos que são executados consecutivamente, nas atualizações assíncronas
também temos alguns destes tipos de eventos. Vamos agora conhecer e saber como
utilizar estes eventos em nossas aplicações AJAX ASP.NET .
8. Vá até o código HTML da página. Para isto, clique no botão Source.
9. Localize a seguinte tag:
<asp:ScriptManager ID =”ScriptManager1” runat=”server” />
Esta tag representa o controle ScriptManager que está adicionado à nossa página.
10. Logo abaixo da tag do controle ScriptManager, digite o seguinte código:

capítulo
6
<script type=”text/javascript”>
Sys.WebForms.PageRequestManager.getInstance().add _ initializeReque
st(Exibir);
function Exibir(){
alert(“InitializeRequest”);
}
</script>
Seu código HTML deve estar assim (Figura 6.5):
Figura 6.5.

Esse é um bloco de código Javascript.
A função Exibir() exibe a mensagem “InitializeRequest” usando o
comando Javascript Alert().
A seguinte linha de código recupera uma instância da classe PageRequestManager
e adiciona o método 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 aplicação. Ao clicar no botão, é exibida a seguinte mensagem:
Figura 6.6.
Isso quer dizer que quando a requisição assíncrona foi iniciada, ou seja, quando o
evento initializeRequest foi disparado, o método Exibir() foi executado. Você pode
e deve criar suas próprias funções para fazer uso deste evento nos seus programas.
Para compreender melhor sobre Javascript e DOM, consulte os Apêndices A e B.
12. Modifique o código Javascript criado até agora para o seguinte:
var prm = Sys.WebForms.PageRequestManager.
getInstance();
prm.add _ initializeRequest(Exibir);
function Exibir(){
}
</script>
Este código faz a mesma coisa que o anterior, mas separa um pouco melhor o
código, deixando-o mais claro e legível, facilitando assim a manipulação de outros
eventos, como faremos a seguir. Nele criamos uma variável chamada prm e atribuímos
a ela a instância da classe PageRequestManager. Para isto, usamos o método getIns-
tance(). Isso facilita o uso dos eventos porque usamos a variável com a instância
do método para atribuir o método Exibir() ao evento initializeRequest.

Você não pode criar uma instância da classe PageRequestManager diretamente.
Esta classe está sempre disponível quando o controle ScriptManager e o Update-
Panel estão na sua página realizando atualização assíncrona. Por isto, sempre que
você precisar utilizar esta classe deve recuperar sua instância usando o método
getInstance().
Seu código HTML deve estar assim (Figura 6.7):
capítulo
6
Figura 6.7.
13. Vamos conhecer um outro evento: o beginRequest. Digite o seguinte código

dentro do script em Javascript logo abaixo da função Exibir():
prm.add _ beginRequest(Exibir2);
function Exibir2(){
alert(“BeginRequest”);
}
Este código é muito semelhante ao outro que acabamos de conhecer, apenas

estamos usando outro evento que é executado após o evento initializeRequest.

Seu código HTML deve estar assim:
Figura 6.8.
14. Execute e teste sua aplicação. Agora após o evento initializeRequest é execu-
tado o evento beginRequest, como mostra a Figura 6.9:
Figura 6.9.
Os próximos três eventos que são executados sempre que uma solicitação assín-
crona é executada são os eventos: pageLoading, pageLoaded e endRequest. Vamos
demonstrá-los:
15. Digite o seguinte código logo abaixo da função 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.
capítulo
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(){
}
prm.add _ endRequest(Exibir5);
function Exibir5(){
alert(“EndRequest”);
}
</script>
16. Execute sua aplicação. Agora, para cada evento, você terá uma mensagem
exibida com o nome do mesmo. Isto demonstra claramente a ordem que os eventos
são executados e permite que você escolha qual evento será usado em suas aplicações
de acordo com sua necessidade.

Você também deve ter notado que o evento pageLoaded foi executado logo que
a página foi aberta sem que nenhuma atualização assíncrona tenha sido disparada.
Esse é o único evento que é disparado em uma atualização síncrona também.
17. Mude o código da função Exibir() para o seguinte:
function Exibir(sender, args){

alert(args.get _ postBackElement().id);
}
18. Execute sua aplicação e teste.
Perceba que agora, no método initializeRequest, o identificador, ou seja o ID do

botão, foi exibido (Figura 6.10). O método get _ postBackElement() permite
que você recupere uma instância do objeto que executou uma solicitação assíncro-
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 código para a função Exibir():
function Exibir(sender, args){

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

e atribuir o mesmo à variável obj, que facilita o uso do mesmo. Este código faz o
mesmo que o anterior, só que de forma mais clara e organizada.
Vamos agora conhecer o método abortPostBack(), que pára a execução de
uma atualização assíncrona.
19. Localize a guia HTML na barra de ferramentas e adicione um controle Button

dentro do UpdateProgress, como mostra a Figura 6.11:

capítulo
6
Figura 6.11.
Foi utilizado um controle HTML porque este botão 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 código a seguir dentro do script em Javascript, como mostra a
próxima imagem:
function Cancelar(){
prm.abortPostBack();
}
Figura 6.13.
Este código é simples e demonstra claramente como utilizar o método abort-

PostBack(). Lembre-se que prm é uma variável que tem uma instância da classe
PageRequestManager.
22. Ainda no HTML, localize o código do Button que está dentro do UpdatePro-
gress e modifique-o para o seguinte:
<input id=”Button2” type=”button” value=”Cancelar” onclick=”Cancelar()”

/>
A modificação foi simples, apenas adicionamos o evento onclick, que chama

a função Cancelar().

A seguir (Figura 6.14), a modificação no código HTML:
capítulo
6
Figura 6.14.
23. Execute e teste sua aplicação. Agora, se você clicar em Cancelar, a atualização
é parada imediatamente (Figura 6.15).
Figura 6.15.

Para finalizar, quero que você conheça a propriedade isInAsyncPostBack. Ela
contém o valor true, se a atualização ou PostBack que está sendo efetuado é assín-
crono e têm o valor false, se a atualização for síncrona. Vamos utilizá-la:
24. Altere o código da função Exibir4() para a seguinte:
function Exibir4(){
if (prm.get _ isInAsyncPostBack()){
}
}
Aqui, fizemos uso do método get _ isInSyncPostBack para recuperar o valor

da propriedade isInAsyncPostBack da classe PageRequestManager que está sendo
referenciada pela variável prm. Então, se o valor for true, a mensagem do método
alert() será exibida, se o valor for false, não.
25. Execute e teste sua aplicação novamente.

Perceba que agora ao iniciar a aplicação, a mensagem que estava sendo exibida
pelo evento PageLoaded não foi mais. Isso porque na função Exibir4() que é
utilizada por esse evento estamos verificando se a atualização é assíncrona, e, nes-
se caso, o valor é false. Já ao usar a atualização assíncrona, a mensagem é exibida
normalmente.

Capítulo 7
Usando o AJAX ASP.NET em aplicações já existentes
Para usar o AJAX ASP.NET em uma aplicação já existente você precisa fazer
algumas modificações no arquivo Web.config.
Nos passos a seguir, vamos entender melhor na prática quais são essas modifi-
cações:
1. Crie uma nova aplicação 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 código, 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>
capítulo
Observe, na Figura 7.2 a seguir, o local exato onde o código deve ser inserido:
7
Figura 7.2.
Usando o AJAX ASP.NET em aplicações já existentes 115

Para não ser necessário digitar todo este texto, crie uma aplicação em branco
usando o Template ASP.NET AJAX - Enabled Web Site e copie o código que está
no Web.config.
Os elementos inseridos dentro da tag <configSections> criam seções e sub-
seções de configuração para a classe SystemWebExtensionsSectionGroup. Você
configura as propriedades para estas seções usando o elemento <system.web.
extensions>.
4. Adicione o seguinte código, 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 código 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 página:
<asp:ScriptManager ID =”ScriptManager1” runat=”server”>

</asp:ScriptManager>

5. Adicione o seguinte código, 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>
capítulo
<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
requisições via script. O elemento <httpModules> define os módulos HTTP que
são utilizados em aplicações AJAX ASP.NET .
Observe na Figura 7.4 a seguir, o local exato onde o código deve ser inserido:
Usando o AJAX ASP.NET em aplicações já existentes 117

Figura 7.4.
Observe na imagem que no código anterior também temos uma leve mudança 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 são as modificações necessárias no Web.config. Não é necessária nenhuma

outra modificação.
Agora, adicione os controles AJAX ASP.NET necessários na sua aplicação. Lem-
bre-se de adicionar o controle ScriptManager em todas as páginas que for utilizar
o AJAX ASP.NET.

Capítulo 8
Usando Web Services em suas aplicações AJAX ASP.NET
Quando utilizamos Web Services, nós temos o desenvolvimento voltado para o
navegador (Client-Centric). Até agora, utilizamos nossas aplicações com a maior
parte da lógica voltada para o servidor (Server-Centric). Os Web Services transmitem
dados em XML e apenas permite o tráfego 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 Capítulo, vou concentrar em como tornar seu Web Service disponível em
uma aplicação AJAX ASP.NET, e como usá-lo em suas aplicações. Para entender
mais sobre Javascript e DOM, consulte os Apêndices A e B.
Vamos iniciar o nosso exemplo prático 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 aplicação para isso:
2. Clique com o botão 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 código separado para o Web Service. Selecione a opção Place code in separate
file, como mostra a Figura 8.2 a seguir:
Figura 8.2.
4. Clique em Add.
capítulo
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 referência ao
atributo ScriptService implicitamente desta forma:
<ScriptService()> _
Usando Web Services em suas aplicações AJAX ASP.NET 121

Em C#:
[ScriptService]
6. Substitua a função HelloWorld que já está criada no Web Service pela função
Somar. Segue o código:
<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 código do Web Service deve estar assim (Figura 8.3):
Figura 8.3.
O atributo WebMethod precisa estar em todos os métodos do Web Service que

estiverem disponíveis para serem acessados remotamente.

7. Vamos testar nosso Web Service. Para isto, clique com o botão 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 página no seu navegador (Figura 8.5) listando os métodos que es-
tiverem disponíveis para o acesso remoto. No nosso exemplo, apenas o método Somar. capítulo
8
Figura 8.5.

8. Clique em Somar.
Agora você pode testar o método Somar, como mostra a Figura 8.6 seguinte:
Figura 8.6.
9. Teste seu Web Service digitando um número 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 são transmitidos usando o padrão XML.
10. Agora que nosso Web Service já está criado, volte para a página Default.aspx
e verifique se o controle ScriptManager já está adicionado à página; caso não 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 página, precisamos ter uma classe em Javascript com um método
correspondente ao que em questão.
Esta classe vai efetuar a chamada do Web Service e manipular a transferência
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 referência ao mesmo no próprio 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:
capítulo
8
Figura 8.8.
12. Clique sobre as reticências (...) 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 página como um bloco de script (se for true) ou por meio de uma requi-
sição separada (se for false). O valor false é o padrão. O valor false é melhor quando
múltiplas páginas fazem requisição ao mesmo Web Service e se o cache do navegador
estiver habilitado. Já o valor true desta propriedade pode melhorar o desempenho,
reduzindo o número de requisições, o que é especialmente útil quando temos muitas
referências ao Web Service em uma mesma página e poucas nas demais. No nosso
exemplo, não vamos alterar esta propriedade.
Se você verificar o código HTML da sua página, o controle ScriptManager tem
agora uma nova tag chamada Services com referência para o Web Service, como
mostra o código 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 começo deste Capítulo com o uso dos Web Services nós temos
o desenvolvimento orientado para o navegador. Por isso, os Server Controls do ASP.NET
não são muito úteis nestas ocasiões e precisamos usar mais Javascript e DOM.
14. Adicione os seguintes controles HTML à página Default.aspx:

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

15. Mude a propriedade Value do botão para Calcular.
16. Adicione também um controle Label, que será usado apenas para apresentar
o resultado.
17. Organize os controles, como a Figura 8.11 a seguir:
capítulo
Figura 8.11. 8
18. Dê um clique duplo sobre Button1.
Por não ser um Web Control, este botão cria automaticamente uma função para
manipular o seu evento onclick em Javascript, como mostra o seguinte código:
<script language=”javascript” type=”text/javascript”>


</script>
Esta função também já é referenciada no código HTML do botão no evento

onclick para que o navegador possa fazer a chamada corretamente, como mostra o
seguinte código:

< 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 função sozinho e feito a referência no botão, mas o
Visual Studio 2005 ajuda nessa situação também, poupando um pouco de trabalho.
Na verdade, o Visual Studio 2005 só não ajuda muito quando trabalhamos com código
Javascript, mas na próxima versão desta ferramenta teremos muitas novidades que
irão aumentar muito a produtividade, quando no uso desta linguagem de script.
19. Modifique a função Button1_onclick e adicione a função QuandoCompleta,

como mostra o seguinte código:

</script>
Seu código HTML deve estar como na Figura 8.12:
Figura 8.12.

20. Execute sua aplicação. Digite um número em cada caixa de texto e clique no
botão Calcular. O resultado é exibido como mostra a Figura 8.13:
Figura 8.13.
21. Pare a execução de sua aplicação.
Vamos analisar o código das funções Javascript para entender melhor o funcio- capítulo
namento. 8
A função chamada pelo botão é a Button1_onclick. Nela, primeiramente decla-

ramos duas variáveis (numero1 e numero2) que vão armazenar o valor recuperado
das caixas de texto por meio do método getElementById do DOM, como mostra o
código:

A seguir, na mesma função, chamamos o método Somar do Web Service passando

como parâmetro os dois valores, conforme especificado na assinatura do método no
Web Service, como mostra o código a seguir:
Calcular.Somar(numero1,numero2, QuandoCompleta);
Perceba que, para chamar o método Somar, usamos a classe Calcular que foi
criada pelo ScriptManager. Neste método, passamos mais um valor, na verdade, uma

referência a uma outra função (a função QuandoCompleta), que vai receber o valor
retornado pelo Web Service. Assim, enquanto o Web Service retorna o resultado, a
função QuandoCompleta é executada.
A função QuandoCompleta recebe um parâmetro. O nome criado para este
exemplo foi args, mas você pode nomeá-lo como desejar. Este parâmetro é usado
para recuperar o valor dentro da função.
Ainda sobre a função QuandoCompleta, a seguinte linha de código apenas en-
contra o elemento Label1 na página, usando o método getElementById e atribui ao
mesmo o valor que está contido em args.
document.getElementById(‘Label1’).innerText = args;
Opcionalmente, podemos criar mais duas funções Javascript para ajudar no tra-
tamento de erros em chamadas a Web Services. Estas funções podem ser passadas
como parâmetro na chamada ao método do Web Service, como fizemos com a função
QuandoCompleta. Vamos compreender melhor como isso funciona seguindo com
o exemplo.
22. Adicione as seguintes funções Javascript, logo abaixo da função Quando-

Completa:
function QuantoErro(args) {
alert(“Houve um erro na chamada ao web service.”);
}
function QuandoTimeOut(args) {
alert(“A chamada ao serviço excedeu o tempo limite.”);
}
23. Altere a chamada ao método Somar, passando as duas novas funções, como
mostra o código a seguir:
Calcular.Somar(numero1, numero2, QuandoCompleta, QuantoErro,

QuandoTimeOut);

Figura 8.14.
24. Vamos simular um erro no nosso Web Service para ver a função QuantoErro
em ação. Para isto, volte ao painel de código do Web Service e adicione dentro do
método Somar o seguinte código: capítulo
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 código anterior apenas cria um erro ou exceção, impedindo o correto funcio-

namento do método Somar.
25. Execute sua aplicação e teste. A seguinte mensagem deve ser exibida
(Figura 8.16):
Figura 8.16.
Esta mensagem foi exibida porque dentro do método QuantoErro está o código:
alert(“Houve um erro na chamada ao web service.”);
Você pode personalizá-lo para que melhor se adapte à sua aplicação a partir do
código Javascript. O método QuandoTimeOut é executado quando o Web Service
excede o tempo de resposta.

Capítulo 9
Aprofundando no uso do controle UpdatePanel
Neste Capítulo você vai aprender como utilizar o controle UpdatePanel em Mas-
ter Pages e Web Controls e de forma mais abrangente também vamos conhecer um
pouco mais sobre customização de erros em aplicações 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 botão 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 código da página fique em um arquivo separado, como mostra a Figura 9.3:
Figura 9.3.
4. Clique em Add.
5. No código HTML da Master Page digite o seguinte código dentro da tag

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

Esse texto serve apenas para colocarmos algum conteúdo na Master Page de
forma que durante o exemplo fique claro que algum conteúdo da página está sendo
recuperado da página Master Page. É claro que, em suas aplicações, a Master Page
terá bem mais conteúdo, como imagens e até mesmo controles de menu etc.
6. Vá para o modo Design na Master Page, o conteúdo das páginas serão execu-
tados em lugar do ContentPlaceHolder, como mostra a Figura 9.5:
Figura 9.5.
7. Vamos agora excluir a página Default.aspx porque ela não faz referência à
Master Page. Para isto, clique com o botão direito sobre a página Default.aspx na
janela Solution Explorer e selecione Delete, como mostra a Figura 9.6 a seguir:

Figura 9.6.
Você pode adicionar a referência à página Master Page, no código HTML de

uma página ASP.NET sem precisar excluir o arquivo caso seja necessário. Para isto,
você deve adicionar o atributo MasterPageFile=”~/MasterPage.master” à
diretiva @Page da página em questão e colocar o conteúdo da página dentro da
capítulo
tag Content. Para simplificar, no exemplo apenas excluímos a página. Vamos agora 9
adicionar uma nova com referência à Master Page.
8. Clique com o botão 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 opções Place code in separate file e Select master page,

Figura 9.7.
A opção Select master page faz com que uma nova caixa de diálogo seja exibida
após o clique no botão 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 aplicação. A janela Select
a Master Page permite que você escolha qual Master Page será associada à página

que você está criando. Como no nosso exemplo o objetivo é mostrar como utilizar
o UpdatePanel em aplicações com Master Page, apenas a criação de uma será o
suficiente.
A página Default.aspx deve estar semelhante à Figura 9.9 a seguir:
Figura 9.9.
O conteúdo acinzentado deixa claro que o mesmo é proveniente da Master Page.

O conteúdo desta página deve ser adicionado dentro do Content que em tempo de
execução substitui o ContentPlaceHolder da Master Page.
12. Volte para a Master Page e arraste um controle ScriptManager na página

utilizando a guia AJAX Extensions na Toolbox, como mostra a Figura 9.10:
capítulo
9
Figura 9.10.

Você pode adicionar o controle ScriptManager diretamente na Master Page ou
dentro do Content apenas na página que for utilizar AJAX. Durante o exemplo,
vamos trabalhar das duas formas.
Quando você adiciona o ScriptManager na Master Page, todas as páginas que
o tiverem referenciado poderão utilizar o AJAX ASP.NET sem que você precise
arrastar o controle novamente dentro delas. Ou seja, o controle estará disponível em
todas as páginas referenciadas. Neste caso, se você desejar que alguma das páginas
“filhas” não possa usar, o controle precisará fazer isso programaticamente.
Caso você adicione o controle ScriptManager apenas na página, dentro do Con-
tent, nenhuma outra página poderá utilizar o AJAX ASP.NET; a menos, é claro, que
você também adicione um controle ScriptManager dentro da página em questão.
13. Na página 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 código 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 código deve estar assim:
capítulo
9
Figura 9.12.
17. Execute sua aplicação e teste. O resultado deve ser obtido de maneira assín-
crona, como se o controle ScriptManager estivesse diretamente na página Default.
aspx.

Veja na Figura 9.13 o resultado da aplicação:
Figura 9.13.
Se você desejar desabilitar a atualização assíncrona apenas em uma página, será

necessário usar o evento Page_Init da página em questão para iniciar uma instância
do ScriptManager e mudar sua propriedade EnablePartialRendering para false.
Para isso:
18. Adicione o seguinte código dentro da classe da página 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 código deve estar como na Figura 9.14:

Figura 9.14.
19. Execute e teste sua aplicação. Agora a atualização não deve ser assíncrona e
a página deve ser atualizada completamente a cada clique no botão.
20. Remova o procedimento Page_Init ou comente o mesmo para que possamos

utilizar a atualização assíncrona novamente na página Default.aspx.
21. Remova o controle ScriptManager da Master Page e adicione o mesmo na

página Default.aspx, como mostra a Figura 9.15 a seguir:
capítulo
9
Figura 9.15.

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

aplicações AJAX ASP.NET.
23. Para gerar erro em nossa aplicação, basta solicitar uma divisão por zero, como
Figura 9.17.
Uma exceção (erro) é gerada, como mostra a seguinte mensagem (Figura

9.18):

Figura 9.18.
24. Agora, execute a aplicação sem o Debug para que o mesmo não intercepte e
faça a manipulação do erro. Para isto, você pode clicar em Ctrl + F5 ou, no menu
Debug, selecionar Start Without Debugging.
25. Faça novamente uma divisão por zero. O AJAX ASP.NET intercepta e trata o
erro, mas a mensagem (Figura 9.19) é genérica e pode não ser agradável ao usuário
final do seu projeto.
Figura 9.19.
Vamos agora personalizar essa mensagem.

capítulo
9
26. Altere o código 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ê não pode efetuar uma divisão 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ê não pode efetuar uma divisão
de “ & TextBox1.Text & “ por “ & TextBox2.Text)
End Try
Seu painel de código 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 vários catch (como você já deve fazer em suas aplicações
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 aplicação sem o Debug para que o mesmo não
intercepte e faça a manipulação do erro. Para isto, você pode teclar Ctrl + F5 ou no
menu Debug selecionar Start Without Debugging.

28. Tente novamente fazer uma divisão por zero. A seguinte mensagem perso-
nalizada deve ser exibida:
Figura 9.21.
29. Clique em OK e pare a execução do projeto.
Agora você já sabe como criar mensagens de erros personalizadas para suas apli-
cações. Você pode usar todo o poder do bloco de tratamento de erros Try...Cath...
Finally como usa atualmente em suas aplicações ASP.NET.
Para finalizar, neste Capítulo vamos estudar o uso de Web User Controls em
nossas aplicações AJAX ASP.NET.
30. Clique com o botão 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 opção Place code in sepa-
rate file e clique em Add.
capítulo
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 página 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 calendário, os dias são alterados assincronamente sem que a página

seja completamente atualizada.
Para utilizar um Web User Control com o AJAX ASP.NET em sua aplicação,
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 opção.
capítulo
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 código:
Label1.Text = DateTime.Now.ToLongTimeString();
Em VB.NET:
Label1.Text = DateTime.Now.ToLongTimeString()
Veja na Figura 9.28 como deve ficar o código:

Figura 9.28.
38. Adicione o Web User Control que acabamos de criar à página Default.aspx,
capítulo
9
Figura 9.29.

39. Execute e teste a aplicação.
Figura 9.30.
A hora é exibida no Label como especificamos no controle. Vamos agora colocar

um botão na página Default.aspx que, ao ser clicado, atualiza assincronamente a
hora do controle ExibirData.ascx.
39. Adicione um Button na página Default.aspx, como mostra a Figura 9.31:
Figura 9.31.
40. Volte para o Web User Control ExibirData.ascx e adicione o seguinte código
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 código do Web User Control deve ficar assim (Figura 9.32):
capítulo
9
Figura 9.32.

O código anterior torna acessível publicamente por meio do modificador public a
propriedade UpdateMode do controle UpdatePanel1 que está no Web User Control
e o método Update do mesmo controle.
41. Novamente na página 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á disponível aqui porque deixamo-la pública no Web User
Control.
43. Dê um clique duplo sobre o Button2 e adicione o seguinte código 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 código:

Figura 9.34.
Este método também só está disponível porque o tornamos público no Web User
Control.
44. Execute e teste sua aplicação. A cada clique no botão, o controle ExibirData.
capítulo
ascx é atualizado, mas a página é completamente atualizada. 9
Isso acontece porque o controle Button2 é um Server Control e força uma atuali-
zação síncrona através de Post. Para resolver isto, basta adicionar este Button dentro
de um UpdatePanel que esteja na página ou arrastar mais um UpdatePanel para a
mesma e o colocar dentro dela.
45. Adicione um UpdatePanel dentro da página Default.aspx e arraste o Button2

para dentro do mesmo, como mostra a Figura 9.35:

Figura 9.35.
46. Execute e teste sua aplicação. Agora, temos uma atualização AJAX, ou seja,
assíncrona sempre que o button2 é clicado, fazendo uma atualização em um Web
User Control.

Capítulo 10
Aprofundando no uso de Web Services e no
desenvolvimento voltado para o navegador (Cliente-Centric)
Este capítulo é muito importante para quem deseja criar uma aplicação voltada
para o navegador (Client-Centric). Nele, você aprenderá:
• recuperar e enviar dados em forma de tipos complexos, como objetos, por
exemplo, através de Web Services;
• usar um arquivo separado de código Javascript, centralizando o código no
mesmo, melhorando assim a clareza e facilitando a manutenção;
• conhecer e usar o controle ScriptManagerProxy;
• usar métodos da classe da própria página para comunicação em XML como
em um Web Service;
• conhecer ainda mais profundamente sobre a manipulação de erros em chamadas
a Web Services.
Vamos compreender os conceitos propostos na prática 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 botão direito sobre o nome do projeto
e selecione Add New Item.
3. Em Templates, selecione Master Page, certifique-se que a opção 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 página Master Page utilizando a guia

AJAX Extensions na Toolbox.
OBSERVAÇÃO
capítulo
10
Quando você adiciona o ScriptManager na Master Page, todas as páginas
que a tiverem referenciado poderão utilizar o AJAX ASP.NET sem que você
precise arrastar o controle novamente dentro delas. Ou seja, o controle estará
disponível para todas as páginas referenciadas. Quando você adiciona o controle
ScriptManager apenas na página dentro do Content, nenhuma outra página
poderá utilizar o AJAX ASP.NET; a menos, é claro, que você também adicione
um controle ScriptManager dentro da página em questão.
Aprofundando no uso de Web Services ... 159

6. No código HTML da Master Page, digite o seguinte código 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 conteúdo na Master Page, de forma
que, durante o exemplo, fique claro que algum conteúdo está sendo recuperado da
página Master Page.
7. Vamos agora excluir a página Default.aspx criada automaticamente pelo Visual

Studio porque ela não faz referência à Master Page. Para isto, clique com o botão
direito sobre a página Default.aspx na janela Solution Explorer e selecione Delete.
Você pode adicionar a referência à página Master Page no código HTML de uma
página ASP.NET sem precisar excluir o arquivo caso seja necessário. Para simplificar
nosso exemplo, apenas excluímos a página. Vamos agora adicionar uma nova página
com referência à Master Page.

8. Clique com o botão 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 opções Place code in separate file e Select master page,
Figura 10.4.
OBSERVAÇÃO
Você pode ter mais do que uma Master Page em sua aplicação. A janela Select
a Master Page permite que você escolha qual Master Page será associada à
capítulo
página que você está criando. A opção Select master page faz com que uma 10
nova caixa de diálogo seja exibida após o clique no botão 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 página Default.aspx é criada. O próximo passo é adicionar um Web Ser-

vice à nossa aplicação.
12. Na janela Solution Explorer clique com o botão direito sobre o nome do
projeto e selecione Add New Item.
13. Em Templates, selecione Web Service. Certifique-se que a opção 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 aplicações, vamos criar uma classe simples chamada Produto, antes de progra-
marmos o código 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 botão 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.
capítulo
17. Clique em Add. 10
18. Você então é questionado se deseja adicionar o arquivo da classe em uma

pasta especialmente reservada a ele chamada App_Code. Isto é uma boa prática,
clique em Sim.
Figura 10.8.

19. Digite o seguinte código 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 código deve estar semelhante ao da Figura 10.9:
Figura 10.9.
Vamos agora implementar o código do Web Service. Para permitir que o Web Ser- capítulo
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 código:
using System.Web.Script.Services;
Em VB.NET:
Imports System.Web.Script.Services

21. Adicione a referência ao atributo logo acima da declaração da classe com o
código:
[ScriptService]
Em VB.NET:
<ScriptService()> _
Se você desejar, poderá fazer a referência completa explicitamente, usando o

seguinte código:
[System.Web.Script.Services.ScriptService]
Em VB.NET:
<System.Web.Script.Services.ScriptService()> _
Dessa forma, você não precisa fazer referência ao namespace no topo da

classe.
22. Adicione o método RecuperaProduto dentro da classe do Web Service, usando

o seguinte código:
[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 código deve estar semelhante à Figura 10.10:
Figura 10.10.
Este é um método simples que retorna um objeto do tipo Produto ao molde da

classe que criamos. No código, apenas criamos um objeto Produto chamado p, com
a linha a seguir:
Produto p = new Produto();
Em VB.NET: capítulo
10
Dim p As New Produto
Depois, atribuímos 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 código a seguir:
return p;
Em VB.NET:
Return p
Para que você compreenda como centralizar seu código Javascript em um arquivo
separado vamos criar agora um arquivo com a extensão .js.
23. Novamente, clique com o botão 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 código 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:
capítulo
10
Figura 10.12.
A maior parte deste código não é novidade para você, entretanto, caso tenha dú-
vidas, consulte o Capítulo 8. Apenas fique atento ao parâmetro 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 idêntica a que estamos acostumados
em nossas aplicações ASP.NET, mas dessa vez em Javascript. Veja o código:

var nome = args.Nome;
var descricao = args.Descricao;
var quantidade = args.Quantidade;
27. Na página 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 Capítulo 8, para utilizarmos um Web Service em nossa página
precisamos fazer referência ao mesmo. Isto faz com que o AJAX ASP.NET 2.0 gere
o código necessário para que usemos a classe e os métodos do nosso Web Service
em nossas aplicações AJAX. Para isso:
29. Na Master Page, clique sobre o controle ScriptManager e, na janela Properties,

localize a propriedade Services.
30. Clique sobre as reticências (...) 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 extensão .js) em

nossa página, também precisamos fazer referência 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:
capítulo
10
Figura 10.15.
32. Clique sobre as reticências (...) 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 código HTML da sua Master Page o controle ScriptManager

agora tem uma nova tag chamada Scripts com referência para o arquivo JScript.js
como mostra o código a seguir:

<Services>
<asp:ServiceReference Path=”WebService.asmx”
/>
</Services>
<Scripts>
<asp:ScriptReference Path=”JScript.js” />
</Scripts>
33. Antes de executar a aplicação, você precisa alterar o código HTML do Button1
adicionando o evento onclick com referência à função Javascript Button1_onclick que
está no arquivo de script. Segue como deve ficar o código HTML do Button1:
<input id=”Button1” type=”button” value=”Atualizar” onclick=”Button1 _

onclick()” />
34. Execute sua aplicação. Clique no botão 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 página Master Page e apague as referências tanto para o Web
Service quanto para o arquivo de script do controle ScriptManager. O código HTML
do seu controle ScritpManager deve ficar assim:
36. Na página Default.aspx, adicione um controle ScriptManagerProxy utilizando

a guia AJAX Extensions na Toolbox, como mostra a Figura 10.18:
capítulo
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 referências ao Web Service e ao arquivo JScript.js ao ScriptMa-

nagerProxy, como você faz com o controle ScriptManager.
O código 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 aplicação. 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 página em questão.
Se você deixar a referência ao Web Service no controle ScriptManager na Master
Page, todas as páginas que fizerem referência a ela poderão usar o Web Service em
questão. Mas quando você quer que apenas uma das páginas consiga acessar um
determinado Web Service você adiciona um ScriptManagerProxy dentro da própria
página que faz a referência.
O controle ScriptManagerProxy não substitui o controle ScriptManager. Você
ainda precisa ter o ScriptManager na página por meio da Master Page, como usamos
no nosso exemplo.
Também pode ser útil em suas aplicações o uso do controle ScriptManagerProxy
associado a Web User Control.
Você pode usar um método da própria página ASP.NET como um WebMethod.
Neste caso, você não precisa criar um arquivo separado para o Web Service com
extesão .asmx. Para isso:
40. Na página Default.aspx, importe o namespace System.Web.Services usando

o seguinte código:
using System.Web.Services;
Em VB.NET:
Imports System.Web.Services
Isso permite que você adicione o atributo WebMethod em um método da própria

página ASP.NET.
capítulo
10
41. Dentro do procedimento de evento Page_Load da página Default.aspx, digite
o seguinte código:
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 código apenas adiciona na seção a hora em que a página foi executada.
Este valor será recuperado em AJAX usando um método da própria página, que
criaremos a seguir:
42. Adicione o método RecuperarHoraLoad dentro da classe da página Default.

aspx, usando o seguinte código:
[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 método acessível a clientes remotos de forma

semelhante ao Web Service. Em C# o método precisa ter o modificador static e em
VB.NET o modificador Shared como mostra a Figura 10.21 e o código a seguir:
Figura 10.21.

43. Adicione as seguintes funções 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 serviço excedeu o tempo limite.”);
}
A Figura 10.22 ilustra o arquivo JScript.js após a inclusão das novas funções:
capítulo
10
Figura 10.22.

Quando vamos chamar um método da própria página, usamos o PageMethod
seguido do nome do método e seus respectivos parâmetros, como mostra o código
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 possível o uso de WebMethods da própria página em

nossas aplicações.
45. Adicione mais um controle HTML do tipo Input (Button) na página Default.
aspx, como mostra a Figura 10.24:
Figura 10.24.

Esse botão será responsável por chamar a função que recupera a hora do início
da sessão utilizando o método RecuperarHoraLoad da própria página Default.aspx,
que está com o atributo WebMethod. Para isto:
46. Altere o código HTML do Button2 adicionando o evento onclick com referên-
cia à função Javascript RecuperarValorSessao que está no arquivo de script. Segue
como deve ficar o código HTML do Button2:
<input id=”Button2” type=”button” value=”button” onclick=”Recuper

arValorSessao()” />
47. Execute sua aplicação. Clique no Button2.
A hora de início da seção é exibida, como mostra a Figura 10.25:
capítulo
10
Figura 10.25.
Agora para finalizar, vamos apresentar alguns métodos que ajudam na manipu-
lação de erros em chamadas a Web Service.
48. No arquivo JScript.js altere o conteúdo da função 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 função após a alteração:
Figura 10.26.
49. No painel de código da página Default.aspx vamos criar um erro usando o

seguinte código.
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 código:
Figura 10.27.
As seguintes mensagens de erro são exibidas como solicitamos no código Javas-

cript da função que trata o erro:
Para o método get _ stackTrace() (Figura 10.28):

capítulo
10
Figura 10.28.
Para o método get _ message() (Figura 10.29):

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

Capítulo 11
AJAX Control Toolkit
O AJAX Control Toolkit é um conjunto de componentes prontos para você
utilizar em suas aplicações AJAX ASP.NET . Além disso, ele disponibiliza um fra-
mework que torna fácil para você desenvolver novos componentes de acordo com a
sua necessidade.
O código 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 (código fonte aberto).
O AJAX Control Toolkit é construído usando como base o AJAX ASP.NET, que
você conheceu a fundo nos Capítulos 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 apresentação da suas
aplicações 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 botão Download the Control Toolkit, como mostra a Figura 11.2:

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

capítulo
11
Figura 11.3.
AJAX Control Toolkit 185

Você pode optar por fazer o download do AJAX Control Toolkit sem o código-
fonte, como foi mostrado na Figura 11.3.
4. Serão exibidos os termos de licença 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 preferência; 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:
capítulo
11
Figura 11.7.
Para descompactar o arquivo, vou usar o Assistente para extração do próprio Win-
dows XP SP2. No entanto, você pode usar o WinZIP ou WinRAR, como preferir.

7. Para usar o Assistente para extração, você clica com o botão 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 Avançar.
9. Como eu disse anteriormente, você pode descompactar os arquivos onde prefe-

rir; a minha preferência 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 Avançar.
Os arquivos vão 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:
capítulo
11
Figura 11.12.

A pasta AjaxControlExtender contém um instalador que será usado logo a seguir
para instalar templates na sua máquina que facilitam a criação de aplicações usando
o AJAX Control Toolkit no Visual Studio .NET 2005.
A pasta AjaxControlToolkit contém o código-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 informações inportantes sobre como usar os controles do AJAX Control
Toolkit, além de ser uma referência importante.
A pasta TemplateVSI contém os arquivos do projeto, que por sua vez gerará a
instalação do software que está na pasta AjaxControlExtender.
Na pasta ToolkitTests, você encontrará testes automatizados para cada um dos
controles. Estes testes são úteis principalmente se você quiser colaborar com a co-
munidade no CodePlex ou fizer alterações nos controles.
Você pode abrir a solução clicando em AjaxControlToolkit.sln. No entanto, a
solução não 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.

capítulo
11
15. Então, clique em Finish (Figura 11.16).

Figura 11.16.
A instalação vai ser executada.
16. Clique em Close (Figura 11.17).
Figura 11.17.
A instalação está concluída.

Conhecendo o AJAX Control Toolkit
1. Crie uma nova aplicação, mas, desta vez, ao invés 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 instalação do AjaxControlEx-

tender.vsi.
O nome usado para a nova aplicação foi IntroAJAXControlTookit. Neste exemplo,

usarei a linguagem VB.NET.
Após clicar em OK, a aplicação é criada, como mostra a Figura 11.19:
capítulo
11
Figura 11.19.

2. Abra a página Default.aspx, como mostra a Figura 11.20:
Figura 11.20.
3. Na parte final da Toolbar, clique com o botão direito sobre a mesma selecio-
nando a opção 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 botão direito na guia que acabamos de criar e selecione a opção
Choose Items (Figura 11.23).
capítulo
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.
Nós precisamos adicionar os controles manualmente porque o AJAX Control

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

11.27 a seguir mostra alguns deles:
capítulo
11
Figura 11.27.

Muitos desses controles, como você pôde 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 à página Default.aspx, como mostra a Figura

11.28:
Figura 11.28.
Para usar o AJAX Control Toolkit você precisa ter o controle ScriptManager na
página 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 código no procedi-

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

Label1.Text = DateTime.Now.ToLongTimeString();
Seu painel de código 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 página Default.aspx.
Para utilizar o AJAX Control Toolkit você não precisa necessariamente criar
sua aplicação usando o template AJAX Control Toolkit Web Site. Ao arrastar um
controle para a página, as dlls necessárias são 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
capítulo
ao projeto na criação do mesmo. Selecione Apply to all items e clique em Yes (Figura
11
11.30).
Figura 11.30.

O controle é adicionado ao formulário, 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 seleção da propriedade TargetControlID.
Se tivessem mais botões em nossa página, 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
são 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
são 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

capítulo
11
Figura 11.34.

17. Execute sua aplicação e clique no botão.
É exibida uma mensagem de confirmação, como mostra a Figura 11.35:
Figura 11.35.
Se você clicar em Cancelar nada vai acontecer. Mas, ao clicar em OK, a ação definida
no evento Click do Button1 é executada, como mostra a Figura 11.36:
Figura 11.36.
18. Pare a execução do programa.

Vamos conhecer mais um controle.

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

Control Toolkit na Toolbox, como na Figura 11.38:
capítulo
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 aplicação (Figura 11.41).

Figura 11.41.
No nosso exemplo não temos conteúdo na página 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 visualização.
A Figura 11.42 mostra o painel alinhado na parte inferior:
capítulo
11
Figura 11.42.

Agora você já conhece o AJAX Control Toolkit e é capaz de utilizá-lo em suas
aplicações. A seguir, uma apresentação dos controles.
Para visualizar os controles em ação, acesse o site: http://ajax.asp.net/ajaxtoolkit/.
• Controle Accordion: este controle permite que você crie múltiplos painéis e exiba
um deles de cada vez bastando clicar no título do mesmo (Figura 11.43);
Figura 11.43.
• Controle AlwaysVisibleControlExtender: permite deixar um controle ASP.NET

sempre visível na página. Veja, a seguir, as posições disponíveis:
• 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
página. Não importa o conteúdo da página ou a rolagem da mesma, a hora vai ficar
sempre na mesma posição.

Figura 11.44.
• Controle Animation: adiciona efeitos e animações à sua página;
• Controle AutoCompleteExtender: através do uso de Web Service, você pode

recuperar informações que o ajudem a autocompletar um controle TextBox de
acordo com a digitação do usuário (Figura 11.45);
Figura 11.45.
• Controle CalendarExtender: pode ser usado em conjunto com o TextBox para

que, quando o usuário clique no mesmo, seja exibido um calendário para facilitar
a digitação/entrada de dados no formato de data (Figura 11.46);
capítulo
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 página. 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

confirmação antes do evento do botão ser executado. Se o usuário clicar em
cancelar, o evento não será disparado (Figura 11.49);
Figura 11.49.
• Controle DragPanelExtender: permite que um controle seja “arrastado”, ou

seja, movimentado pelo usuário pela página 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 exibição de uma sombra em um

controle Panel. Você pode especificar várias opções para personalizar esta
sombra (Figura 11.52);
Figura 11.52.
• Controle DynamicPopulateExtender: modifica o conteúdo de um controle ASP.

capítulo
NET com o resultado de uma chamada a um Web Service; 11
• Controle FilteredTextBoxExtender: ajuda a prevenir a entrada de dados inválidos

de usuários em controles TextBox. Por exemplo, usando este controle você pode
restringir a digitação em apenas números, apenas letras minúsculas 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 conteúdo em que ponteiro do mouse vai passando por cima;
• Controle ListSearchExtender: permite que você localize informações 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. Parabéns Cerqueira!;
Figura 11.53.
• Controle ModalPopupExtender: exibe uma janela que quando ativa somente

seu conteúdo 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 não poderão selecionar a mesma linha de opção. Este controle é útil

quando temos dois controles CheckBox em que podem ser selecionadas várias
opções em cada um deles, mas não podem ser selecionadas opções 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 botões, um para cima e outro para baixo, de modo que, ao
clicar nos botões, os valores vão sendo modificados. Você pode usar os botões
para incrementar e decrementar o valor do TextBox de forma aritmética sim-
ples, como +1 ou -1; também pode exibir um a partir de uma lista de valores,
como meses ou anos; além 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 paginação;
• Controle PasswordStrength: avalia o conteúdo de um TextBox determinando

o nível 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 informações adicionais
que ajudam a preencher o controle ASP.NET (Figura 11.57);
capítulo
11
Figura 11.57.
• Controle Rating: permite que os usuários selecionem um número de estrelas,

que possibilitará avaliar determinado conteúdo. Muito útil em tutoriais, blogs
e fóruns (Figura 11.58);

Figura 11.58.
• Controle ReorderList: permite reordenar uma lista de itens interativamente;
• Controle ResizableControlExtender: permite o redimensionamento pelo usuário

de um elemento da página;
• Controle RoundedCornersExtender: permite arredondar os cantos de um ele-

mento na página. Você pode escolher quais cantos deseja arredondar, angulação
e borda;
• Controle SliderExtender: exibe uma barra de rolagem que pemite ao usuário

escolher um valor dentro de uma faixa definida. Pode ser usado na horizontal
e vertical (Figura 11.59);
Figura 11.59.
• Controle SliderShowExtender: disponibiliza botões para navegação em uma

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

• Controle Tabs: cria uma série de guias que podem ser utilizadas para organizar
o conteúdo da página (Figura 11.61);
Figura 11.61.
• Controle TextBoxWatermarkExtender: exibe uma marca d’água 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 atualização
assíncrona;
• Controle ValidatorCalloutExtender: aumenta a funcionalidade dos controles

de validação do ASP.NET, permitindo a exibição de uma janela com informa-
ções detalhadas sobre o preenchimento do campo, incluindo um ícone (Figura capítulo
11.64). 11
Figura 11.64.

Apêndice A
Javascript
Para utilizar o Javascript em uma página HTML, é usada a tag <script> e o
atributo type, definido como: text/javascript. Exemplo:
//códigos JavaScript
</script>
Assim, o navegador entenderá que no conteúdo dessa tag há comandos Javascript

para serem executados.
Você pode inserir seu código Javascript em três locais na página HTML. São
eles:
• Arquivo externo com extensão .js;
• No head – entre as tags <head> e </head>;
• No body – entre as tags <body> e </body>.
Você pode usar uma combinação desses locais também.
Vamos conhecer a peculiaridade de cada uma deles.
Arquivo externo com extensão .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 localização do

arquivo externo, assim, o navegador pode localizá-lo e executá-lo.
Em arquivos externos não utilizamos a tag <script>, somente os códigos.
Vamos conhecer algumas das vantagens de se trabalhar dessa forma:
• Facilidade na manutenção: uma vez que o script está localizado em apenas um
arquivo, você tem um local central para edição ou correção dos códigos;
• Carregamento mais rápido da página: o arquivo externo é armazenado no cache
do navegador. Assim, o navegador não precisa baixá-lo em todas as páginas que
fazem referência ao mesmo;
• Semântico: o arquivo externo separa a camada de comportamento (Javascript)
da camada de conteúdo (HTML).

No head – entre as tags
<head> e </head>
O script é inserido desta forma:
<head>
</script>
</head>
Os códigos Javascript localizados entre as tags <head> e </head> da página

são 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 alguém utilizá-lo, ou seja, antes do
carregamento do conteúdo que está entre as tags <body> e </body>.
No body – entre as tags

<body> e </body>
O script é inserido desta forma:
<body>
</script>
</body>
Os códigos inseridos entre as tags <body> e </body> da página são inicialmente

executados enquanto a página é carregada, mas também podem ser chamados quando
algum evento for provocado.
A tag <noscript>
A tag <noscript> nos permite disponibilizar um conteúdo alternativo ao dis-

posto via script. Isso significa que dentro desta tag disponibilizamos conteúdo para
o usuário que não tiver suporte ao Javascript em seu navegador. apêndice
A
Veja um exemplo:
Apêndice A 217
alert(“Olá fulano.”);
</script>
<noscript>
<p>Olá fulano.</p>
</noscript>
No exemplo anterior, será exibida a mensagem “Olá fulano”, através do alert()

– uma função do Javascript que exibe uma mensagem através de um popup box – para
quem tem suporte ao Javascript. Caso contrário, a mesma mensagem aparecerá para
quem não tem suporte ao Javascript, porém, através da tag <noscript> na forma
de texto.
Comentários em Javascript
Tudo que estiver englobado pelos comentários é ignorado pelo interpretador do

Javascript.
Há dois tipos de comentários, são eles: // e /* */. O primeiro é o comentário de
somente uma linha, enquanto o segundo suporta várias linhas e é conhecido como
comentário de bloco.
Observe os exemplos:
// Comentário de uma linha.
/* Comentário de várias linhas, o interpretador ignora todo esse

conteúdo. O que nos permite a criação de notas e lembretes em
nossos códigos. */
</script>
Ainda sobre comentários em Javascript, observe que os navegadores que não o

suportam irão exibi-lo como se fosse parte do conteúdo da página. Para prevenir esta
prática, utilizamos o comentário em HTML associado ao código Javascript.
<head>

</script>
</head>

As duas barras (//) antes do fechamento do comentário previnem que o interpre-
tador do Javascript as interpretem.
Case Sensitive
Javascript é uma linguagem Case Sensitive, ou seja, diferencia minúsculas de

maiúsculas. Meu é diferente de meu em Javascript. Então, tenha atenção ao digitar
os comandos e usar as variáveis Javascript em suas aplicações.
Ponto-e-vírgula (;) no final das declarações
Uma boa prática ao programar utilizando Javascript é sempre usar o ; (ponto-e

-vírgula) no final das suas declarações, mas seu uso não é obrigatório.
Você precisa utilizar o ponto-e-vírgula se usar algum compressor de Javascript,
para reduzir o tamanho do arquivo. Como os compressores distribuem os códigos
em uma única linha, sem eles será impossível determinar onde começa e termina
uma instrução, ocasionando erro.
Variáveis
Vejamos um exemplo de como declarar uma variável:
var nomeVariavel = “valorVariavel”;
ou
nomeVariavel = “valorVariavel”;
Você pode criar uma variável com ou sem a declaração var, mas é aconselhável
utilizá-la.
Quando criamos uma variável dentro de uma função, a tornamos local, ou seja,
acessível somente dentro da função em que foi criada. Já as variáveis globais, são
declaradas fora das funções e ficam acessíveis a toda e qualquer função na página
em que a variável esteja.
Exemplo de como atribuir um valor a uma variável:

apêndice
A
numeroFuncionario = 23;
Entendemos pelo sinal de igual como recebe. Assim, numeroFuncionario

recebe 23.
Apêndice A 219
Operadores
Operadores são usados para representar expressões de cálculo, comparação,

condição e atribuição. Portanto, temos os seguintes tipos de operadores:
Operadores aritméticos
Operador Representação em Javascript Exemplo

Multiplicação * a * b Multiplica-se o valor de a por b.
Divisão / a / b Divide-se o valor de a por b.
Módulo % a % b Retorna o resto da divisão de a por b.
Adição + a + b Soma de a e b.
Subtração - a – b Subtração de a com b.
Incremento ++ a ++ Neste caso, é somado 1 ao valor de a.
Decremento -- a -- Neste caso, é subtraído 1 do valor de a.
Tabela Ap. A.1: Operadores aritméticos.
Operadores de relacionais
Operador Representação Exemplo

em Javascript
Maior > a > b Se o valor de a for maior que o valor de b, então o
resultado desta expressão é verdadeiro, senão é falso.
Maior ou igual >= a >= b Se o valor de a for maior ou igual o valor de b,

então o resultado desta expressão é verdadeiro, senão
é falso.
Menor < a < b Se o valor de a for menor que o valor de b, então

o resultado desta expressão é verdadeiro, senão é
falso.
Menor ou igual <= a <= b Se o valor de a for menor ou igual que o valor
de b, então o resultado dessa expressão é verdadeiro,
senão é falso.
Igual a == a == b Se o valor de a for igual ao valor de b, então o

resultado dessa expressão é verdadeiro, senão é 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) então o resultado desta expressão é verdadeiro, senão
é falso.
Diferente de != a != b Se o valor de a for diferente do valor de b, então

o resultado desta expressão é verdadeiro, senão é
falso.
Tabela Ap. A.2: Operadores de relacionais.

Operadores lógicos
Operador Representação 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, senão é falso.
Ou || a == 5 || b > 9 Se o resultado de a for igual a cinco ou o valor

de b for maior que nove, então o resultado é verdadeiro. O
resultado só será falso se as duas expressões retornarem falso.
Não ! ! a == 5 Se o resultado de a for igual a 5, então o resultado

será falso. O operador não inverte o resultado da expressão.
Tabela Ap. A.3: Operadores lógicos.
Operadores de atribuição
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 atribuição.
Operador condicional
Operador condicional é aquele que atribui um valor a uma determinada variá-
vel com base em uma condição, ou seja, se a condição for verdadeira, teremos um
valor x, caso contrário, um valor y.
Conheça a sintaxe desse tipo de condição:
nomeDaVariável = (condição) ? valorSeVerdadeiro : valorSeFalso;
Agora, observe um exemplo para uma melhor compreensão:
var nota = 65;

apêndice
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 variável resposta com um valor
Apêndice A 221
condicional, ou seja, se o valor da variável nota for maior ou igual a 60, teremos o
valor Aprovado, caso contrário, teremos Reprovado.
Estruturas de controle
Como o próprio nome diz, as estruturas de controle servem para controlar a
execução dos nossos programas. Elas são dividas em:
Estruturas de decisão
Em Javascript temos as seguintes estruturas de decisão:
Declaração if
Sintaxe:
if (condição) {
//código a ser executado quando a condição for verdadeira.
}
Exemplo:
var idade = 19;

if(idade >= 18) {
alert(“Você pode ter sua carteira de motorista”);
}
No exemplo anterior, a declaração if verifica se a variável idade é maior ou igual

a 18. Como a condição é verdadeira, ou seja, a variável idade tem o valor 18, será
exibido o texto Você pode ter sua carteira de motorista.
Declaração if...else
Sintaxe:
if (condição) {
} else {
//código a ser executado quando a condição for falsa.
}
Exemplo:

var sexo = “feminino”;
if(sexo == “masculino”) {
alert(“Homem!”);
} else {
alert(“Mulher!”);
}
No exemplo anterior, a declaração if verifica se a variável sexo é igual a mascu-

lino. Como a condição é falsa, ou seja, a variável sexo não tem o valor masculino e,
sim, feminino, será exibido o texto Mulher.
Declaração if...else if...else

Sintaxe:
if (condição) {
} else if (2º condição) {
//código a ser executado quando a 2º condição for verdadeira.
} else {
//código a ser executado quando a primeira e a segunda condição
forem falsas.
}
Exemplo:
var moeda = “Dólar”;

if(moeda == “Real”) {
alert(“Você precisa usar o Real!”);
} else if(moeda == “Dólar”) {
alert(“Você precisa usar o Dólar!”);
} else {
alert(“Você não pode usar nem o dólar nem o real!”);
}
No exemplo acima, realizamos duas verificações: perguntamos se a variável moeda

tem o valor Real (a primeira). Caso seja verdadeiro, exibirá o texto Você precisa usar
o Real; e perguntamos se a mesma variável tem o valor Dólar (a segunda). Neste
caso, exibirá o texto Você precisa usar o Dólar!
Caso a variável não tenha nenhum dos dois valores – Real ou Dólar –, exibirá o
texto Você não pode usar nem o dólar nem o real.
apêndice
A
Declaração switch
Sintaxe:
Apêndice A 223
switch(expressão) {
case valor 1:
//código a ser executado se a expressão = valor 1;
break
case valor 2:
//código a ser executado se a expressão = valor 2;
break
default:
//código a ser executado se a expressão 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 São Paulo.”);
break
case “SC”:
alert(“Você mora em Santa Catarina.”);
break
default:
alert(“Em que estado você mora?”);
}
Temos a variável estado com o valor PR. Iniciamos nossa declaração condicional
com o switch, passando a ele como parâmetro a expressão (variável) estado.
Então, utilizamos o case. Para isto, é necessário verificar o seguinte: se o valor
da variável for PR, exibimos um texto; se for SP, exibimos outro, e assim por diante;
se o valor da variável não coincidir com nenhum dos valores nos cases, exibimos um
texto padrão (default).
O valor da expressão é comparado com os valores de cada case da estrutura. Caso

ocorra um valor semelhante, o código a ele associado é executado.
O break previne que o próximo case seja executado automaticamente.
Estruturas de Repetição
Em Javascript temos as seguintes estruturas de repetição:

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

incremento) {
//código a ser executado.
}
Exemplo:
var numero = 1;
for (numero = 1; numero <= 10; numero++) {
alert(“Numero atual: “ + numero);
}
No exemplo anterior, temos a variável 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 variável numero, seguido de um incremento (++). Isso significa
dizer que o loop iniciará com a variável numero com o valor 1 e finalizará quando
ela alcançar um valor maior que 10. O código a ser executado será uma mensagem
de alerta dizendo ao usuário o número atual do looping. Resumindo: enquanto a
variável numero for menor ou igual 10, o código 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 código é executado apêndice
enquanto a condição for verdadeira. A
Loop do...while
Sintaxe:
Apêndice A 225
do {
} while (var <= valorFinal);
Exemplo:
var numero = 1;
do {
alert(“Número atual: “ + numero);
numero = numero + 1;
} while (numero < 1).
Essa estrutura é igual ao While, só que a condição é verificada no final do bloco

de código. Por isso, mesmo que o valor da condição seja falso ele vai executar o código
associado pelo menos uma vez.
Break
O comando break interrompe a execução do loop. Exemplo:
var numero = 15;

for (numero = 15; numero < 20; numero++) {
if(numero == 17) {
break;
}
alert(“Número: “ + numero);
}
Utilizamos a condição if para detectar quando a variável numero estiver no

número 17. Quando isto ocorrer, utilizamos o comando break para interromper o
loop, assim, chegaremos somente até o número 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 número 24 até o 34, porém, o
comando continue interrompe a exibição do número 30.
Pop-up boxes
Existem três tipos de Pop-up boxes com Javascript. São 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”,””);

apêndice
A
Veja, na Figura Ap. A.3, como o navegador se comportará:
Apêndice 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.
Funções
Função é um conjunto de códigos a serem executados para uma determinada

finalidade. Quando você estiver escrevendo seus programas, vai notar que muitos
códigos digitados são iguais, ou seja, que você precisa digitá-los em vários locais.
As funções auxiliam nisso. Você pode criar funções e depois chamá-las em seu
programa sempre que for necessário.
Você pode chamar uma função de qualquer lugar da página ou até mesmo de
outras páginas, contanto que o script esteja em um arquivo externo (.js).
As funções podem conter parâmetros ou não; quando eles existem, são informados
à função quando a chamamos.
Questões importantes sobre o uso de funções

• a palavra function sempre deve ser escrita com letras minúsculas;
• o nome da função pode conter letras minúsculas e/ou maiúsculas;
• as chaves { } indicam o início e o término da função;
• mesmo que uma função não contenha parâmetros, os parentêses ( ) devem ser
incluídos após o nome da função.

Sintaxe – sem parâmetros
function nomeDaFuncao() {
//códigos referente à função.
}
Exemplo:
function HelloWorld() {
alert(“Olá mundo.”);
}
// Exemplo para chamá-la.
<a href=”#” onclick=”javascript:HelloWorld();”>Chamar a Função</a>
Sintaxe – com parâmetros
function nomeDaFuncao(varivel 1, variavel 2, ...) {

//códigos referente à função.
}
Exemplo:
function HelloWorld(nome) {
alert(“Olá “ + nome);
}
// Exemplo para chamá-la.
<a href=”#” onclick=”javascript:HelloWorld(‘Moroni’);”>Chamar a
Função</a>
Esta mensagem pode ser personalizada uma vez que o parâmetro passado a ela
é o nome de algum usuário.
Quando queremos que uma função retorne algum valor, utilizamos a declaração
return, que tem o papel de especificar o valor retornado pela função.
Exemplo:
function calculo(valor1,valor2) {
total = valor1 * valor2;
return total;
}
// Chamando a função através do alert().
alert(calculo(23,5)); apêndice
A
Apêndice A 229
No exemplo anterior, chamamos a função calculo fornecendo a ela dois parâ-
metros: valor1 (23) e valor2 (5). Nesta função, temos a variável total que multiplica
os dois parâmetros informados e retorna o valor utilizando o return.
Eventos
Podemos definir um evento como uma ocorrência ou algum acontecimento

realizado por uma página, uma ação do mouse, teclado, entre outros. Esses eventos
podem ser detectados pelo Javascript e disparar código associado aos mesmos.
Em muitos dos casos, os eventos são utilizados em combinação com as funções.
Isso significa dizer que a função não será executada até que o evento ocorra.
Vamos conhecer os principais eventos:
• onclick
O evento onclick ocorre quando o usuário clica sobre algum elemento da
página, por exemplo: um link, uma imagem, um botão entre outros.
Exemplo:
onclick=”javascript:nomeDaFuncao(parametroSeHouver);”
• onload e onunload
O evento onload é executado quando uma página HTML é carregada por com-
pleto, incluindo as imagens. Já o evento onunload ocorre quando o usuário sai
de uma página. Eles são 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 validação de um formulário utilizamos o evento onsubmit,
o que significa dizer: ao enviar os dados do formulário. Este evento trabalha em
conjunto com uma função da seguinte forma: associamos ao formulário a chamada
de uma função, 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 formulário é enviado, caso contrário, o envio
é bloqueado até que os dados sejam preenchidos como desejamos.
Exemplo:
onsubmit=”return confereFormulario();”
O evento onclick também pode chamar uma função para validar um formulário,
assim como outros eventos.
• onfocus, onblur e onchange
Esses três eventos são utilizados na maioria das vezes em associação com algum
elemento de formulário.
O evento onfocus ocorre quando o usuário 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 clássico para o evento onchange (ao trocar/mudar) é quando
alteramos uma opção na lista de um combobox. Nesta ação, ocorre o onchange.
Exemplos:
onfocus=”funcaoParaFocus();” onblur=”funcaoParaBlur();”
<select ... onchange=”funcaoParaChange();” ...>
• onkeydown, onkeypress e onkeyup

Esses três eventos são utilizados em associação com o teclado. Com eles, podemos
contar os caracteres de uma textarea, realizar o preview de algum texto, efetuar uma
busca instantânea, entre outras opções.
Os eventos onkeydown e onkeypress são semelhantes e ocorrem quando uma
tecla é pressionada pelo usuário em seu teclado. Já o onkeyup é executado quando
a tecla é liberada, ou seja, quando for pressionada e em seguida liberada.
Exemplos:
apêndice
onkeydown=”funcaoParaKeyDown();”
onkeypress=”funcaoParaKeyPress();” A
... onkeyup=”funcaoParaKeyUp();” ...
Apêndice A 231
Arrays
O Array possibilita armazenarmos diversos valores em uma única variável. Des-

sa forma, seria uma variável com vários valores e esses valores são armazenados e
acessados por meio de uma ordem.
Como exemplo, imagine uma variável 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 estão corretos. A diferença entre eles é que o se-
gundo informa o tamanho (valor total) que o Array terá através do número 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 numérico do valor. É importante lembrar que o índice
numérico se inicia com 0 (zero).

Se você especificar algum número ou os valores true/false (verdadeiro/falso) como
o valor de um Array, o tipo da variável será numérica e Booleana, respectivamente,
ao invés de string.
Os métodos mais utilizados do objeto Array()
Método Descrição
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: Métodos mais utilizados do objeto Array().
Data
Para trabalharmos com datas e horários em Javascript fazemos uso do objeto

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

alert(dataAtual);
No exemplo anterior, teremos a data e o horário 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 várias práticas eficientes.

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

A
var mes = new Array(12)
mes[0] = “Janeiro”;
mes[1] = “Fevereiro”;
mes[2] = “Março”;
Apêndice 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 três de seus métodos: getDa-

te(), getMonth() e getFullYear().
O primeiro retorna o dia do mês (de 1 a 31), o segundo o mês (de 0 a 11) e o último
o ano, com quatro dígitos.
O diferencial neste último está na utilização do Array para o mês, uma vez que o
método getMonth() retorna números de 0 (zero) a 11 (onze) e, assim, o número 4
(quatro) representaria o mês de maio. Diferentemente de nossa representação usual,
onde esse mês é representado pelo algarismo 5 (cinco).
Assim, utilizamos um Array para atribuirmos o nome do mês (pode ser algarismos
também) de acordo com o número retornado pelo método.
Os métodos mais utilizados do objeto Date()
Método Descrição
Date() Retorna a data e o horário atual.
getDate() Retorna o dia do mês (1-31).
getDay() Retorna o dia da semana (0-6).
getMonth() Retorna o mês (0-11).
getFullYear() Retorna o ano com quatro dígitos.
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 diferença em minutos entre o tempo local e o do
Meridiano de Greenwich (GMT).
Tabela Ap. A.6: Métodos mais utilizados do objeto Date().
Os métodos na tabela anterior precisam atuar em conjunto com o objeto Date()

porque que são métodos desse objeto.
Sua utilização é 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 variável.

É importante ressaltar que, além do objeto string, há a string literal. Quando utili-
zamos alguns dos métodos do objeto string na string literal, essa última é convertida
automaticamente e temporariamente em um objeto string. Por exemplo, o método
length retorna a quantidade de caracteres em uma string. Isto porque a string literal
não é um objeto, então não pode conter métodos, fazendo-se necessária a conversão
da mesma para um objeto.
Veja a utilização desse método abaixo em ambos os casos:
var texto1 = “AJAX”;

var texto2 = new String(“AJAX “);
alert(“A variável texto1 contém: “ + texto1.length + “

caracteres.”);
alert(“A variável texto2 contém: “ + texto2.length + “
caracteres.”);
No exemplo anterior, teremos o valor três nos dois casos (string literal – texto1;
objeto string – texto2) porque três é o total de caracteres contido em AJAX.
Os métodos mais utilizados do objeto String()
Método Descrição
indexOf() Retorna a posição da primeira ocorrência de um valor especificado em
uma string.
lastIndexOf() Retorna a posição da última ocorrência de um valor especificado em uma
string.
match() Procura por um valor específico em uma string. Se encontrado, ele (va-
lor) é retornado, caso contrário, retorna null.
replace() Substitue alguns caracteres por outros caracteres em uma string.
toLowerCase() Exibe os caracteres da string em minúsculos.
toUpperCase() Exibe os caracteres da string em maiúsculos. apêndice
substr() Extrai uma quantidade específica 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: Métodos mais utilizados do objeto String().
Apêndice A 235
Math
O objeto Math disponibiliza diversos valores e funções para nos ajudar na rea-
lização de operações matemáticas. A seguir uma relação dos valores matemáticos
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: Métodos mais utilizados do objeto Math.
Métodos (funções) matemáticas

• ceil()
Arredonda o valor informado para cima até o número inteiro mais próximo.
Exemplo:
var numero = 6.1;

alert(Math.ceil(numero));
// Exibirá o valor 7.
• floor()
Arredonda o valor informado para baixo até número inteiro mais próximo.
Exemplo:
var numero = 6.1;

alert(Math.floor(numero));
// Exibirá o valor 6.
• max()
Retorna o número de maior valor entre dois números especificados.
var numero1 = 6.7;

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

• min()
Retorna o número de menor valor entre dois números especificados.
var numero1 = 6.7;

var numero2 = 3.8;
alert(Math.min(numero1,numero2));
// Exibirá o valor 3.8
• random()
Retorna um número entre 0 e 1.
alert(Math.random());
alert(Math.random()*59);
// Exibirá números aleatórios entre 0 e 59 - Exemplo:
58.92792655560298
• round()
Arredonda o valor informado para o número inteiro mais próximo, 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
apêndice
A
Apêndice A 237
Apêndice B
DHTML e DOM
DHTML e DOM são 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 páginas HTML mais dinâmicas e interativas do trabalho, em conjunto de
três 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 conteúdo e o estilo de um documento. O DOM é um padrão W3C,
ou seja, é um padrão da Web (web standards), e todos os navegadores atuais
vêm utilizando esses padrões, mas ainda podem existir exceções.
O DOM nos fornece a representação estrutural de documentos HTML e XML,

definindo a forma como a estrutura que pode ser acessada por programas e scripts, pos-
sibilitando-nos a modificação na estrutura do documento, do estilo e do conteúdo.
A representação do documento ocorre por meio de uma árvore de nós (tree of
node) em que cada objeto possui sua propriedade e método.
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 genealógica.
As duas tags <li> são filhas do mesmo parent (pai). Então, a tag <ul> e <h1>
são siblings (irmãs).
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 marcação HTML representa uma linha e terá a mesma localização
na árvore do DOM (DOM tree).
Diferentemente do Javascript, o DOM não é uma linguagem, ele concede a es-
trutura de um documento e seus elementos. Então, utilizamos o DOM associado ao
Javascript. O DOM é utilizado para termos acesso à estrutura, estilo e conteúdo de
um documento, enquanto que o Javascript, para manipulá-los.
O DOM foi desenvolvido para ser independente de qualquer linguagem de pro-
gramação, então, diversas linguagens o utilizam para ter acesso ao documento, mas
a linguagem Javascript é a mais comum.
Já o termo DHTML é uma combinação de tecnologias (XHTML, CSS e Ja-
vascript) e partiu de uma estratégia de marketing da Netscape e da Microsoft para
descrever a nova tecnologia suportada pela quarta geração (4.x) de seus navegado-
res. Essa tecnologia não é um padrão do W3C. Então, precisamos desenvolver um
DHTML crossbrowser, ou seja, um DHTML que funcione em diversos navegadores
não 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 aparência</a>
</div>
CSS:
#conteudo {
width: 500px;
padding: 15px;
line-height: 1.5em;
}
.destaque {
apêndice
background-color: #666666;
B
Apêndice B 241
border: 1px solid #fc6c6c;
}
.nodestaque {
background-color: #ffffff;
border: 1px solid #000000;
}
Nos códigos anteriores, utilizamos três tecnologias (HTML, CSS e Javascript).

No link Altere minha aparência, adicionamos o evento onclick que chama a
função changeClass, passando a ela o nome da nova classe, nodestaque.
A função JavaScript changeClass recebe o parâmetro nodestaque passado a
ela e o utiliza para adicionar ao objeto desejado conteudo uma nova classe CSS.
Os elementos getElementById e className do DOM são discutidos adiante.
Os métodos GetElementById
e GetElementByTagName
O método getElementById do DOM simplesmente retorna o elemento cujo

atributo ID foi especificado. Caso o elemento não exista ou o ID informado seja
incorreto, ele retornará null.
Atenção: não podem existir dois objetos em uma página com o mesmo valor de
um atributo ID.
Considere o seguinte campo de um formulário:
<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 formulário em que o

campo se localiza e seu nome espeficado no atributo name.
Se utilizarmos o método getElementById, podemos acessá-lo assim:
document.getElementById(‘Telefone’).value
Ao invés de informarmos toda a localização do objeto, dizemos apenas o seu

atributo ID ao método getElementById.

Já o método getElementsByTagName retorna diversos objetos com a tag espe-
cíficada no método. Portanto, ao invés de informarmos um atributo e termos como
retorno um único objeto, informarmos uma tag e temos todas aquelas que constam
na página em questão.
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 função utiliza o método getElementsByTagName para recuperar todos

os objetos “a” da página, ou seja, todos os links da página. Adicionamos esta co-
leção 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 hífen e coloque em maiúscula a primeira letra
do segundo nome.
Os métodos Style e ClassName

O método style, como seu próprio nome já diz, é utilizado para alterar o estilo
de um objeto. Ele é usado de forma idêntica ao atributo style do HTML, só que, ao
invés de ser atribuído na marcação HTML, é usado um script.
Exemplo:
function Ocultar(id) {
var obj = document.getElementById(id);
obj.style.display = “none”;
}
A função Ocultar(id) recebe o id do objeto que será o alvo do script. Este id

é atribuído à variável obj usando método getElementById.
Em seguida, usamos o método style para alterar a propriedade display do
objeto em questão para none.
Semelhante ao método style, o método className tem a função de alterar o
estilo de um objeto, só que este deve ser definido por uma classe CSS.
apêndice
B
Apêndice B 243
A vantagem do método className é que podemos alterar as propriedades do
estilo na folha de estilo vinculada à página, ou seja, não 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 método

getElementById. Então, o código CSS que estiver nesta classe será usado a partir
deste momento por este objeto.
A seguir, a classe OcultarObj:
.OcultarObj {
display: none;
}
O método 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 invés 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 método innerHtml
Para alterarmos ou inserirmos conteúdo ou uma marcação HTML em um objeto,
utilizamos o método innerHTML.
Imaginemos uma tag <div> em sua marcação HTML e que essa tag esteja com
o atributo ID definido como menu. Podemos utilizar o método getElementById
para acessá-la e o método innerHTML para manipular seu conteúdo ou marcação
HTML.
Exemplo de como alterar o conteúdo de uma tag:
var obj = document.getElementById(“menu”);

obj.innerHTML = “Novo conteúdo.”;

Utilizando o operador de atribuição += podemos acrescentar conteúdo ao já
existente de uma tag como marcação HTML.
var obj = document.getElementById(“menu”);

obj.innerHTML += “Novo conteúdo.”;
Os métodos appendChild
e createElement
O método 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 referência ao atributo ID de uma tag e esta será o pai do
novo elemento que será adicionado. Em seguida, utilizamos o método appendChild
informando a ele a tag que criamos na variável novoElemento.
Para concluir, a tag hr foi adicionada como filho do elemento cujo atributo ID
é igual a menu.
O método createElement é a solução quando você necessita criar um novo
elemento em sua marcação HTML, mas não há possibilidades de alterar a marcação
já existente e o novo elemento deve ser inserido mediante algum evento ocorrido na
página ou ocasionado pelo usuário.
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 referência:

apêndice
B
Apêndice B 245
Definimos qual será a nova tag a ser criada. Observe que essa informação é
oriunda de um parâmetro (nTag) da função em questão:
Fornecemos um novo conteúdo ao elemento criado utilizando o appendChild

e o createTextNode. Finalizamos inserindo o novo elemento criado através do
appenChild.
Assim, esse novo elemento foi criado como um novo filho do elemento referen-
ciado na variável conteudo.
Os métodos insertBefore
e insertAfter
O método insertBefore é usado quando precisamos inserir algum elemento
em um local específico e não como o método 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 parâmetro nTag da função. Em seguida, inserimos conteúdo ao
elemento criado.
Fazemos referência a um elemento por meio do getElementById na variável
referencia.
Criamos a variável parentTag, concedendo-a o valor referencia.parent-
Node, ou seja, o nosso elemento como referência, e especificando que ele será um
nó pai (parentNode).
Para concluir, utilizamos o método insertBefore anexado à variável parent-
Tag. Os atributos desse método são os seguintes: novoElemento (o elemento que

será criado) e referencia (para sabermos onde inserir o novo elemento, ou seja,
anterior a qual elemento).
O método insertAfter não existe, apenas se em certos momentos precisarmos
inserir algum elemento posterior a um elemento específico. Para isto, utilizamos o
método insertBefore, também da seguinte forma:
Marcação HTML:
<div id=”menu”>
<h1 id=”tit”>Titulo</h1>
</div>
Script utilizado:

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

através do parâmetro (nTag) da função. Em seguida, inserimos conteúdo ao ele-
mento criado.
Usamos o método getElementById para fazer referência ao elemento na va-
riável referencia.
Criamos a variável parentTag, dando a ela o valor referencia.parentNode,
ou seja, o nosso elemento como referência e especificando que ele será um nó pai
(parentNode).
Para concluir, utilizamos o método insertBefore anexado à variável parent-
Tag. Os atributos desse método são os seguintes: novoElemento (o elemento que
será criado) e referencia.nextSibling (next = próximo; Sibling = irmão).
Aqui está a diferença. Esses atributos informam que o novo elemento será o próximo
irmão da tag referenciada na variável referencia.
Se a nova tag será o próximo irmão, quer dizer que ela será inserida posterior-
mente à tag informada como referência.
apêndice
B
Apêndice B 247
Os métodos setAttribute
e getAttribute
O método setAttribute tem a finalidade de inserir ou modificar um atributo
em um elemento existente. A sintaxe do método 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 método getAttibute é usado para recuperar um atributo a fim de mani-
pulá-lo.
Sintaxe:
getAttribute(‘nomeDoAtributo’);
Exemplo:

</script>

Apêndice 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, é necessário fazer o download do instalador. Para isto, acesse
o site:
http://msdn.microsoft.com/vstudio/express/vwd/download/
Neste site você encontrará informações sobre os requisitos necessários para
instalar a aplicação.
2. Após ter baixado os arquivos, execute o arquivo vwdsetup.exe. A instalação é

iniciada.
3. Na janela Visual Web Developers 2005 Express Edition Setup clique em Next
> para continuar o processo de instalação, como mostra a Figura Ap.C.1.
Figura Ap. C.1.
4. Na próxima 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 opção Microsoft SQL Server 2005 Express Edition x86 (Download Size:
55 MB) para instalar o mesmo. Eu aconselho a instalação da documentação também.
Para isto, selecione a opção Microsoft MSDN 2005 Express Edition (Download Size:
248 MB), como mostra a Figura Ap.C.3.
Figura Ap. C.3.
Apêndice C 251
apêndice
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
também o espaço disponível no disco. Clique em Install > para iniciar a instalação.
Figura Ap. C.4.
Será feito o download dos arquivos selecionados e a instalação dos produtos,

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

Depois de concluído, você pode utilizar o produto por 30 dias sem registro. Para
período acima de 30 dias é necessário 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 instalação.
Apêndice C 253
apêndice
C

Universidade AJAX PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Universidade AJAX PDF

Enviado por

Direitos autorais:

Formatos disponíveis

rosto.

Conselho Administrativo: Alessandro Gerardi, Alessio Fon Melozo,

Diretor Editorial: Luis Matos

Assistência Editorial: Monalisa Neves e Carolina Evangelista

Preparação de Originais: Ricardo Dino Freitas

Revisão: Guilherme Laurito Summa

Projeto Gráfico: Daniele Fátima

Diagramação: Fabiana Pedrozo

Capa: Sergio Bergocce

Dados Internacionais de Catalogação na Publicação (CIP)

M868u Moroni, Herbert.

Universidade Ajax / Herbert Moroni.

1. Programa de Computadores. I. Título.

Apêndice A ................................................................ 215

Apêndice B ................................................................ 239

Apêndice C ................................................................ 249

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

4. Na página Default.aspx, adicione três controles HTML do tipo Input (Text),

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

Vai ficar assim:

7. Ainda na página Default.aspx, clique no botão Source para ir ao código HTML

8. Insira o seguinte código dentro da tag <Head> da página:

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

10. Ainda no código HTML, adicione o atributo onkeyup=”total();” nas

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

Segue o conteúdo 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 código:

13. A última modificação. Vá para o código HTML da página Default2.aspx e

Apenas clique em OK para habilitar o Debug.

Vamos agora analisar as três funções Javascript que usamos:

O objeto XMLHttpRequest foi primeiramente implementado pela Microsoft

Aqui verificamos se a requisição está completa e então atribuímos o valor re-

• status – retorna um número que representa o status HTTP. Por exemplo,

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

Nesta função, usamos os métodos open e send. A seguir, a descrição detalhada

Para finalizar, nesta função 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 página aberta, clique no botão Download ASP.NET AJAX v1.0.

8. Marque a opção I accept the terms in the License Agreement e clique em

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

10. Após concluir a instalação, desmarque a opção Display Microsoft ASP.NET,

A instalação foi concluída com sucesso.

Conhecendo o AJAX ASP.NET

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

O controle ScriptManager é responsável por tornar os scripts disponíveis para

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

Repare que a conexão ao banco de dados que acabamos de criar é exibida na

12. Preencha as colunas Nome e Completa, conforme a próxima imagem. Note

15. Um Assistente chamado TableAdapter Configuration Wizard é iniciado.

18. Clique no botão Query Builder.

21. Clique em OK.

25. Clique em Next >.

28. No parâmetro Completa, digite false em Value e clique em Preview (Figura

30. Organize-os, como mostra a Figura 2.41: