Atualizando listas dinamicamente sem refresh


Vou tratar de um assunto que vejo direto em fóruns de discussão sobre ASP. Como atualizar dinamicamente campos do tipo select, sem precisar dar refresh na página? Por exemplo, tenho 2 boxes, um com marcas de carros, e o outro com os carros, e gostaria de que quando eu mudasse a marca do carro, a caixa com os nome dos carros alterasse sem ter que dar refresh. Isso é possível?

Bom, apenas com ASP isso é impossível! ASP é uma tecnologia “server-side”, ou seja, ela só roda no servidor. Depois do momento em que todo o código é enviado para o browser do cliente, ele perde todo o controle da página. Ele não sabe se você alterou algum textbox, ou mudou o item do select. O único modo de fazer o ASP saber o que aconteceu é postando novamente a página.

Para resolver isso, podemos usar uma pequena “gambiarra”, mesclando ASP com JavaScript. Nós vamos fazer com que o ASP escreva um código JavaScript que faça essa atualização!

Como eu dei o exemplo dos carros, vamos utilizá-lo pelo resto do artigo. Vamos criar um arquivo no Access, de nome carros.mdb, com as duas tabelas abaixo:

Marcas

Carros

ID – AutoNumeração
Marca – Texto

ID – AutoNumeração
Marca – Número
Carro – Texto

Crie o seguinte relacionamento: Carros.Marca = Marcas.ID

Agora vamos colocar alguns dados na nossa tabela:

Fiat

– Stilo
– Palio
– Siena

Volks

– Gol
– Bora
– Golf

Ford

– KA
– Focus
– Ranger

Pronto! Já temos nossa tabela, com dados falsos! Vamos criar agora nossa página, onde iremos listar as marcas e os carros (que por enquanto não vai listar nada). Até aí não temos nada de mais, isso é feito com frequência.

<%
“Criando conexão com o banco de dados!
Set Conexao = Server.CreateObject(“ADODB.Connection”)
Conexao.Open “Provider=Microsoft.Jet.OleDB.4.0;Data Source=” & Server.MapPath(“carros.mdb”)

“Abrindo a tabela MARCAS!
Sql = “SELECT * FROM Marcas ORDER BY Marca”
Set Rs = Conexao.Execute ( Sql )
%>
<html>
<head></head>
<body>
<form name=”iMasters”>
Marcas:<br>
<select name=”marcas” onChange=”javascript:atualizacarros(this.form);”>

<% While NOT Rs.EoF %>
<option value=”<% = Rs(“id”) %>“><% = Rs(“Marca”) %></option>
<% Rs.MoveNext %>
<% Wend %>

</select>
<br><br>Carros:<br>
<select name=”carros”></select>
</form>
</body>
</html>

<%
“Fechando os objetos!
Rs.Close
Set Rs = Nothing

Conexao.Close
Set Conexao = Nothing
%>

Pronto! Salve como carros.asp! Se rodarmos este script, iremos ver apenas um select, e dentro do select, todas as marcas. Embaixo dele, temos o Select dos carros, que ainda está vazio. Repare no método onChange do SELECT marcas. Esse método é chamado toda vez que acontece alguma troca de item, ou seja, cada vez que o usuário mudar a marca, a função AtualizaCarros será chamada!

O que essa função tem que fazer? Cada vez que o usuário selecionar uma marca, ela deve atualizar o SELECT dos carros.

Bom, o JavaScript, ao contrário do ASP, é uma linguagem “client-side”, ou seja, ele só roda na máquina do cliente, portanto ela não tem acesso à nossa base de dados. O que faremos então? Vamos fazer com que o ASP forneça ao JavaScript todos os dados de que ele precisa!

Vamos escrever a função EscreveFuncaoJavaScript no ASP:

<%
Function EscreveFuncaoJavaScript ( Conexao )

“O parametro conexao receberá uma conexao aberta!
“Em funcoes, geralmente não criamos objetos do tipo conexões!
“Opte por sempre deixar sua função o mais compatível possível com qualquer projeto!

“Primeiro vamos escrever o cabecalho de qualquer script javascript!
Response.Write “<script language=””JavaScript””>” & vbcrlf
Response.Write “function atualizacarros (form) {” & vbcrlf

“Essa função JavaScript recebe o form em que estão os campos a serem atualizados!
“Veja na chamada da função no método OnChange em que se passa o this.form!

“Vamos criar um switch para ele verificar qual opção foi selecionada!!

Response.Write “switch (form.marcas.options[form.marcas.selectedIndex].value) {
” & vbcrlf

“Agora entramos com o banco de dados! Temos que jogar aqui todas as opções de carro!
SqlMarcas = “SELECT * FROM Marcas ORDER BY Marca”

Set rsMarcas = Conexao.Execute ( SqlMarcas )

While NOT rsMarcas.EOF

“Caso tenha sido essa marca selecionada…

Response.Write “case “” & rsMarcas(“ID”) & “”:” & vbcrlf

“Apagamos tudo o que tem na caixa dos carros!
Response.Write “form.carros.length=0;” & vbcrlf

“Abrimos todos os carros relativos a essa marca!
SqlCarros = “SELECT ID, Carro FROM Carros WHERE Marca = ” & rsMarcas(“ID”)
Set rsCarros = Conexao.Execute ( SqlCarros )

“Fazemos um loop por todos os carros, criando uma nova opção no SELECT!
i = 0
While NOT rsCarros.EoF

Response.Write “form.carros.options[” & i & “] = new Option(“” & rsCarros(“carro”) & “”,”” & rsCarros(“ID”) & “”);” & vbcrlf
i=i+1

rsCarros.MoveNext
Wend

“Imprimos um break! (Verifique tutoriais de JavaScript, se tiverem alguma dúvida da sua utilização!
Response.Write “break;” & vbcrlf

“Próxima marca!
rsMarcas.MoveNext
Wend

“Fecha chaves do switch e da função! E fecha o script!
Response.Write “}}” & vbcrlf & “</script>” & vbcrlf

End Function
%>

Pronto! Nossa função ASP escreve uma função JavaScript pronta para atualizar nosso SELECT carros ! Para colocarmos ela em nossa página, basta colarmos essa função no início do arquivo, e modificarmos a tag HEAD para:

<head><% EscreveFuncaoJavaScript ( Conexao ) %></head>

Teste o script! Ele atualiza corretamente o SELECT! Clique aqui para baixar o código inteiro!

Considerações finais

Esse exemplo é muito bom quando temos poucos dados. Quando a quantidade de dados é grande, isso causa uma grande perda de desempenho, pois você está jogando o conteúdo das duas tabelas INTEIRAS no arquivo ! Ou seja, se você tiver 1 milhão de registros, a página vista pelo usuário conterá 1 milhão de linhas de comandos JavaScript, deixando sua página pesada e mais demorada para o usuário baixar ela inteira!

Bom, espero que tenham gostado desse meu primeiro artigo! Se alguém tiver alguma dúvida em relação ao script, basta me mandar um e-mail!

Abraços, e até a próxima!

Publicado em 29 de dezembro de 2008, em ASP e marcado como . Adicione o link aos favoritos. Deixe um comentário.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: