Java Script em Aplicações ASP.Net

O ASP.NET trouxe uma grande revolução no desenvolvimento de aplicações Web, alcançando uma grande produtividade para todo o processo de desenvolvimento...

Java Script em Aplicações ASP.Net

 

O ASP.NET trouxe uma grande revolução no desenvolvimento de aplicações Web, alcançando uma grande produtividade para todo o processo de desenvolvimento, porém o ASP.NET assim como o ASP e outras linguagens Web, é uma tecnologia para desenvolvimento no lado do servidor, realizando acesso a dados e gerando o conteúdo a ser enviado para o cliente. Em um sistema real, será necessária também a implementação de eventos para o lado cliente, como por exemplo definir uma validação a um controle, definir foco a uma caixa de texto ou mesmo exibir uma janela popup. Para esse tipo de tarefa torna-se necessário a programação no lado cliente, através  do JavaScript.

 

O JavaScript permite que programemos eventos no lado cliente, como eventos onclick, onmouseover, onmouseout,onkeypress entre outros, e podem ser programados para os diversos componentes da interface web, como botões, caixa de textos, combobox, hiperlinks e outros objetos.

 

No ASP.Net as funções javascript são inseridas na forma de atributos dos controles através da propriedade Atributes, dessa forma podemos adicionar eventos a serem acionados no lado cliente.

        

Para demonstrar o uso de JavaScript no ASP.Net, vamos adicionar um novo Web Site. Adicione um button a página atual e altere a propriedade text para Clique Aqui!!!.

 

 

Figura 1 – Layout da Página Exemplo 1.

 

Para adicionar um evento onclick em um botão podemos utilizar o seguinte código no evento PageLoad:

 

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Button1.Attributes.Add("onclick", "alert('Você clicou no botão!')")

End Sub

Listagem 1 – Evento OnClick do Botão.

 

Execute a aplicação e clique no botão e você deverá ter o seguinte resultado:

 

 

Figura 2 – Mensagem de Alerta.

 

Agora vamos para um exemplo mais interessante, onde adicionaremos um código JavaScript externo ao aplicativo. Para isso, adicione um arquivo JScript a nossa aplicação.

 

 

Figura 3 – Adicionando arquivo .JS a aplicação.

 

No arquivo JScript.js, adicione o código abaixo. Essa função permite criar uma máscara qualquer a ser definida pelo programador.

 

function formatar(src, mask)

{

var i = src.value.length;

      var saida = mask.substring(0,1);

      var texto = mask.substring(i)

      if (texto.substring(0,1) != saida)

{

src.value += texto.substring(0,1);

}

}

Listagem 2 – Função Formatar.

 

Agora adicione duas caixas de texto a página atual para que o layout fique conforme a imagem abaixo:

 

 

Figura 4 – Layout da Página Exemplo 2.

        

Abra o Source da página e entre as tags <head> </head>, e insira uma tag <script> que deverá informar o tipo e a localização do arquivo de Script.

 

<head runat="server">

<script language="jscript" src="JScript.js" type="text/jscript"> </script>

<title>Untitled Page</title>

</head>

Listagem 3 – Tag <script>.

 

Agora adicione no evento PageLoad do formulário os atributos para as caixas de textos.

 

Protected Sub Page_Load(ByVal sender As Object, ByVal e As  

System.EventArgs) Handles Me.Load

TextBox1.Attributes.Add("OnKeyPress",

                    "formatar(this,'##/##/####');")

TextBox2.Attributes.Add("OnKeyPress",

                    "formatar(this,'###.###.###-##');")

End Sub

Listagem 4 – Adicionando atributos para a caixa de texto.

        

Execute a aplicação. Se tudo ocorrer corretamente os valores informados nas caixas de textos serão formatados para máscara informada.

 

 

Figura 5 – Visualizando as Máscaras de Entrada.

 

Chegamos ao final desse artigo.

Até o próximo!

Artigos relacionados