Apostila (Avançado) - CURSO ASP - Net Ajax

Curso ASP.
NET AJAX
Autor: Herbert Moroni Cavallari da Costa Gois

Site: www.juliobattisti.com.br
Este material não pode ser utilizado em Sala de Aulas e Para Ministrar Treinamentos!!!
Página 1
Curso ASP.NET AJAX
Nota sobre direitos autorais:
Este e-book é de autoria de Herbert Moroni Cavallari da Costa Gois, sendo
comercializado diretamente através do site www.juliobattisti.com.br e
www.linhadecodigo.com.br ou através do site de leilões Mercado Livre:
www.mercadolivre.com.br, mediante contato através do email:
batisti@hotmail.com ou webmaster@juliobattisti.com.br, diretamente pelo autor ou
por Júlio Battisti. No Mercado Livre, somente o usuário GROZA é que tem
autorização para comercializar este e-book. Nenhum outro usuário/email e/ou
empresa está autorizada a comercializar este ebook.
Ao adquirir este ebook você tem o direito de lê-lo na tela do seu computador e de
imprimir quantas cópias desejar. É vetada a distribuição deste arquivo, mediante
cópia ou qualquer outro meio de reprodução, para outras pessoas. Se você recebeu
este ebook através do e-mail ou via ftp de algum site da Internet, ou através de
um CD de Revista, saiba que você está com uma cópia pirata, ilegal, não
autorizada, a qual constitui crime de Violação de Direito Autoral, de acordo com a
Lei 5988. Se for este o caso entre em contato com o autor, através do e-mail
webmaster@juliobattisti.com.br, para regularizar esta cópia. Ao regularizar a sua
cópia você irá remunerar, mediante uma pequena quantia, o trabalho do autor e
incentivar que novos trabalhos sejam disponibilizados. Se você tiver sugestões
sobre novos cursos que gostaria de ver disponibilizados, entre em contato pelo e-
mail: webmaster@juliobattisti.com.br.
Visite periodicamente o site www.juliobattisti.com.br para ficar por dentro das
novidades:
• Cursos de informática.

Página 2
Curso ASP.NET AJAX
• Guias de Estudo para os Exames de Certificação da Microsoft.
• Artigos e dicas sobre Certificações da Microsoft.
• Artigos sobre Carreira e Trabalho.
• Dicas de livros e sites sobre diversos assuntos.
• Simulados gratuitos, em português, para os exames da Microsoft.
• ESTE E-BOOK NÃO PODE SER FORNECIDO EM UM CD
OU DVD DE NENHUMA REVISTA
• SE VOCÊ OBTEVE UMA CÓPIA DESTE E-BOOK
ATRAVÉS DO E-MULE, KAZAA, MORPHEUS OU
OUTRO PROGRAMA DE COMPARTILHAMENTO,
SAIBA QUE VOCÊ ESTÁ COM UMA CÓPIA ILEGAL,
NÃO AUTORIZADA
• USAR UMA CÓPIA NÃO AUTORIZADA É CRIME DE
VIOLAÇÃO DE DIREITOS AUTORAIS, COM PENA
PREVISTA DE CADEIA
• VOCÊ SÓ PODE USAR ESTE E-BOOK SE VOCÊ
COMPROU ELE DIRETAMENTE COM O AUTOR: JÚLIO
BATTISTI

Página 3
Curso ASP.NET AJAX

Página 4
Curso ASP.NET AJAX
PRÉ-REQUISITOS PARA O CURSO:
Para que você possa acompanhar as lições deste curso é necessário que você já
tenha preenchido os seguintes pré-requisitos:
• Conhecimento básico do Windows 98, 2000 ou XP, tais como:
Criação de pastas e subpastas.
Utilização do mouse e do teclado.
Operações básicas com arquivos e pastas, usando o Windows
Explorer.
Conhecer conceitos tais como ícones, área de trabalho, janelas do
Windows, uso de menus e outras configurações básicas do Windows.
• Conhecimento de desenvolvimento com ASP.NET:
Criação de páginas e acesso a banco de dados.
Conhecimento sobre HTML.
Desejável conhecimento básico sobre Javascript.

Página 5
Curso ASP.NET AJAX
Índice do Curso
Introdução 8
Edition 2005 e o SQL Server 2005 Express Edition 9
CAPITULO 1 10
Entendo o AJAX 10
1.1 – O que é o AJAX? 11
1.2 – Considerações sobre o uso AJAX 30
CAPITULO 2 32
ASP.NET AJAX 32
2.1 - Instalando o AJAX ASP.NET 33
2.2 - Conhecendo o AJAX ASP.NET 41
CAPITULO 3 88
O controle UpdatePanel 88
CAPITULO 4 115
O controle UpdateProgress 115
CAPITULO 5 128
O controle Timer 128
CAPITULO 6 141
A Classe PageRequestManager 141
CAPITULO 7 160
Usando ASP.NET AJAX em aplicações já existentes 160
CAPITULO 8 168
Usando Web Services em suas aplicações ASP.NET AJAX 168
APENDICE A 189
JAVASCRIPT 189
A tag <noscript> 192
Comentários em Javascript 193
Case Sensitive 194
Ponto e vírgula (;) no final das declarações 194

Página 6
Curso ASP.NET AJAX
Variáveis 195
Operadores 196
Estruturas de Controle 201
Pop-up boxes 209
Funções 211
Eventos 213
Arrays 216
Data 219
String 221
Math 223
APENDICE B 226
DHTML e DOM 226
Os métodos GetElementById e GetElementByTagName 230
Os métodos Style e ClassName 231
O método innerHtml 233
Os métodos appendChild e createElement 234
Os métodos insertBefore e insertAfter 236
Os métodos setAttribute e getAttribute 238
APENDICE C 240
Instalando o Visual Studio Web Developers Express Edition 2005 e o SQL Server 2005
Express Edition 240

Página 7
Curso ASP.NET AJAX
Introdução
Neste curso você vai aprender a o que é e como utilizar AJAX em suas aplicações
ASP.NET de forma produtiva utilizando a biblioteca ASP.NET AJAX da própria
Microsoft.
Com AJAX suas aplicações WEB terão interfaces bem mais ricas e aumentarão a
experiência positiva dos visitantes. Seus sistemas para Web e Intranet terão uma
interface mais parecida com aplicações Windows diminuindo o tempo de resposta
entre as solicitações dos clientes e diminuindo o trafico na rede.
Capítulo 1: Neste capitulo você vai aprender o que é o AJAX, onde ele surgiu e
como utiliza-lo em suas aplicações.
Capítulo 2: Neste capitulo você vai conhecer o framework ASP.NET AJAX e vai
fazer na pratica um exemplo utilizando esse framework do começo ao fim,
aprendendo como ele pode deixar mais rica sua interface e torna-la mais interativa
sem aumentar o tempo de desenvolvimento ou diminuir sua produtividade.
Capitulo 3: A partir deste capitulo você vai conhecer os controles da biblioteca
ASP.NET AJAX. Neste capitulo você vai aprender mais sobre o controle
UpdatePanel.
Capítulo 4: Neste capitulo você vai aprender mais sobre o controle
UpdateProgress.

Página 8
Curso ASP.NET AJAX
Capítulo 5: Neste capitulo você vai aprender mais sobre o controle Timer.
Capítulo 6: Neste capitulo você vai conhecer a classe PageRequestManager e vai
aprender como ela pode ajuda-lo a personalizar suas chamadas assíncronas
utilizando a biblioteca ASP.NET AJAX.
Capítulo 7: Neste você vai aprender a adicionar e utilizar a biblioteca ASP.NET em
aplicações já construídas.
Capítulo 8: Neste capitulo você vai aprender a utilizar Web Services em suas
aplicações ASP.NET AJAX.
APENDICE A: Aqui você vai poder tirar suas duvidas sobre a linguagem Javascript.
APENDICE B: Aqui você vai conhecer o DOM e saber como utiliza-lo.
APENDICE C: Aqui você vai aprender a instalar o Visual Studio Web Developers
Express Edition 2005 e o SQL Server 2005 Express Edition
Para enviar suas dúvidas referentes aos assuntos e exemplos abordados neste
curso, para enviar sugestões de alterações/correções, para sugerir novos cursos,
para criticar e para elogiar (porque não?), é só entrar em contato pelo e-mail:
moroni@moroni.com.br. Fique por dentro das novidades sobre o autor em
www.moroni.com.br

Página 9
Curso ASP.NET AJAX
CAPITULO 1
Entendo o AJAX
Como você vai ver durante todo esse livro eu gosto de trabalhar com vários
exemplos passo-a-passo. Isso facilita a compreensão e memorização é já mostra
como você pode aplicar os conhecimentos que esta adquirindo na prática. Fique a
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ê vai precisar ter uma versão do Visual Studio
instalada em sua maquina, desde que ela seja na versão 2005 você pode usá-la
tranquilamente, no entanto estarei usando nos exemplos o Visual Web
Developers Express Edition 2005, por ser uma versão gratuita que todos podem
baixar facilmente do site da Microsoft. Se tiver duvidas sobre onde baixar e como
instalar essa ferramenta consulte o APENDICE 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 voltadas para estudantes, entusiastas, etc.
que querem aprender/conhecer a plataforma.Net. São ferramentas com algumas
limitações pensando em desenvolvimento corporativo, porém com recursos incríveis
e produtivos. É possível desenvolver projetos de todos os portes com as
ferramentas Express. Saiba mais sobre elas visitando a url:
http://msdn.microsoft.com/vstudio/express/

Página 10
Curso ASP.NET AJAX
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 utiliza-lo em
nossas aplicações ASP.NET.
1.1 – 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/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 isso usamos o objeto
XMLHttpRequest por intermédio 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 eu vou usar a linguagem VB.NET.

Página 11
Curso ASP.NET AJAX
Neste 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 isso 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 nome Default2.aspx, para
isso clique com o botão direito sobre o nome do projeto na janela Solution
Explorer e depois clique em Add New Item.

Página 12
Curso ASP.NET AJAX
3 - Na janela que se abre 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.

Página 13
Curso ASP.NET AJAX
4 – Na pagina Default.aspx adicione 3 controles HTML do tipo Input (Text) como
na imagem a seguir. Note que para adicionar contres HTML usamos a guia
HTML na Toolbox.

Página 14
Curso ASP.NET AJAX
5 – Organize os controles como a figura abaixo:

Página 15
Curso ASP.NET AJAX
6 – Mude a propriedade Value dos dois primeiros controles (Text1 e Text2) para 0,
como a imagem:

Página 16
Curso ASP.NET AJAX
Vai ficar assim:

Página 17
Curso ASP.NET AJAX
7 – Ainda na pagina Default.aspx clique no botão Source para ir para o 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)
{
Página 18
Curso ASP.NET AJAX
ajax = new XMLHttpRequest();
function atualizar() {
if (ajax.readyState==4) {
document.getElementById('Text3').value = ajax.responseText;
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 eu
vou explicar em detalhes cada uma das funções do código acima. Para maiores
detalhes sobre Javascript e DOM você pode consultar os APENDICES 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
pagina for carregada.

Página 19
Curso ASP.NET AJAX
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" />
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) {

Página 20
Curso ASP.NET AJAX
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 />

Página 21
Curso ASP.NET AJAX
<input id="Text3" type="text" />
</div>
</form>
</body>
</html>
11 – Agora vamos para o arquivo Default2.aspx.
12 – De um clique duplo sobre a pagina em branco para que o evento Page_Load
seja criado e digite o seguinte código:
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:

Página 22
Curso ASP.NET AJAX
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 a variável. Fazemos o mesmo com o parâmetro B. A ultima 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;

Página 23
Curso ASP.NET AJAX
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 ultima modificação. Vá para o código HTML da página Default2.aspx e
apague tudo, deixe apenas a primeira linha de código que contém a diretiva Page.
Como a imagem:

Página 24
Curso ASP.NET AJAX
13 – Volte para a página Default.aspx e execute sua aplicação (para isso você
pode clicar em F5). Você pode ser questionado com a seguinte tela:
Apenas clique em OK para habilitar o Debug.
A seguinte janela se abre:

Página 25
Curso ASP.NET AJAX
Digite alguns números nas duas primeiras caixas de texto. Observe que conforme
você digita o texto o resultado já vai sendo calculado e exibido na terceira caixa de
texto sem recarregar nenhuma vez a pagina, isso é 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. Logo após, outros
browsers (Mozilla, Safari, entre outros) seguiram o mesmo caminho implementando
o XMLHttpRequest em uma classe que suporta as propriedades e os métodos do
objeto ActiveX da Microsoft. Só que esses browsers implementaram o objeto
XMLHttpRequest de forma nativa, enquanto a Microsoft o implementou como um
objeto ActiveX.

Página 26
Curso ASP.NET AJAX
Isso significa que precisaremos verificar qual o objeto que o browser trabalha,
XMLHTTP ou XMLHttpRequest. É isso que fazemos nesta primeira função. Se
estivermos trabalhando com o Internet Explorer vamos adicionar o ActiveX
XMLHTTP a 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:
document.getElementById('Text3').value = ajax.responseText;
Aqui verificamos se a requisição esta completa e então atribuímos o valor retornado
por ela a terceira caixa de texto. Fazemos isso através 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 esta completa. Segue uma descrição
completa dos cinco estágios:
0 - não inicializado;
1 - carregamento;
2 - carregado;
3 - interativo;
4 - completo.

Página 27
Curso ASP.NET AJAX
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. Através dela
atribuímos o valor que esta sendo retornado a caixa de texto. Essa 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 o APENDICE 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.
• 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 pode 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:

Página 28
Curso ASP.NET AJAX
function total() {
ajax.send();
Esta função pega os valores das duas primeiras caixas de texto e envia para a
pagina Default2.aspx como parâmetro. A pagina 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
respectivamente, o código acima vai atribuir a seguinte string a variável url:
"Default2.aspx?A=12&B=11"
Nesta função usamos os métodos open e send. Segue descrição detalhada dos
métodos disponíveis no objeto XMLHttpRequest:
open(método, url, síncrono, usuário, Inicia uma nova requisição, onde:
senha) • 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

Página 29
Curso ASP.NET AJAX
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 onreadystatechange 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().
1.2 – Considerações sobre o uso AJAX
Como percebeu embora você possa criar aplicações com interfaces bem mais ricas
em AJAX isso não é algo simples, principalmente pelo fato dele ser uma tecnologia
executada no cliente. E no cliente podemos ter diferentes tipos de navegadores e

Página 30
Curso ASP.NET AJAX
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 do
javascript simplesmente não estar habilitado no navegador do cliente.
Então você vai precisar escrever código javascript para cada uma das possibilidades
e testa-las. Ainda assim para os navegadores sem suporte a Javascript será
necessário o que chamamos de Javascript não-obstrutivo, ou seja, sua pagina 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 web site para a Internet.
O que eu quero deixar bem claro aqui é que tudo tem seu preço. Com o ganho na
interface temos uma perca de produtividade e isso não é bom. Principalmente para
os programadores ASP.NET que tem a sua disposição todos os recursos do Visual
Studio.
E como você sabe, perca de produtividade representa maior tempo de
desenvolvimento, com isso temos um custo maior ao projeto. É exatamente isso
que ninguém quer, principalmente as empresas contratantes que cada vez mais
pressionam os projetos para que os custos e prazos sejam reduzidos.

Página 31
Curso ASP.NET AJAX
Visando dar maior produtividade no desenvolvimento de aplicações ASP.NET foram
criados vários Frameworks, ou seja, bibliotecas de código Javascript que podemos
usar no desenvolvimento com AJAX. O google tem um framework destes, mas
esses frameworks 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 capitulo.
Tentando ajudar na produtividade dos programadores .NET a Microsoft lançou seu
próprio Framework integrado com o Visual Studio. Primeiro conhecido como ATLAS
e agora chamado de ASP.NET AJAX ele é o tema principal deste livro. Através 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.
CAPITULO 2
ASP.NET AJAX
O objetivo deste capítulo é mostrar a você o poder do Framework ASP.NET AJAX
em suas aplicações web. Como ele pode melhorar a produtividade e deixar suas
aplicações web mais interativas.

Página 32
Curso ASP.NET AJAX
2.1 - Instalando o AJAX ASP.NET
Vamos agora instalar os recursos que usaremos do AJAX ASP.NET. Se você tiver
instalado em sua maquina 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 download de um arquivo na internet para a instalação, se
você estiver conectado a internet pode fazer o download e instalação passo-a-passo
durante os próximos exemplos, caso contrario, faça o download do arquivo e depois
instale em sua maquina como explico a seguir.
1 - Visite o site www.asp.net.

Página 33
Curso ASP.NET AJAX
2 – No menu clique em AJAX. (Para chegar nesta página você pode acessar
diretamente a url http://ajax.asp.net ).

Página 34
Curso ASP.NET AJAX
3 - Clique em Download.
4 – Na pagina que se abre, clique no botão Download ASP.NET AJAX v1.0.

Página 35
Curso ASP.NET AJAX
Você vai ser direcionado a uma página de download da Microsoft como mostra a
imagem a seguir:

Página 36
Curso ASP.NET AJAX
5 – Clique no botão Download.
Você pode salvar este arquivo no seu disco rígido clicando em Salvar ou executa-lo
imediatamente, clicando em Executar.

Página 37
Curso ASP.NET AJAX
6 – Clique em Executar para fazer o download e executa-lo imediatamente. Será
feito o download e a instalação será iniciada. Como mostra a seguinte imagem:
7 – Clique em Next.

Página 38
Curso ASP.NET AJAX
8 – Selecione I accept the terms in the License Agreement e clique em Next.
9 – Clique em Install.

Página 39
Curso ASP.NET AJAX
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.

Página 40
Curso ASP.NET AJAX
A instalação foi concluída.
2.2 - Conhecendo o AJAX ASP.NET
1 – Entre no Visual Studio 2005 e clique em Create Web Site.
Perceba ao criar o novo projeto que 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. Mais a frente você vai conhecer essas
alterações e aprender a usar o ASP.NET AJAX em aplicações Web já existentes.

Página 41
Curso ASP.NET AJAX
2 – Selecione o Template ASP.NET AJAX-Enabled Web Site e crie um novo
WebSite chamado IntroASPNETAJAX, como mostra a seguinte imagem:
Durante a instalação o Assembly AJAXExtensionToolbox.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 imagem:

Página 42
Curso ASP.NET AJAX
No modo Design na página Default.aspx você nota mais uma diferença, o
controle ScriptManager como mostra a imagem:

Página 43
Curso ASP.NET AJAX
O controle ScriptManager é responsável por tornar os scripts disponíveis para o
browser do cliente. Por isso ele é necessário em todas as páginas que você for
utilizar ASP.NET AJAX. Ele é a parte central do Framework ASP.NET AJAX e
controla todos os recursos AJAX na página.
3 – Vamos agora adiciona 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.

Página 44
Curso ASP.NET AJAX
4 – Na janela Add New Item, em Templates selecione SQL Database. Mude o
nome do arquivo para Projetos.mdf como mostra a próxima imagem. Clique em
Add.

Página 45
Curso ASP.NET AJAX
5 – Você é questionado se deseja adicionar o arquivo de banco de dados em uma
pasta especialmente reservada a ele chamada App_Data. Isto é uma boa prática,
clique em Sim.
Repare que a conexão ao banco de dados que acabamos de criar é exibida na
janela Database Explorer como mostra a seguinte imagem:

Página 46
Curso ASP.NET AJAX
6 – Vamos adicionar uma tabela no nosso banco de dados, para isso na janela
Database Explorer, clique com o botão direito sobre Tables e selecione Add New
Table.
7 – Preencha as colunas Column Name, Data Type e Allow Nulls como a
seguinte imagem:

Página 47
Curso ASP.NET AJAX
8 – Clique com o botão direito sobre ProjetoId e selecione Set Primary Key,
como mostra a próxima imagem. Isso torna o campo ProjetoId a chave primária
da nossa tabela.

Página 48
Curso ASP.NET AJAX
9 – Ainda em ProjetoId, na janela Column Properties marque a opção Yes na
propriedade Is Identity como mostra a próxima imagem:

Página 49
Curso ASP.NET AJAX
10 – Clique em Salvar. Aparece uma caixa de dialogo pedindo o nome para a
tabela. Digite Projetos e clique em OK como a próxima imagem.
11 – Vamos adicionar alguns registros na nossa tabela. Para isso na janela
Database Explorer clique com o botão direito sobre a tabela Projetos e selecione
Show Table Data.

Página 50
Curso ASP.NET AJAX
12 – Preencha as colunas Nome e Completa conforme a próxima imagem. Note
que o campo ProjetoId é auto numerável como desejamos quando o tornamos
chave primaria e marcamos a opção Identity.

Página 51
Curso ASP.NET AJAX
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 essa 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 a próxima imagem:

Página 52
Curso ASP.NET AJAX
14 – O Dataset assim como o banco de dados pode ser adicionado em uma pasta
especifica. No caso do Dataset a pasta é App_Code. Clique em Sim na mensagem
ilustrada pela próxima imagem para que a pasta já seja criada e o Dataset
adicionado na mesma.
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.

Página 53
Curso ASP.NET AJAX
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 a imagem abaixo e clique em Next.

Página 54
Curso ASP.NET AJAX
17 – Podemos fazer o acesso aos dados de duas formas. Usando comandos SQL, e
através de Stored Procedures. Marque a opção Use SQL Statements e clique em
Next.

Página 55
Curso ASP.NET AJAX
18 – Clique no botão Query Builder.

Página 56
Curso ASP.NET AJAX
19 – Na janela Add Table, selecione a tabela Projetos na guia Tables e clique em
Add. Após você pode clicar em close. A tabela Projetos vai ser adicionada na
janela Query Builder.

Página 57
Curso ASP.NET AJAX
20 – A janela Query Builder nos ajuda na criação dos comandos SQL. Selecione
ProjetoID, Nome e Completa na tabela Projetos e digite a clausula WHERE
como mostra a próxima imagem:

Página 58
Curso ASP.NET AJAX
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 imagem, clique em Next.

Página 59
Curso ASP.NET AJAX
Na próxima tela você pode escolher e nomear os métodos que deseja que o
assistente crie para manipulação e recuperação dos dados.

Página 60
Curso ASP.NET AJAX
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.

Página 61
Curso ASP.NET AJAX
A próxima imagem resume todas as tarefas que serão realizadas pelo assistente.

Página 62
Curso ASP.NET AJAX
26 – Clique em Finish.
A tabela é adicionada ao Dataset como mostra a próxima imagem.

Página 63
Curso ASP.NET AJAX
27 – Vamos testar o método GetProjetosPorStatus. Para isso clique com o botão
direito sobre o mesmo e selecione Preview Data como a próxima imagem:

Página 64
Curso ASP.NET AJAX
Será exibida a janela Preview Data:

Página 65
Curso ASP.NET AJAX
28 – No parâmetro Completa digite false em Value e clique em Preview. Serão
exibidos os registros que tiverem o valor false na coluna Completa.

Página 66
Curso ASP.NET AJAX
29 – Volte ao arquivo Default.aspx e adicione os seguintes controles:
• 1 DropDownList
• 1 GridView
• 1 DetailsView
30 – Organize-os como a próxima imagem:

Página 67
Curso ASP.NET AJAX
31 – Na propriedade items controle DropDownList1 adicione o Item Completo
com valor true e o item Incompleto com o valor false como mostra as duas
próximas imagens:

Página 68
Curso ASP.NET AJAX
32 – No GridView1, na propriedade DataSourceID clique em New Data Source.
Será iniciado um Assistente.

Página 69
Curso ASP.NET AJAX
33 – Selecione Object na opção Where will the application get data from? e
clique em OK como mostra aproxima imagem:
Selecionamos Object na tela acima porque vamos recuperar nossos dados através
do objeto Dataset que criamos.
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 – Siga as opções da próxima imagem e clique em Next.

Página 70
Curso ASP.NET AJAX
Você pode agora escolher o método do TableAdapter que deseja. Nós só temos
um método, o GetProjetosPorStatus.

Página 71
Curso ASP.NET AJAX
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
Completo, ou seja, true serão exibidos apenas os registros que o campo
Completa tiverem 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 isso em Parameter source selecione Control. Em ControlID
selecione DropDownList1.

Página 72
Curso ASP.NET AJAX
37 – Clique em Finish.
38 - Na Smart Tag do GridView1 marque as opções conforme a imagem abaixo:

Página 73
Curso ASP.NET AJAX
38 – Usaremos o controle DetailsView1 para inserir novos Projetos. Para isso na
Smart Tag do DetailsView1 selecione Enable Inserting e também escolha
ObjectDataSource1 em Choose Data Source como mostra a próxima imagem:
39 – Antes de testar nossa aplicação apenas 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.
40 – Execute sua aplicação.
Perceba que cada vez que você muda a opção do DropDownList1 a página é
totalmente recarregada. Acontece o mesmo se você inserir um novo projeto.

Página 74
Curso ASP.NET AJAX
Vamos agora implementar o AJAX ASP.NET para fazer atualizações parciais da
página. Sem a necessidade de recarregar a página completamente toda vez que
uma opção for selecionada.
41 – Adicione um controle UpdatePanel como mostra a próxima imagem. Ele esta
localizado na guia AJAX Extensions na Toolbox.

Página 75
Curso ASP.NET AJAX
42 – Arraste o GridView1 para dentro do UpdatePanel1 como mostra a próxima
imagem:

Página 76
Curso ASP.NET AJAX
43 – Na janela Properties localize a propriedade Triggers do UpdatePanel1 e na
janela UpdatePanelTrigger Collection Editor clique em Add. Selecione
DropDownList1 na propriedade ControlID e SelectedIndexChanged para a
propriedade EventName. Clique em OK.

Página 77
Curso ASP.NET AJAX
Você vai aprender mais sobre a propriedade Trigger no próximo capitulo.
44 – Execute a aplicação.
45 – Perceba agora que a cada seleção do DropDownList1 apenas o GridView1 é
atualizado. Não é necessário o recarregamento de toda a página.

Página 78
Curso ASP.NET AJAX
Você vai aprender detalhes sobre o UpdatePanel e o uso de Trigger no próximo
capitulo. Por enquanto apenas entenda o seguinte: já que o DropDownList1 esta
fora do UpdatePanel1 precisamos indicar ao mesmo que o DropDownList1 será
o responsável por realizar a chamada da atualização do que esta dentro do
UpdatePanel1. Para isso usamos a Trigger.
46 – Adicione alguns projetos como na próxima imagem:

Página 79
Curso ASP.NET AJAX
Perceba que ao inserirmos novos projetos a pagina ainda é totalmente recarregada.
Vamos resolver isso agora.
47 – Pare a aplicação e volte a página Default.aspx.
48 – Adicione mais um UpdatePanel1 e mova o DetailsView1 para dentro do
mesmo como à imagem:

Página 80
Curso ASP.NET AJAX
49 – Localize a propriedade UpdateMode do UpdatePanel2 e selecione a opção
Conditional.

Página 81
Curso ASP.NET AJAX

Página 82
Curso ASP.NET AJAX
Agora tanto ao usar o DropDownList1 quando o DetailsView1 você obtem o
recarregamento parcial da página.
51 - Para finalizar apenas quero apresentar para você o controle UpdateProgress,
para isso adicione o mesmo a sua página Default.aspx e digite dentro dele o texto
“Atualizando...” como mostra a próxima imagem:

Página 83
Curso ASP.NET AJAX
O conteúdo deste controle será exibido enquanto a pagina recarregar algum dos
UpdatePanel. 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 3 segundos. Para isso siga os próximos passos.
52 - Selecione o ObjectDataSource1 e na janela Properties clique no botão
Events. Isso faz com que todos os eventos do ObjectDataSource1 sejam
exibidos. Localize o evento Updating e de um clique duplo sobre o mesmo.

Página 84
Curso ASP.NET AJAX
Será criado o procedimento do evento no painel de código.
53 – Digite dentro do procedimento o seguinte código.
System.Threading.Thread.Sleep(3000)
Seu painel de código deve ficar assim:

Página 85
Curso ASP.NET AJAX
54 – Vamos testar. Execute a aplicação (F5).
55 – Clique em Editar para qualquer projeto, altere o nome, por exemplo, e clique
em Atualizar. Deve aparecer o texto “Atualizando...” conforme a seguinte
imagem:

Página 86
Curso ASP.NET AJAX
Neste capitulo você aprendeu como é fácil construir aplicações com AJAX utilizando
o Framework AJAX ASP.NET e conheceu os seus principais controles.

Página 87
Curso ASP.NET AJAX
CAPITULO 3
O controle UpdatePanel
No capitulo anterior você já usou o UpdatePanel e pode compreender os
benefícios que ele pode trazer para suas aplicações.
Usando o UpdadePanel você pode atualizar partes especificas da página sem usar
nenhum código Javascript, com isso você pode ter uma boa redução no tráfico
entre browser cliente e servidor, diminuindo o uso de banda.
Lembre-se, como os demais controles o UpdatePanel trabalha em conjunto com o
controle ScriptManager, então o mesmo deve estar ou ser adicionado na página
quando você for utilizar o UpdatePanel.
Neste capitulo nós faremos uma prática onde 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 imagem abaixo. Neste exemplo usarei a
linguagem C#.

Página 88
Curso ASP.NET AJAX
2 – Adicione dois controles TextBox e um controle Button na página
Default.aspx e organize-os conforme a imagem:

Página 89
Curso ASP.NET AJAX
3 – De um clique duplo sobre a pagina 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ê usa a mesma linguagem só que sem o ponto-e-
vírgula, desta forma:
TextBox1.Text = DateTime.Now.ToString()

Página 90
Curso ASP.NET AJAX
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 a seguinte imagem:
4 – Execute e teste sua aplicação.
Perceba que ao clicar no botão a data e hora atual é exibida em cada uma das
caixas de texto.

Página 91
Curso ASP.NET AJAX
5 – Pare a execução da aplicação.
6 - Adicione um controle UpdatePanel na pagina Default.aspx e mova os
controles TextBox2 e Button1 para dentro do mesmo conforme a imagem:

Página 92
Curso ASP.NET AJAX
8 - Clique sobre o botão e perceba que agora apenas a caixa de texto que esta
dentro do UpdatePanel é executada. Temos então um carregamento assíncrono
dentro do UpdatePanel usando AJAX.

Página 93
Curso ASP.NET AJAX
8 – Pare a execução da aplicação.
Qualquer controle dentro de um UpdatePanel dispara uma atualização assíncrona,
ou seja, uma atualização apenas dentro do UpdatePanel se a propriedade
ChildrenAsTrigger estiver com valor True. Essa propriedade é 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 dificil alteramos 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 especifico que
esta dentro do UpdatePanel não chame uma atualização assíncrona. Você vai ver
como fazer isso agora.

Página 94
Curso ASP.NET AJAX
9 – Clique sobre o UpdatePanel1 para selecioná-lo e na janela Properties localize
e clique sobre a propriedade Triggers, como a imagem:
10 – Na janela UpdatePanelTrigger clique na seta para baixo no botão Add como
mostra a imagem:

Página 95
Curso ASP.NET AJAX
Perceba que são exibidas duas opções AsyncPostBackTrigger e
PostBackTrigger.
11 – Clique sobre PostBackTrigger.
12 – Em ControlID selecione o controle Button1 como a imagem:

Página 96
Curso ASP.NET AJAX
13 – 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>

Página 97
Curso ASP.NET AJAX
Note no código acima a tag <Triggers> quem faz referencia 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 porque as
duas caixas de texto são atualizadas com a data.
15 – Pare a execução do programa.
16 – Arraste o Button1 para fora do UpdatePanel como a seguinte imagem:

Página 98
Curso ASP.NET AJAX
17 - 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 isso clique novamente sobre o
UpdatePanel1 para selecioná-lo e na janela Properties localize e clique sobre a
propriedade Triggers.
18 – Desta vez selecione a opção AsyncPostBackTrigger no botão Add. Como a
imagem:
19 – Na propriedade ControlID selecione Button1 e na propriedade EventName
selecione Click.

Página 99
Curso ASP.NET AJAX
Agora toda vez que o evento Click do Button1 for disparado será solicitado 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>

Página 100
Curso ASP.NET AJAX
</asp:UpdatePanel>
Note no código acima a tag <Triggers> quem faz referencia ao controle e ao evento
que dispara a atualização assíncrona.
Vamos entender agora a propriedade UpdateMode usada quando temos mais do
que um UpdatePanel na mesma página.
21 – Adicione mais um UpdatePanel a página e arraste o controle TextBox1 para
dentro do mesmo como mostra a seguinte imagem:

Página 101
Curso ASP.NET AJAX
22 - Execute a aplicação. Perceba que sempre que você clica no Button1 os dois
UpdatePanel são atualizados.

Página 102
Curso ASP.NET AJAX
23 – Selecione o UpdatePanel2 e mude a propriedade UpdateMode para
Conditional como mostra a imagem:

Página 103
Curso ASP.NET AJAX
Quando a propriedade UpdateMode esta definida como always - que por sinal é o
valor padrão – qualquer controle na pagina que disparar uma atualização
assíncrona atualiza o UpdatePanel em questão. Quando esta mesma propriedade
esta 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 numero de UpdateControls que você pode ter em
uma página.
24 – Execute a aplicação. Agora ao clicar no botão apenas o UpdatePanel1 deve
ser atualizado.

Página 104
Curso ASP.NET AJAX
25 – Adicione um Button dentro do UpdatePanel2.
26 – Arraste o UpdatePanel2 para dentro do UpdatePanel1 conforme a imagem:
A regra aqui é simples. Se os dois controles UpdatePanel estiverem com a
propriedade UpdateMode com o valor Conditional, quando você clicar no botão
dentro do UpdatePanel filho - ou seja aquele que esta dentro do outro - apenas
ele será atualizado. Já o UpdatePanel pai sempre atualizará ele e todos os
UpdatePanel que estiverem dentro dele.

Página 105
Curso ASP.NET AJAX
27 – Certifique-se que a propriedade UpdateMode dos dois controles
UpdatePanel estejam como Conditional.
28 – 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 esta dentro do UpdatePanel1 é disparada a
atualização assíncrona dos dois controles UpdatePanel.
Agora vamos aprender a atualizar e criar UpdatePanel programaticamente.
29 – Adicione mais um Button a sua aplicação, fora de qualquer UpdatePanel
como mostra a imagem seguinte:

Página 106
Curso ASP.NET AJAX
Se você executar sua pagina agora esse botão não faz nenhuma solicitação
assíncrona, ao clicar sobre ele a pagina é completamente atualizada.
30 – De 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:

Página 107
Curso ASP.NET AJAX
ScriptManager1.RegisterAsyncPostBackControl(Button3);
Button3 é o nome ou ID do Button que adicionamos.
31 – Execute sua aplicação e teste. Agora você já é capaz de chamar uma
atualização assíncrona programaticamente.
32 – Agora vamos criar um controle UpdateControl programaticamente. Para isso
adicione uma nova pagina a sua aplicação chamada Default2.aspx
33 – Adicione um controle ScriptManager nesta página.
34 – 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";

Página 108
Curso ASP.NET AJAX
up1.ContentTemplateContainer.Controls.Add(Button1);
up1.ContentTemplateContainer.Controls.Add(TextBox1);
Page.Form.Controls.Add(up1);
protected void Button1_Click(object sender, EventArgs e)
Seu painel de código deve estar assim:

Página 109
Curso ASP.NET AJAX
Segue 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
Página 110
Curso ASP.NET AJAX
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
32 - Execute e teste sua aplicação.

Página 111
Curso ASP.NET AJAX
Vamos agora compreender o código:
Primeiramente criamos os três objetos que vamos utilizar na nossa pagina.
1 UpdatePanel;
1 Button;
1 TextBox;
Fizemos isso com esse código:
UpdatePanel up1 = new UpdatePanel();
Button Button1 = new Button();
TextBox TextBox1 = new TextBox();

Página 112
Curso ASP.NET AJAX
O segundo passo foi atribuir um identificador único para o UpdatePanel que
criamos e atribuir o valor Conditional a sua propriedade UpdateMode. Não
precisávamos ter mudado a propriedade UpdateMode neste exemplo 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
não ser exibido em branco no exemplo.
Button1.Text = "Button";
Depois criamos um manipulador de evento para o Button1 com a seguinte linha de
código, onde 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)

Página 113
Curso ASP.NET AJAX
Nós precisamos vincular os controles TextBox1 e Button1 no UpdatePanel.
Fazemos isso adicionando os controles na propriedade
ContentTemplateContainer do UpdatePanel usando o seguinte código:
up1.ContentTemplateContainer.Controls.Add(Button1);
up1.ContentTemplateContainer.Controls.Add(TextBox1);
Por fim vinculamos o nosso UpdateControl a pagina usando o código:
Page.Form.Controls.Add(up1);
Nestes 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:
• Os controles TreeView, Menu, Substitution e WebParts;
• FileUpload;
• GridView e DetaisView quando estiverem com a propriedade
EnableSortingAndPagingCallbacks 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, RequeredFieldValidator e
Página 114
Curso ASP.NET AJAX
ValidationSummary só podem ser usados se estiver com a propriedade
EnableClientScript como false.
CAPITULO 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 capitulo 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.
Site chamada UpdateProgress como mostra imagem abaixo. Neste exemplo
usarei a linguagem VB.NET.

Página 115
Curso ASP.NET AJAX
2 – Adicione os seguintes controles na pagina Default.aspx:
• 3 Label
• 2 UpdatePanel
• 1 Button
• 1 Calendar
3 - Certifique-se que o controle ScriptManager esteja adicionado na página.
4 - Organize os controles como a figura abaixo, sendo que o controle Label1 esta
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.

Página 116
Curso ASP.NET AJAX
5 – De um clique duplo sobre a pagina e digite o seguinte código dentro do
procedimento 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
Label1 para Label2 e Label3 respectivamente. Para criar os procedimentos de

Página 117
Curso ASP.NET AJAX
evento necessário você pode dar um clique duplo sobre o Button1 e fazer o
mesmo para o controle Calendar então apenas digite o código. Seu painel de
código deve ficar como a seguinte imagem:
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 hora atual de forma assíncrona.

Página 118
Curso ASP.NET AJAX
8 – Adicione um controle UpdateProgress logo abaixo do Label1. Dentro deste
UpdateProgress digite o texto Aguarde..., como a seguinte imagem:

Página 119
Curso ASP.NET AJAX
9 – Se você executar o exemplo agora não notara diferença alguma. Isso porque o
processamento assíncrono que esta sendo realizado é bem simples – apenas trazer
a data e hora e adicionar no label – e rápida. Para visualizarmos o uso do
UpdateProgress vamos utilizar o método Sleep da classe Thread que esta no
namespace System.Threading para fazer com que o processamento assíncrono
demore três segundos. Para isso adicione a seguinte linha de código dentro dos
métodos Button1_Click e Calendar1_SelectionChanged:
O código em C# é quase o mesmo, segue:

Página 120
Curso ASP.NET AJAX
System.Threading.Thread.Sleep(3000);
10 – Execute sua aplicação.

Página 121
Curso ASP.NET AJAX
Agora sim, ao executar uma atualização assíncrona o texto Aguarde... é exibido
durante três segundos (3000 milisegundos), 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 esta sendo efetuada.
Perceba que a mensagem aguarde leva um pequeno tempo para aparecer. Você
pode configurar esse “delay” usando a propriedade DisplayAfter. O valor padrão
desta propriedade é 500 milisegundos.
Você também pode adicionar dentro do controle UpdateProgress código HTML,
como código para a exibição de uma imagem por exemplo.

Página 122
Curso ASP.NET AJAX
11 – Selecione o UpdateProgress1 e na janela Properties localize a propriedade
DynamicLayout.
Quando a propriedade DynamicLayout tem o valor True o controle
UpdateProgress 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 Aguarde... é exibido o restante da pagina é movido para baixo e
quando ele desaparece o conteúdo volta a sua posição original.
Se a propriedade DynamicLayout tiver o valor false o conteúdo não vai ser
movido porque o UpdateProgress já vai estar ocupando o espaço necessário na
pagina, apenas com sua visibilidade oculta.
12 – Localize agora na janela Properties a propriedade
AssociatedUpdatePanelID. Essa propriedade é usada quando você quer associar
um UpdatePanel especifico ao UpdateProgress em questão. Selecione
UpdatePanel1 para essa propriedade como a seguinte imagem:

Página 123
Curso ASP.NET AJAX
13 – Adicione mais um UpdateProgress na pagina embaixo do UpdateProgress1
e modifique o texto de cada UpdateProgress conforme a imagem:

Página 124
Curso ASP.NET AJAX
14 - Associe o UpdateProgress2 ao UpdatePanel2 usando a propriedade
AssociatedUpdatePanelID.

Página 125
Curso ASP.NET AJAX
15 – Execute a aplicação e perceba que agora para cada UpdatePanel é exibido
um texto diferente de acordo com o UpdateProgress associado.
Quero que você compreenda agora que ao fazer uma chamada assíncrona no
momento que outra já esta sendo executada, por padrão, a nova chamada é
executada cancelando a antiga.
Para finalizar quero demonstrar o uso do UpdateProgress dentro do
UpdatePanel. Para isso:
16 – Arraste o UpdateProgress1 para dentro do UpdatePanel1 como mostra a
imagem:

Página 126
Curso ASP.NET AJAX
17 – Execute e teste a aplicação.
Agora você já sabe como utilizar os controle UpdateProgress em suas aplicações.
É claro que você pode e vai utilizar bem mais recursos ou controles em suas
aplicações dos que eu estou usando nos exemplos do livro, mas as operações serão
as mesmas ou parecidas.

Página 127
Curso ASP.NET AJAX
CAPITULO 5
O controle Timer
O controle Timer permite a atualização da pagina em intervalos de tempo
definidos.
Neste capitulo faremos uma prática onde você entenderá o que é, e como utilizar o
controle Timer.
Site chamada Timer como mostra imagem abaixo. Neste exemplo usarei a
linguagem C#.

Página 128
Curso ASP.NET AJAX
2 – Verifique se o controle ScriptManager já esta adicionado na pagina, 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 esta localizado na guia AJAX Extensions na Toolbox. Organize-os
como a imagem abaixo:

Página 129
Curso ASP.NET AJAX
5 – De 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 é o mesmo apenas sem o ponto-e-vírgula, como segue:
Label1.Text = "Atualizado em: " + DateTime.Now.ToString()

Página 130
Curso ASP.NET AJAX
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 tempos definidos pela propriedade Interval.
6 – Selecione o controle UpdatePanel1 e na janela Properties localize a
propriedade Interval. Seu valor padrão é 60.000 milisegundos, ou seja, 60
segundos ou 1 minuto. Altere este valor para 3000 milisegundos (3 segundos)
como mostra a imagem:

Página 131
Curso ASP.NET AJAX
Atenção: Quando menor o intervalo de tempo mais solicitações o controle efetuara
ao servidor, aumentando o trafego 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 3
segundo é atualizada a data e hora no Label1.
Quando eu digo “aproximadamente” é isso mesmo, você vai entender porque
agora:
8 – Adicione o seguinte código dentro do procedimento de evento Timer1_Tick
como mostra a seguinte imagem:
Em VB.NET o código é o mesmo apenas sem o ponto-e-vírgula, como segue:

Página 132
Curso ASP.NET AJAX
Este código não é novidade para você nesta 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
segundos e não três como configuramos na propriedade Interval.
Isto 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
esta sendo trafegado e da utilização de banda.

Página 133
Curso ASP.NET AJAX
10 – Com o objetivo de realizar a atualização a cada três segundos exatamente
vamos arrastar o controle Timer1 para fora do UpdatePanel como mostra a
imagem:
11 – Como um controle qualquer, como um Button, por exemplo, para que o
controle Timer efetue uma chamada de atualização assíncrona em um
UpdatePanel é necessário associa-los utilizando Trigger. Para isso selecione o
UpdatePanel e clique sobre a propriedade Triggers. Na janela
UpdatePanelTrigger adicione uma AsyncPostBack Trigger para o controle
Timer1 e o evento Tick como mostra a imagem:

Página 134
Curso ASP.NET AJAX
12 – Execute sua aplicação. Agora sim, a cada exatamente três segundos a
atualização é efetuada. Fique atento, visualize a seguinte circunstancia:
O controle Timer efetua uma atualização assíncrona a cada 3 segundos. Mas uma
das atualizações demora mais do que três segundos para ser finalizada. Então
antes do que a atualização acabe é iniciada uma outra. O que acontece 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>

Página 135
Curso ASP.NET AJAX
<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.
14 – Adicione mais um UpdatePanel e um Label dentro do mesmo como mostra a
imagem:

Página 136
Curso ASP.NET AJAX
15 – Configure a propriedade UpdateMode dos controles UpdatePanel1 e
UpdatePanel2 como Conditional.
16 – Para o UpdatePanel2, adicione uma AsyncPostBack Trigger para o
controle Timer1 e o evento Tick.
17 – Adicione o seguinte código no procedimento Timer1_Tick como mostra a
imagem:
Label2.Text = "Atualizado em: " + DateTime.Now.ToString();

Página 137
Curso ASP.NET AJAX
18 – Execute sua aplicação. Agora a cada três segundos ambos UpdatePanel
serão atualizados através de um único controle Timer.
Mas e se você precisar atualizar cada um dos UpdatePanel em intervalos de
tempo diferentes? Para responder essa pergunta continuamos nosso exemplo.
19 – Adicione mais um controle Timer como mostra a imagem:
20 – Modifique a propriedade Trigger do UpdatePanel2 para o controle Timer2
como mostra a imagem:

Página 138
Curso ASP.NET AJAX
21 – De um clique duplo sobre o controle Timer2. Mova o código que atualiza o
Label2 para dentro do mesmo como mostra a imagem:

Página 139
Curso ASP.NET AJAX
22 – Altere a propriedade Interval do controle Timer2 para 5000 (5 segundos).

Página 140
Curso ASP.NET AJAX
23 – Execute sua aplicação. Agora o UpdatePanel1 é atualizado a cada três
segundos e o UpdatePanel2 é atualizado a cada cinco segundos.
Com este exemplo concluído você é capaz de utilizar o controle Timer em suas
CAPITULO 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 circunstancias:
• Controlar como múltiplas atualizações assíncronas são processadas. Por
padrãoaa ultima atualização sobrepõe à primeira, mas podemos controlar
isso usando Javascript e DOM;
• Disponibilizar informações sobre a atualização assíncrona que esta sendo
executada. Isso melhora a experiência do usuário com a pagina
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 controles que não estão sendo usados
na atualização assíncrona. Um exemplo seria enviar para o servidor o valor
de um TextBox que esta fora de um UpdatePanel que esta sendo
processado. Isso permite que o valor do TextBox seja utilizado no código

Página 141
Curso ASP.NET AJAX
que esta sendo processado no servidor e influencia o resultado da
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
APENDICES A e B.
Neste capítulo faremos uma pratica que o ensinará a:
• Trabalhar com os eventos da classe PageRequestManager;
• Parar uma atualização assíncrona;
Site chamada PageRequestManager como mostra imagem abaixo. Neste
exemplo usarei a linguagem C#.

Página 142
Curso ASP.NET AJAX
2 – Verifique se o controle ScriptManager já esta adicionado na pagina, 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
Atualizando...
5 – Organize os controles na página como a imagem abaixo:

Página 143
Curso ASP.NET AJAX
5 – De um clique duplo sobre o Button1 e digite o seguinte código para o
procedimento de evento Button1_Click:
Label1.Text = DateTime.Now.ToString();
Em VB.NET o código é o mesmo apenas sem o ponto-e-vírgula no final.

Página 144
Curso ASP.NET AJAX

Página 145
Curso ASP.NET AJAX
Até agora nenhuma novidade. Este é um exemplo semelhante aos que fizemos até
aqui. Mas entenda que como o ciclo de vida de uma pagina ASP.NET possui uma
serie 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 esses eventos em nossas aplicações ASP.NET AJAX.
7 – Vá até o código HTML da pagina para isso clique no botão Source.
8 - Localize a seguinte tag:
<asp:ScriptManager ID="ScriptManager1" runat="server" />

Página 146
Curso ASP.NET AJAX
Esta tag representa o controle ScriptManager que esta adicionado a nossa pagina.
9 – Logo abaixo da tag do controle ScriptManager digite o seguinte código:
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_initializ
eRequest(Exibir);
function Exibir(){
alert("InitializeRequest");
</script>
Seu código HTML deve estar assim:
Esse é um bloco de código Javascript.

Página 147
Curso ASP.NET AJAX
A função Exibir() exibe a mensagem “InitializeRequest” usando o comando
javascript Alert().
A seguinte linha de código recupera uma instancia da classe
PageRequestManager e adiciona o método Exibir() como manipulador do evento
initializeRequest.
Sys.WebForms.PageRequestManager.getInstance().add_initializ
eRequest(Exibir);
Vamos executar nosso exemplo para compreender melhor o que este bloco faz.
10 – Execute sua aplicação. Quando você clica no botão é exibida a seguinte
mensagem:
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 desse evento nos seus
programas, para compreender melhor sobre javascript e DOM consulte o APENDICE
A e B.
11 – Modifique o código javascript criado até agora para o seguinte:

Página 148
Curso ASP.NET AJAX
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 mesmo mais claro e legível facilitando a manipulação de outros
eventos como faremos a seguir. Nele criamos uma variável chamada prm e
atribuímos a ela a instancia da classe PageRequestManager. Para isso usamos o
método getInstance(). Isso facilita o uso dos eventos porque usamos a variável
com a instancia do método para atribuir o método Exibir() ao evento
initializeRequest.
Você não pode criar uma instancia da classe PageRequestManager
diretamente. Esta classe esta sempre disponível quando o controle
ScriptManager e o UpdatePanel esta na sua pagina realizando atualização
assíncrona. Por isso sempre que você precisar utilizar essa classe deve recuperar
sua instancia usando o método getInstance().

Página 149
Curso ASP.NET AJAX
12 – 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.

Página 150
Curso ASP.NET AJAX
12 – Execute e teste sua aplicação. Agora após o evento initializeRequest é
executado o evento beginRequest. Como mostra a imagem abaixo:

Página 151
Curso ASP.NET AJAX
Os próximos três eventos que são executados sempre que uma solicitação
assíncrona é executada são os eventos: pageLoading, pageLoaded e
endRequest. Vamos demonstrá-los:
13 – 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.getInstance();
prm.add_initializeRequest(Exibir);
function Exibir(){

Página 152
Curso ASP.NET AJAX
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>
14 - Execute sua aplicação. Agora para cada evento você tem uma mensagem
exibida com o nome do mesmo. Isso demonstra claramente a ordem que os
eventos são executados e permite que você escolha qual o evento vai ser usado em
suas aplicações de acordo com a sua necessidade.
Você também deve ter notado que o evento pageLoaded foi executado logo que a
pagina foi aberta sem que nenhuma atualização assíncrona tenha sido disparada.

Página 153
Curso ASP.NET AJAX
Esse é o único evento que é disparado em uma atualização síncrona
também.
15 – Mude o código da função Exibir() para o seguinte:
function Exibir(sender, args){
alert(args.get_postBackElement().id);
16 – Execute sua aplicação e teste.
Perceba que agora no método initializeRequest o identificador ou seja o ID do
botão foi exibido. O método get_postBackElement() permite que você recupere
uma instancia do objeto que executou uma solicitação assíncrona, e a partir daí
você pode usar o DOM e o javascript para manipulá-lo no lado cliente.
Avalie o seguinte código para a função Exibir():
function Exibir(sender, args){
var obj = args.get_postBackElement();
alert(obj.id);

Página 154
Curso ASP.NET AJAX
Aqui utilizamos o método get_postBackElement() para recuperar o objeto e
atribuir o mesmo a 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 para a execução de uma
17 – Localize a guia HTML na barra de ferramentas e adicione um controle Button
dentro do UpdateProgress como mostra a imagem:
Foi utilizado um controle HTML porque este botão só vai ser utilizado no lado
cliente.

Página 155
Curso ASP.NET AJAX
18 – Selecione esse Button e mude a sua propriedade Value para Cancelar como
mostra a imagem:
19 – Adicione o seguinte código dentro do script em javascript como mostra a
próxima imagem:
function Cancelar(){
prm.abortPostBack();

Página 156
Curso ASP.NET AJAX
Este código é simples e demonstra claramente como utilizar o método
abortPostBack(). Lembre-se que prm é uma variável que tem uma instancia da
classe PageRequestManager.
20 – Ainda no código HTML localize o código HTML do Button que esta dentro do
UpdateProgress e o modifique para o seguinte:
<input id="Button2" type="button" value="Cancelar"
onclick="Cancelar()" />

Página 157
Curso ASP.NET AJAX
A modificação foi simples, apenas adicionamos o evento onclick que chama a
função Cancelar().
Segue uma imagem da modificação no código HTML:
21 – Execute e teste sua aplicação. Agora se você clicar em Cancelar a atualização
é parada imediatamente.

Página 158
Curso ASP.NET AJAX
Para finalizar quero que você conheça a propriedade isInAsyncPostBack. Ela tem
o valor true se a atualização ou PostBack que esta sendo efetuado é assíncrono e
tem o valor false se a atualização for síncrona. Vamos utilizá-la:
22 – Altere o código da função Exibir4() para a seguinte:
function Exibir4(){
if (prm.get_isInAsyncPostBack()){

Página 159
Curso ASP.NET AJAX
Aqui fizemos o uso do método get_isInSyncPostBack para recuperar o valor da
propriedade isInAsyncPostBack da classe PageRequestManager que esta
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.
23 – 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 exibida. Isso porque na função Exibir4() que é
utilizada por esse evento estamos verificando se a atualização é assíncrona e nesse
caso o valor é false. Já ao usar a atualização assíncrona a mensagem é exibida
normalmente.
CAPITULO 7
Usando ASP.NET AJAX em aplicações já
existentes
Para usar o ASP.NET AJAX em uma aplicação já existente você precisa fazer
algumas modificações no arquivo Web.config.
Vamos a uma prática para você entender melhor quais são estas modificações:
1 – Crie uma nova aplicação ASP.NET normal, utilize o Template ASP.NET Web
Site como mostra a imagem abaixo:

Página 160
Curso ASP.NET AJAX
2 – Abra o arquivo Web.config.
3 – Adicione o seguinte código logo abaixo a tag <configuration> :
<configSections>
<sectionGroup name="system.web.extensions"
type="System.Web.Configuration.SystemWebExtensionsSectionGroup,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35">
<sectionGroup name="scripting"
type="System.Web.Configuration.ScriptingSectionGroup,
<section name="scriptResourceHandler"
type="System.Web.Configuration.ScriptingScriptResourceHandlerSection,

Página 161
Curso ASP.NET AJAX
PublicKeyToken=31bf3856ad364e35" requirePermission="false"
allowDefinition="MachineToApplication"/>
<sectionGroup name="webServices"
type="System.Web.Configuration.ScriptingWebServicesSectionGroup,
<section name="jsonSerialization"
type="System.Web.Configuration.ScriptingJsonSerializationSection,
allowDefinition="Everywhere"/>
<section name="profileService"
type="System.Web.Configuration.ScriptingProfileServiceSection,
<section name="authenticationService"
type="System.Web.Configuration.ScriptingAuthenticationServiceSection,
</sectionGroup>
</sectionGroup>
</sectionGroup>
</configSections>
Observe na imagem abaixo o local exato onde o código deve ser inserido:

Página 162
Curso ASP.NET AJAX
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 esta
no Web.config.
Os elementos criados dentro da tag <configSections> criam seções e sub-seções
de configuração para a classe SystemWebExtensionsSectionGroup. Você
configura as propriedade para estas seções usando o elemento
<system.web.extensions>.
4 – Adicione o seguinte código logo abaixo da tag <pages> :
<controls>

Página 163
Curso ASP.NET AJAX
<add tagPrefix="asp" namespace="System.Web.UI"
assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35"/>
</controls>
O elemento <controls> registra os namespaces ASP.NET AJAX no assembly
System.Web.Extensions e mapeia esses namespaces para serem usados
utilizando a tag asp como este exemplo onde registramos o controle ScriptManager
na pagina:

Página 164
Curso ASP.NET AJAX
<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,
</assemblies>
</compilation>
<httpHandlers>
<remove verb="*" path="*.asmx"/>
<add verb="*" path="*.asmx" validate="false"
type="System.Web.Script.Services.ScriptHandlerFactory,
<add verb="*" path="*_AppService.axd"
validate="false"
type="System.Web.Script.Services.ScriptHandlerFactory,
<add verb="GET,HEAD" path="ScriptResource.axd"
type="System.Web.Handlers.ScriptResourceHandler,
PublicKeyToken=31bf3856ad364e35" validate="false"/>
</httpHandlers>
<httpModules>
<add name="ScriptModule"
type="System.Web.Handlers.ScriptModule, System.Web.Extensions,

Página 165
Curso ASP.NET AJAX
Version=1.0.61025.0, Culture=neutral,
</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

Página 166
Curso ASP.NET AJAX
Observe na imagem que no código acima 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 ASP.NET AJAX necessários na sua aplicação. Lembre-se
de adicionar o controle ScriptManager em todas as paginas que for utilizar o
ASP.NET AJAX.

Página 167
Curso ASP.NET AJAX
CAPITULO 8
Usando Web Services em suas aplicações
ASP.NET AJAX
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 permitem que apenas os dados solicitados sejam
trafegados. No entanto para manipular estes dados, ou seja, trata-los, formata-los
e exibi-los precisaremos utilizar Javascript aliado ao DOM.
Neste capitulo vou concentrar em como tornar seu Web Service disponível em
uma aplicação ASP.NET AJAX e como usa-lo em suas aplicações. Para entender
mais sobre Javascript e DOM consulte os APENDICES A e B.
Vamos iniciar o nosso exemplo prático para entendermos os conceitos propostos
para o capitulo.
Site chamada WebServices como mostra imagem abaixo. Neste exemplo usarei a
linguagem VB.NET.

Página 168
Curso ASP.NET AJAX
Vamos agora adicionar um Web Service a 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 do nosso Web
Service, para isso 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 imagem a seguir:

Página 169
Curso ASP.NET AJAX
4 – Clique em Add.
5 - Para permitir que o Web Service seja acessado por script você precisa
adicionar o atributo ScriptServiceAttribute a classe do mesmo. Para isso adicione
o seguinte atributo acima do nome da classe:
<System.Web.Script.Services.ScriptService()> _
Em C#:
[System.Web.Script.Services.ScriptService]
O atributo ScriptService esta localizado no namespace
System.Web.Script.Services. Se você importar esse namespace no Web

Página 170
Curso ASP.NET AJAX
Service poderá fazer referencia ao atributo ScriptService implicitamente desta
forma:
<ScriptService()> _
Em C#:
[ScriptService]
6 – Substitua a função HelloWorld que já esta 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:

Página 171
Curso ASP.NET AJAX
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 isso clique com o botão direito sobre o
mesmo na janela Solution Explorer e selecione View in Browser como mostra a
imagem:

Página 172
Curso ASP.NET AJAX
É exibida a seguinte página no seu navegador listando os métodos que estiverem
disponíveis para o acesso remoto. No nosso exemplo apenas o método Somar.

Página 173
Curso ASP.NET AJAX
8 – Clique em Somar.
Agora você pode testar o método Somar como mostra a imagem seguinte:

Página 174
Curso ASP.NET AJAX
9 – Teste seu Web Service digitando um número para cada caixa de texto e
clicando em Chamar. O resultado é exibido em XML.

Página 175
Curso ASP.NET AJAX
Todos os dados de um Web Service são transmitidos usando o padrão XML.
10 – Agora que nosso Web Service já esta criado, volte para a página
Default.aspx e verifique se o controle ScriptManager já esta adicionado na
pagina, 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 método em questão.
Esta classe vai efetuar a chamada do Web Service e manipular a transferência de
dados. O ASP.NET AJAX através do controle ScriptManager cria esta classe

Página 176
Curso ASP.NET AJAX
(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 referencia ao mesmo no próprio
controle. Para isso, clique sobre o controle ScriptManager para seleciona-lo e na
janela Properties localize a propriedade Services como mostra a imagem:
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
mostra a imagem:

Página 177
Curso ASP.NET AJAX
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 através de uma
requisição separada (se for False). O valor False é o padrão. O valor False é
melhor quando múltiplas paginas fazem requisição ao mesmo Web Service e se o
cache do browser estiver habilitado. Já o valor True desta propriedade pode
melhorar o desempenho reduzindo o numero de requisições, o que é especialmente
útil quando temos muitas referencias ao Web Service em uma mesma pagina e
pouca 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 referencia para o Web Service como
mostra o código:
<asp:ScriptManager ID="ScriptManager1" runat="server" >

Página 178
Curso ASP.NET AJAX
<Services>
<asp:ServiceReference Path="calcular.asmx" />
</Services>
</asp:ScriptManager>
13 - Na Toolbox localize a guia HTML como mostra imagem:
Com você aprendeu no começo deste capitulo com o uso dos Web Services nós
temos o desenvolvimento voltado 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.

Página 179
Curso ASP.NET AJAX
14 - Adicione os seguintes controles HTML a 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 imagem abaixo:
18 – De um clique duplo sobre o Button1.

Página 180
Curso ASP.NET AJAX
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 navegado possa fazer a chamada corretamente como mostra o seguinte
código:
<input id="Button1" type="button" value="Calcular"
language="javascript" onclick="return Button1_onclick()" />
Você poderia ter criado esta função sozinho e feito a referencia no botão mas o
Visual Studio 2005 ajuda nisso também, poupando um pouco de trabalho. Na
verdade o Visual Studio 2005 não ajuda muito quando trabalhamos com código
Javascript, mas na próxima versão desta ferramenta teremos muitas novidades que
vão aumentar muito a produtividade com esta linguagem de script.
19 – Modifique a função Button1_onclick e adicione a função QuandoCompleta
como mostra o seguinte código:

Página 181
Curso ASP.NET AJAX

</script>
Seu código HTML deve estar como a seguinte imagem:

Página 182
Curso ASP.NET AJAX
20 – Execute sua aplicação. Digite um numero em cada caixa de texto e clique em
no botão Calcular. O resultado é exibido como mostra a seguinte imagem:

Página 183
Curso ASP.NET AJAX
21 – Pare a execução da sua aplicação.
Vamos analisar o código das funções Javascript para entender melhor o
funcionamento.
A função chamada pelo botão é a Button1_onclick nela, primeiramente
declaramos duas variáveis (numero1 e numero2) que vão armazenar o valor
recuperado das caixas de texto através do método getElementById do DOM como
mostra o código:
var numero1 = document.getElementById('Text1').value;
var numero2 =
document.getElementById('Text2').value;

Página 184
Curso ASP.NET AJAX
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:
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 referencia a uma outra função (a função QuandoCompleta) que vai receber o
valor retornado pelo Web Service. Então quando o quanto o Web Service retorna
o resultado a função QuandoCompleta é executada.
A função QuandoCompleta recebe um parâmetro, dei o nome de args para ele
mas você pode nomeá-lo como desejar. Você usa este parâmetro para recuperar o
valor dentro da função.
Ainda sobre a função QuandoCompleta a seguinte linha de código apenas
encontra o elemento Label1 na pagina usando o método getElementById e
atribui ao mesmo o valor que esta contido em args.
document.getElementById('Label1').innerText = args;
Opcionalmente podemos criar mais duas funções Javascript para ajudar no
tratamento de erros em chamadas a Web Services. Essas funções podem ser
passadas como parâmetro na chamada ao método do Web Service como fizemos

Página 185
Curso ASP.NET AJAX
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
QuandoCompleta:
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:
Calcular.Somar(numero1, numero2, QuandoCompleta, QuantoErro,
QuandoTimeOut);

Página 186
Curso ASP.NET AJAX
24 – Vamos simular um erro no nosso Web Service para ver a função
QuantoErro em ação. Para isso volte ao painel de código do Web Service e
adicione o seguinte código dentro do método Somar:
Throw New Exception("houve um erro")
Em C#:
throw new Exception("houve um erro");
Como mostra a imagem:

Página 187
Curso ASP.NET AJAX
O código acima apenas cria um erro ou exceção impedindo o correto funcionamento
do método Somar.
25 – Execute sua aplicação e teste. A seguinte mensagem deve ser exibida:
Esta mensagem foi exibida porque dentro do método QuantoErro esta o código:

Página 188
Curso ASP.NET AJAX
alert("Houve um erro na chamada ao web service.");
Você pode personalizar criando código Javascript que melhor se adapte a sua
aplicação.
O método QuantoTimeOut é executado quando o Web Service excede o tempo
de resposta.
APENDICE A
JAVASCRIPT
Para utilizar o JavaScript em uma página HTML, é usada a tag <script> e com o
atributo type definido como: text/javascript. Exemplo:
//códigos JavaScript
</script>

Página 189
Curso ASP.NET AJAX
Assim o browser entenderá que no conteúdo dessa tag há comandos javascript
para ser executado.
Você pode inserir seu código javascript em três locais na página HTML, são elas:
• 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 delas.
Arquivo externo com extensão .js
O arquivo externo é chamado desta forma:
<head>
<script type="text/javascript" src="externo.js"></script>
</head>
Ou seja, através do atributo src da tag <script>, indicamos a localização do
arquivo externo, assim o browser 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:

Página 190
Curso ASP.NET AJAX
• 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 referencia 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> </head> da página são
executados ao serem chamados, ou seja, quando algum evento for provocado,
como o evento onclick, onmouseover, onload, dentre outros.
Nessa forma o script é carregando antes de alguém utilizá-lo, ou seja, antes do
carregamento do conteúdo que esta entre as tags <body> </body>.

Página 191
Curso ASP.NET AJAX
No body – entre as tags <Body> e </Body>
O script é inserido desta forma:
<body>
</script>
</body>
Os códigos inseridos entre as tags <body> </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 disposto
via script. Isso significa que dentro desta tag disponibilizamos conteúdo para o
usuário não tiver suporte ao javascript em seu browser.
Veja um exemplo:
alert("Olá fulano.");
</script>
<noscript>

Página 192
Curso ASP.NET AJAX
<p>Olá fulano.</p>
</noscript>
No exemplo acima 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, 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
uma linha somente, enquanto o segundo suporta várias linha 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>

Página 193
Curso ASP.NET AJAX
Ainda sobre comentários em Javascript observe que os browsers que não suportam
o Javascript irão exibi-lo como se fosse parte do conteúdo da página. Para prevenir
essa prática, utilizamos o comentário em HTML associados ao código Javascript.
<head>

</script>
</head>
As duas barras (//) antes do fechamento do comentário previnem que o
interpretador 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.

Página 194
Curso ASP.NET AJAX
Você precisa utilizar o ponto e vírgula se utilizar 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:
numeroFuncionario = 23;

Página 195
Curso ASP.NET AJAX
Entendemos pelo sinal de igual como recebe. Assim numeroFuncionario recebe 23.
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
Representação em
Operador Exemplo
Javascript
a*b
Multiplicação * Multiplica-se o valor de a
por b.
a/b
Divisão / Divide-se o valor de a por
b.
a%b
Módulo % Retorna o resto da divisão
de a por b.
a+b
Adição +
Soma de a e b.
Subtração - a–b

Página 196
Curso ASP.NET AJAX
Subtração de a com b.
a ++
Incremento ++ Neste caso é somado 1 ao
valor de a.
a --
Decremento -- Neste caso é subtraído 1
do valor de a.
Operadores de relacionais
Representação em
Operador Exemplo
Javascript
a>b
Se o valor de a for maior
que o valor de b então o

Maior >
resultado dessa expressão
é verdadeiro senão é
falso.
a >= b
Se o valor de a for maior
ou igual que o valor de b

Maior ou igual >=
então o resultado dessa
expressão é verdadeiro
senão é falso.
a<b
Se o valor de a for menor

Menor <
que o valor de b então o

Página 197
Curso ASP.NET AJAX
falso.
a <= b
Se o valor de a for menor
ou igual que o valor de b

Menor ou igual <=
senão é falso.
a == b
Se o valor de a for igual
ao valor de b então o
Igual a ==
falso.
a === b
Se o valor e o tipo de
Igual a (compara o valor dado de a for igual a b

===
e o tipo) então o resultado dessa
expressão é verdadeiro,
senão é falso.
a != b
Se o valor de a for
diferente do valor de b
Diferente de !=
senão é falso.

Página 198
Curso ASP.NET AJAX
Operadores lógicos
Representação em
Operador Exemplo
Javascript
a == 5 && b > 9
Caso o valor de a seja
igual a cinco e o valor de

E &&
b maior que nove o
resultado é verdadeiro,
senão é falso.
a == 5 || b > 9
Se o resultado de a for
igual a cinco ou o valor de
b for maior que nove
Ou || então o resultado é
verdadeiro. O resultado
só será falso se as duas
expressões retornarem
falso.
! a == 5
Se o resultado de a for
igual a 5 então o
Não !
resultado será falso, o
operador não inverte o
resultado da expressão.

Página 199
Curso ASP.NET AJAX
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
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;
var resposta = (nota >= 60) ? "Aprovado." : "Reprovado.";
No exemplo acima fizemos o seguinte processo: inicialmente temos uma variável
denominada nota com o valor 65. Em seguida, a variável resposta com um valor

Página 200
Curso ASP.NET AJAX
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:

Página 201
Curso ASP.NET AJAX
var idade = 19;
if(idade >= 18) {
alert("Você pode ter sua carteira de motorista");
No exemplo acima, 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 acima, a declaração if verifica se a variável sexo é igual a masculino.
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.

Página 202
Curso ASP.NET AJAX
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 verdadeiro exibiremos o texto Você

Página 203
Curso ASP.NET AJAX
precisa usar o Real; e perguntamos se a mesma variável tem o valor Dólar (a
segunda). Neste caso, exibiremos 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.
Declaração switch
Sintaxe:
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á.");

Página 204
Curso ASP.NET AJAX
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 isso é 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:

Página 205
Curso ASP.NET AJAX
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("Número atual: " + numero);
No exemplo acima 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 número for menor ou igual 10 o código será executado.
Loop while
Sintaxe:

Página 206
Curso ASP.NET AJAX
while (var <= valorFinal) {
Exemplo:
var numero = 1;
while (numero <= 10) {
numero = numero + 1;
Conforme você pode ver no exemplo do loop while o código é executado enquanto
a condição for verdadeira.
Loop do...while
Sintaxe:
do {
} while (var <= valorFinal);
Exemplo:
var numero = 1;
do {
numero = numero + 1;
} while (numero < 1).

Página 207
Curso ASP.NET AJAX
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 à 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 continua
com o mesmo:
var idade = 24;
for (idade = 24; idade <= 34; idade++) {
if(idade == 30) {
continue;

Página 208
Curso ASP.NET AJAX
alert("Você tem " + idade + " anos ?");
No exemplo acima, 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 3 tipos de Pop-up boxes com javascript. São elas:
Alert
Exemplo:
alert("Você esta usando o ALERT");
Confirm
Exemplo:

Página 209
Curso ASP.NET AJAX
confirm("Você esta usando o CONFIRM");
Prompt
Exemplo:
prompt("Você esta usando o PROMPT","");
No comando prompt você pode sugerir uma resposta. Exemplo:
prompt("Você esta usando o PROMPT","E sugerindo uma resposta");

Página 210
Curso ASP.NET AJAX
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 muito código digitado é igual, ou seja, que você precisa repetir código 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.
Sintaxe - sem parâmetros
function nomeDaFuncao() {
//códigos referente à função.
Exemplo:
function HelloWorld() {
alert("Olá mundo.");
// Exemplo para chamá-la.

Página 211
Curso ASP.NET AJAX
<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 à 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;

Página 212
Curso ASP.NET AJAX
// Chamando a função através do alert().
alert(calculo(23,5));
No exemplo acima, chamamos a função calculo fornecendo a ela dois parâmetros -
valor1 (23) e valor2 (5). Nessa função temos a variável total que multiplica os
dois parâmetros informados e retorna o valor utilizando o return.
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.
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

Página 213
Curso ASP.NET AJAX
• 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, dentre outros.
Exemplo:
onclick="javascript:nomeDaFuncao(parametroSeHouver);"
• onload e onunload
O evento onload é executado quando uma página HTML é carregada por completa,
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();"

Página 214
Curso ASP.NET AJAX
• 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. Esse 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. Nessa ação, ocorre o onchange.

Página 215
Curso ASP.NET AJAX
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, dentre 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, ela foi pressionada e
em seguida liberada.
Exemplos:
onkeydown="funcaoParaKeyDown();"
onkeypress="funcaoParaKeyPress();"
... onkeyup="funcaoParaKeyUp();" ...
Arrays
O Array nos da a possibilidade de armazenarmos diversos valores em uma única
variável. Dessa forma, seria uma variável com vários valores e esses valores são
armazenados e acessados através de uma ordem.

Página 216
Curso ASP.NET AJAX
Como exemplo, imagine uma variável com o nome escalacaoBrasil. Para ela,
precisaremos armazenar onze valores, uma vez que o time tem onze jogadores.
Vamos a um exemplo.
O objeto Array é definido através da palavra-chave new.
var escalacaoBrasil = new Array();
var escalacaoBrasil = new Array(11);
Ambos os exemplos acima estão corretos. A diferença entre eles é que o segundo
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");

Página 217
Curso ASP.NET AJAX
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
Coloca todos os elementos de um Array em uma string e os separam por

join()
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.

Página 218
Curso ASP.NET AJAX
Data
Para trabalharmos com datas e horários em JavaScript fazemos uso do objeto
Date()
Exemplo:
var dataAtual = new Date();
alert(dataAtual);
No exemplo acima teremos a data e o horário atual, ou seja, o exato momento em
que o script foi executado. O resultado aparecerá no formato abaixo:
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();
var mes = new Array(12)
mes[0] = "Janeiro";
mes[1] = "Fevereiro";
mes[2] = "Março";
mes[3] = "Abril";
mes[4] = "Maio";
mes[5] = "Junho";
mes[6] = "Julho";
mes[7] = "Agosto";
mes[8] = "Setembro";

Página 219
Curso ASP.NET AJAX
mes[9] = "Outubro";
mes[10] = "Novembro";
mes[11] = "Dezembro";
alert(data.getDate() + "/" + mes[data.getMonth()] + "/" +
data.getFullYear());
No exemplo acima utilizamos o objeto Date e três de seus métodos: getDate(),
getMonth(), 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 acima 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)

Página 220
Curso ASP.NET AJAX
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 milisegundos (0-999).
Retorna a diferença em minutos entre o tempo local e o do

getTimezoneOffset()
Meridiano de Greenwich (GMT)
Os métodos acima 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.

Página 221
Curso ASP.NET AJAX
É importante ressaltar que, além do objeto string, há a string literal. Quando
utilizamos 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. Isso porque a
string literal não é um objeto então não pode conter métodos, se fazendo
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 acima, 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
Retorna a posição da primeira ocorrência de um valor especificado

indexOf()
em uma string.
Retorna a posição da última ocorrência de um valor especificado em

lastIndexOf()
uma string.
Procura por um valor específico em uma string. Se encontrado, ele

match()
(valor) é retornado, caso contrário, retorna null.
replace() Substitue alguns caracteres por outros caracteres em uma string.

Página 222
Curso ASP.NET AJAX
toLowerCase() Exibe os caracteres da string em minúsculos.
toUpperCase() Exibe os caracteres da string em maiúsculos.
Extrai uma quantidade específica de caracteres de uma string a

substr()
partir de um índice inicial.
substring() Extrai os caracteres de uma string entre dois índices.
Math
O objeto Math disponibiliza diversos valores e funções para nos ajudar na
realização de operações matemáticas.
Valores matemáticos
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

Página 223
Curso ASP.NET AJAX
Relação dos valores matemáticos que podem ser acessados pelo objeto Math.
Math Nome Valor
Math.LOG10E base-10 log of E 0.4342944819032518
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.

Página 224
Curso ASP.NET AJAX
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());
// Exibirá números aleatórios entre 0 e 1 - Ex.:
0.8335737463859384
alert(Math.random()*59);
// Exibirá números aleatórios entre 0 e 59 - Ex.:
58.92792655560298
• round()
Arredonda o valor informado para o número inteiro mais próximo, seja positivo ou
negativo.

Página 225
Curso ASP.NET AJAX
var numero1 = 6.7;
alert(Math.round(numero1));
// Exibirá o valor 7
var numero2 = -3.8;
alert(Math.round(numero2));
// Exibirá o valor -4
APENDICE 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 significa Dynamic HTML, ou seja, Dynamic Hyper Text Markup
Language e é a possibilidade de tornar as páginas HTML mais dinâmicas e
interativas através do trabalho em conjunto de três tecnologias: HTML, CSS
e JavaScript.
• O DOM, Document Object Model, é uma plataforma e uma interface de
linguagem-neutra que possibilita aos programas e scripts acessarem e
atualizarem dinâmicamente 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.

Página 226
Curso ASP.NET AJAX
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,
possibilitando-nos a modificação na estrutura do documento, do estilo e do
conteúdo.
A representação do documento ocorre através de uma árvore de nós (tree of node)
em que cada objeto possui sua propriedade e método.
Vejamos a imagem abaixo representando uma "tree of node":
body
ul h1
li li p p
No exemplo acima temos a estrutura de um documento HTML que foi representado
pelo DOM. Podemos encará-lo 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.

Página 227
Curso ASP.NET AJAX
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
estrutura de um documento e seus elementos. Então, utilizamos o DOM
associado ao JavaScript. O DOM para termos acesso à estrutura, estilo e conteúdo
de um documento e o JavaScript para manipulá-los.
O DOM foi desenvolvido para ser independente de qualquer linguagem de
programaçã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 Javascript) 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 browsers. Essa
tecnologia não é um padrão do W3C. Então precisamos desenvolver um DHTML
crossbrowser, ou seja, um DHTML que funcione em diversos browsers 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>

Página 228
Curso ASP.NET AJAX
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 {
background-color: #666666;
border: 1px solid #fc6c6c;
.nodestaque {
background-color: #ffffff;
border: 1px solid #000000;
Acima 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.

Página 229
Curso ASP.NET AJAX
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
procederemos assim:
document.nomeDoFormulario.Telefone.value
Ou seja, precisamos declarar document mais o nome do formulário em que o
campo se localizada e o 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.

Página 230
Curso ASP.NET AJAX
Já o método getElementsByTagName retorna diversos objetos com a tag
especí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 essa coleçã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úsculo a primeira
letra do segundo nome.
Os métodos Style e ClassName

Página 231
Curso ASP.NET AJAX
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. Esse id é
atribuído a 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.
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";

Página 232
Curso ASP.NET AJAX
O script acima 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.
Segue 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 isso 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.

Página 233
Curso ASP.NET AJAX
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 conteúdo
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 essa 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.

Página 234
Curso ASP.NET AJAX
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: var conteudo = document.getElementById("menu");
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: var novoElemento =
document.createElement(nTag);
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 referenciado
na variável conteudo.

Página 235
Curso ASP.NET AJAX
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, informarmos qual elemento será criado. Esse elemento é informado
através do parâmetro nTag da função. Em seguida, inserimos conteúdo ao
elemento criado.
Fazemos referência a um elemento através do getElementById na variável
referencia.
Página 236
Curso ASP.NET AJAX
Criamos a variável parentTag, concedendo 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 a variável parentTag.
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. Porém, se em certos momentos precisamos
inserir algum elemento posterior a um elemento específico. Para isso 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, informarmos qual elemento será criado. Esse elemento é informado
através do parâmetro (nTag) da função. Em seguida, inserimos conteúdo ao
elemento criado.
Uzamos o método getElementById para fazer referencia ao elemento na variá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 a variável parentTag.
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
posteriormente a tag informada como referência.
Os métodos setAttribute e getAttribute
O método setAttribute tem a finalidade de inserir ou modificar um atributo em um
elemento existente.

Página 238
Curso ASP.NET AJAX
A sintaxe do método compreende no seguinte:
setAttribute('nomeDoAtributo','valorDoAtributo');
Exemplo:

</script>
No exemplo acima, criamos os atributos id e class e definimos respectivamente os
seguintes valores: titulo e destaque.
O método getAttibute é usado para recuperar um atributo a fim de manipula-lo.
Sintaxe:
getAttribute('nomeDoAtributo');
Exemplo:

</script>
APENDICE C
Instalando o Visual Studio Web Developers
Express Edition 2005 e o SQL Server 2005
Express Edition
1 – Primeiramente é necessário fazer o download do instalador. Para isso visite o
site:
http://msdn.microsoft.com/vstudio/express/vwd/download/
Neste mesmo site você encontra informações sobre os requisitos necessários para
instalar a aplicação.
2 - Execute o arquivo vwdsetup.exe.
A instalação é iniciada

Página 240
Curso ASP.NET AJAX
4 – Selecione I accept the terms of the License Agreement e clique em Next.
Como a próxima imagem:

Página 241
Curso ASP.NET AJAX
5 – Você é questionado sobre o que deseja instalar. Deixe marcada a opção
Microsoft SQL Server 2005 Express Edition para instalar o mesmo. Eu
aconselho a instalação da documentação também, para isso selecione a opção
Microsoft MSDN 2005 Express Edition, como mostra a imagem a seguir:

Página 242
Curso ASP.NET AJAX
7 - Clique em Install para iniciar a instalação.

Página 243
Curso ASP.NET AJAX
Será feito o download dos arquivos selecionados e a instalação dos produtos.
Como mostra a próxima imagem:

Página 244
Curso ASP.NET AJAX
Depois de concluído você pode registrar o produto. O programa funciona 30 dias
sem registro. O registro é gratuito, clique em Register Now para efetuar o
registro.

Página 245
Curso ASP.NET AJAX
8 – Clique em Exit.

Página 246

Apostila (Avançado) - CURSO ASP - Net Ajax

Enviado por

Dados do documento

Descrição original:

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

Apostila (Avançado) - CURSO ASP - Net Ajax

Enviado por

Direitos autorais:

Formatos disponíveis

Curso ASP.

Autor: Herbert Moroni Cavallari da Costa Gois

Nota sobre direitos autorais:

Este e-book é de autoria de Herbert Moroni Cavallari da Costa Gois, sendo

comercializado diretamente através do site www.juliobattisti.com.br e

www.linhadecodigo.com.br ou através do site de leilões Mercado Livre:

www.mercadolivre.com.br, mediante contato através do email:

batisti@hotmail.com ou webmaster@juliobattisti.com.br, diretamente pelo autor ou

autorização para comercializar este e-book. Nenhum outro usuário/email e/ou

empresa está autorizada a comercializar este ebook.

imprimir quantas cópias desejar. É vetada a distribuição deste arquivo, mediante

autorizada, a qual constitui crime de Violação de Direito Autoral, de acordo com a

webmaster@juliobattisti.com.br, para regularizar esta cópia. Ao regularizar a sua

incentivar que novos trabalhos sejam disponibilizados. Se você tiver sugestões

Visite periodicamente o site www.juliobattisti.com.br para ficar por dentro das

Autor: Herbert Moroni Cavallari da Costa Gois

• Guias de Estudo para os Exames de Certificação da Microsoft.

• Artigos e dicas sobre Certificações da Microsoft.

• Artigos sobre Carreira e Trabalho.

• Dicas de livros e sites sobre diversos assuntos.

• Simulados gratuitos, em português, para os exames da Microsoft.

• ESTE E-BOOK NÃO PODE SER FORNECIDO EM UM CD

OU DVD DE NENHUMA REVISTA

• SE VOCÊ OBTEVE UMA CÓPIA DESTE E-BOOK

ATRAVÉS DO E-MULE, KAZAA, MORPHEUS OU

OUTRO PROGRAMA DE COMPARTILHAMENTO,

SAIBA QUE VOCÊ ESTÁ COM UMA CÓPIA ILEGAL,

• USAR UMA CÓPIA NÃO AUTORIZADA É CRIME DE

VIOLAÇÃO DE DIREITOS AUTORAIS, COM PENA

• VOCÊ SÓ PODE USAR ESTE E-BOOK SE VOCÊ

COMPROU ELE DIRETAMENTE COM O AUTOR: JÚLIO

Autor: Herbert Moroni Cavallari da Costa Gois

Autor: Herbert Moroni Cavallari da Costa Gois

PRÉ-REQUISITOS PARA O CURSO:

tenha preenchido os seguintes pré-requisitos:

• Conhecimento básico do Windows 98, 2000 ou XP, tais como:

Criação de pastas e subpastas.

Utilização do mouse e do teclado.

Operações básicas com arquivos e pastas, usando o Windows

Conhecer conceitos tais como ícones, área de trabalho, janelas do

Windows, uso de menus e outras configurações básicas do Windows.

• Conhecimento de desenvolvimento com ASP.NET:

Criação de páginas e acesso a banco de dados.

Conhecimento sobre HTML.

Desejável conhecimento básico sobre Javascript.

Autor: Herbert Moroni Cavallari da Costa Gois

Edition 2005 e o SQL Server 2005 Express Edition 9

1.1 – O que é o AJAX? 11

1.2 – Considerações sobre o uso AJAX 30

2.1 - Instalando o AJAX ASP.NET 33

2.2 - Conhecendo o AJAX ASP.NET 41

O controle UpdateProgress 115

O controle Timer 128

A Classe PageRequestManager 141

Usando ASP.NET AJAX em aplicações já existentes 160

Usando Web Services em suas aplicações ASP.NET AJAX 168

A tag <noscript> 192

Comentários em Javascript 193

Case Sensitive 194

Ponto e vírgula (;) no final das declarações 194

Autor: Herbert Moroni Cavallari da Costa Gois

Estruturas de Controle 201