Adicionar a Meu favorito

Tuesday, 06 de February de 2007

O ASP.NET foi uma grande revolução no desenvolvimento web, trouxe uma grande produtividade para todo o processo de desenvolvimento.

Mas o ASP.NET não mudou a arquitetura de desenvolvimento web. Assim como o ASP 3, o ASP.NET é uma tecnologia para desenvolvimento no lado do servidor, realizando acesso a dados e gerando o conteúdo a ser enviado para o client.

Mas em um sistema será necessária também a interatividade com o usuário, programando o lado client. Tarefas como exibir uma mensagem popup ou definir o foco de uma caixa apenas podem ser feitas com programação no lado client, o que continua sendo feito com javascript.

A programação javascript não mudou em nada. O que mudou foi a forma como o javascript é gerado em conjunto com a tecnologia do servidor. Torna-se necessário entender adequadamente a relação de execução entre o que está no servidor e o que está no lado client para ser possível gerar o javascript corretamente. Então vamos analisar em detalhes situações em que o javascript seja necessário e como ele pode ser gerado.

Inserindo eventos em webControls

O javaScript permite que façamos a programação de eventos no lado client. Eventos como click, onmouseover, onmouseout, e outros, podem ser programados em diversos objetos da interface web, tal como botões, imagens, links e outros objetos.

Os eventos no javascript são inseridos na forma de atributos das tags. Através da propriedade Atributes podemos ter controle sobre os atributos de tags que serão renderizados no lado client, assim podemos adicionar eventos client aos objetos.

Por exemplo, se desejarmos adicionar um evento onclick em um botão podemos utilizar o seguinte código:

button1.attributes.add("onclick","alert('Esse botao foi clicado')")

Neste exemplo ao clicarmos no botão veremos uma mensagem popup antes que o postBack tipico do botão ocorra, para finalmente rodar o evento click deste botão no servidor.

Cancelamento de um postBack

Conforme característica do próprio javascript, podemos utilizar o evento onclick para cancelar a ocorrência de um postBack, bastando retornar do evento um valor boolean.

Assim podemos, ao invés de fazer uso da função alert, utilizar a função confirm do javascript para gerar uma mensagem de confirmação em botões, por exemplo.

Veja :

Button1.attributes.add("onclick","return confirm('Tem certeza ?')")

Gerando eventos no HTML

Para alguns eventos, podemos inseri-los diretamente na tag ao invés de fazer a inserção através do Attributes.

Mas apenas para alguns eventos. A regra é a seguinte : Se existe um evento de servidor com o mesmo nome então você não pode inserir o evento direto no HTML, pois será interpretado errado, será confundido com o evento do servidor. Por exemplo, o onclick do botão, que no servidor tem o mesmo nome.

Mas se não existe nenhum evento de servidor com o mesmo nome, fique a vontade, insira o evento na tag normalmente, o webcontrol, ao não reconhecer o atributo, renderizará o atributo no client exatamente como estiver e desta forma irá gerar o evento no javascript.

Um exemplo disso são os eventos omouseover e onmouseout no objeto Image, veja como fica, neste exemplo preenchendo a linha de status do browser :



Utilizando funções JavaScript

Seria por demais desagradável ter que inserir rotinas mais longas em eventos javaScript utilizando apenas a propriedade attributes.

As regras e lógicas de programação javascript, porém, continuam valendo. Assim sendo, ao invés de inserir todo o código através do attributes podemos apenas inserir uma chamada de função através do attributes.

Assim sendo podemos criar funções diretamente no arquivo .ASPX e através do Attributes inserir apenas as chamadas dessas funções.



E no CodeBehind :

Button1.attributes.add("onclick","return Confirmar()")

Gerando javascript para o client

Existem alguns casos em que o código javascript deve ser executado imediatamente no load da página e não em um evento de um objeto específico.

Os dois casos mais comuns são a exibição de uma mensagem popup no client e a definição do foco para um determinado objeto.

Existem 2 métodos na classe page para a geração de código JavaScript, são os seguintes :

RegisterClientScriptBlock : Gera o script imediatamente após a tag form
RegisterStartUpScript : Gera o script imediatamente antes do fechamento da tag form ()

Essa sutil diferença tem impacto na geração do código client : com o RegisterClientScriptBlock garantimos que o script seja executado tão logo possível, mas deveremos ter cuidado para que o script não faça referência a objetos que ainda nem tiveram suas tags recebidas pelo browser, do contrário o script irá gerar erro.

Já com o RegisterStartUpScript o script será executado apenas depois de todos os objetos terem chegado ao client, justamente devido a posição que o script é inserido na página.

Ambos os métodos recebem 2 parâmetros, o script a ser inserido dentro da página e um parâmetro chamado "key". O parâmetro key tem por objetivo impedir que um script seja duplicado dentro da página, o que é especialmente importante durante o processo de criação de custom web controls.

Neste parâmetro, key, criamos uma espécie de nome para o script. Assim sendo se por algum motivo a instrução de geração do script for executada mais de uma vez, o ASP.NET se encarrega de ignorar as execuções duplicadas. São casos incomuns quando o script é gerado diretamente na página, mas um recurso fundamental para para a criação de custom web controls.

Exibindo uma mensagem de conclusão :

Me.RegisterClientScriptBlock("x", "")

Definindo o foco para uma caixa :

Me.RegisterStartupScript("z", "")

Cuidados com os nomes dos objetos

No exemplo acima utilizamos o nome do objeto - TextBox1 - para poder definir o foco para o objeto. Mas nem sempre o nome que o objeto possui no servidor será o mesmo nome que o objeto possui no client, os nomes poderão ser diferentes especialmente quando o objeto estiver dentro de algum container, tal como uma DataGrid, um Repeater ou outro objeto do gênero.

Para resolver este problema os objetos possuem uma propriedade chamada clientID. Esta propriedade guarda o nome que o objeto terá quando estiver no client. Assim sendo, mudando o código acima, para termos maior segurança com relação ao nome do objeto, o código fica da seguinte forma :

Me.RegisterStartupScript("z", "")

Também é possível ter expressões de binding dentro de blocos de javascript, quer seja para a tradução do nome de um objeto ou para algum outro objetivo. Veja :



Pode-se então utilizar a instrução Page.DataBind para provocar o processamento da expressão e desta forma gerar o id do objeto na posição correta.

Manipulando janelas com JavaScript

Manipular janelas popup é outro recurso para o qual precisamos utilizar amplamente o javascript.

Em um sistema é frequente a necessidade de criarmos janelas popup modais para perguntarmos informações adicionais ao usuário. Mais uma vez precisamos de javaScript para isso.

É importante destacar que não podemos utilizar response.redirect ou server.transfer e indicar em qual janela ou frame a página será aberta. Os dois primeiros são instruções do servidor e portanto não tem como controlar a atividade no client.

Abrindo um popup

Essa primeira parte é simples. Podemos utilizar o window.open do javascript normalmente. Podemos inseri-lo diretamente no ASPX ou utilizar uma das instruções Register para fazer a geração do script com o window.open

Utilizando uma janela modal

Neste caso a tarefa complica um pouco mais, pois em geral quando utilizamos uma janela modal desejamos uma resposta, um resultado. Assim sendo precisamos realizar uma comunicação entre as janelas utilizando javascript

Vamos supor um WebForm1.aspx chamando em uma janela modal um Webform2.aspx.



Neste exemplo temos uma função abrirjanela que deverá estar no webForm1.aspx. Esta função faz a abertura de uma janela modal, obtem um valor de resposta e atribui esse valor de resposta na TextBox1.

Esta função pode ser disparada de diversas formas diferentes : utilizando um hyperlink, o click de uma imagem, um botão html, enfim, objetos client.

Porém só é justificável usar um objeto de servidor para fazer esse disparo se for necessário realizar algum processamento adicional antes da janela popup. Nesse caso podemos fazer o disparo da função no click de um botão no servidor (não "fazer o disparo", mas sim gerar o javascript para isso).

Me.RegisterStartupScript("x", "")

No WebForm2 precisaremos definir o valor de retorno através da propriedade returnValue do objeto window e fechar o form.



Mais uma vez temos a mesma questão : Só é justificável usar objetos de servidor se houver algum processamento adicional a ser realizado antes do fechamento. A forma de fazer o disparo, neste caso, fica identica a anterior :

Me.RegisterStartupScript("x", "")

Detalhes adicionais

Funções javaScript podem ser inseridas em arquivos .JS e estes vinculados a página através da própria tag