DevMedia - .net Magazine - Embutindo JavaScript em Páginas ASP.NET

Embutindo JavaScript em Páginas ASP.NET

JavaScript - Visão Geral

JavaScript, desenvolvido por Netscape Communications e Sun Microsystems, é uma linguagem de programação que podemos usar para adicionar efeitos dinâmicos a nossa página da web. HTML (Hypertext Markup Language) pode somente descrever o modo como os elementos das páginas web (text, forms, hyperlinks, tabelas, e etc [...]) são visualizados - eles não tem uma maneira de ordenar seus comportamentos. A capacidade de inserir scripts de JavaScript em páginas web nos fornece mais controle sobre como as páginas web se comportam.

Linguagens de script semelhantes ao JavaScript proporcionam a web maior poder de processamento e interatividade com o usuário. A utilização do JavaScript é comum em validações de formulário, processo de verificação de todas as informações requeridas e seus formatos - exemplo do formato de data (dd/mm/aaaa).

É importante ressaltar que a interpretação do código ocorre no lado cliente e após a página ter sido completamente baixada do servidor. Isso tem suas vantagens e desvantagens. Uma vantagem é que o JavaScript executa mais rápido que outras linguagens que comunicam direto com o servidor, porém é incapaz de acessar recursos localizados no servidor de que ele origina.

Por tudo, JavaScript não é compilado e independente, o que significa que ele tem que estar embutido em uma página web e ser executado em uma janela de navegador, pois é o navegador que faz interpretação do código JavaScript.

Embutindo Script em uma Página ASP.NET

Devido a importância dos scripts executados no lado cliente para o ASP.NET, não devemos ficar supresos ao ver a dedicação da Framework .NET implementar propriedades que nos permite gerar scripts no cliente a partir do servidor. O ASP.NET usa a nova propriedade "Page.ClientScript" para registrar e colocar as funções JavaScript na página.

Embutindo Blocos de Código no Topo

O método RegisterClientScriptBlock nos permite colocar funções JavaScript personalizadas no topo página - imediatamente após a tag <form>. As construções possíveis com este são:

RegisterClientScriptBlock (type, key, script);
RegisterClientScriptBlock (type, key, script, addScriptTags);

Onde:

type - o tipo de cliente script para registrar. Neste caso, o tipo é a própria página;
key - palavra chave que permite traçar as funções programaticamente;
script - conteúdo de rotina do JavaScript;
addScriptTags - valor booleano que indica se o ASP.NET deve incluir as tags <script> e </script> e inserir o conteúdo de rotina dentro destas.

Veja na prática:

'vb
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
	 Dim myScript As String = "function AlertHello() { alert('Hello ASP.NET'); }"
	 Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "MyScript", myScript, _
	   True)
End Sub

//c# 
protected void Page_Load(object sender, EventArgs e) { 
	 string myScript = @"function AlertHello() { alert('Hello ASP.NET'); }";
	 Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "MyScript", myScript,
	   true);
}

<!-- Resultado HTML -->
<form>
	 <script type="text/javascript">
	 <!--
	 function AlertHello() { alert('Hello ASP.NET'); }// -->
	 </script>
	 <!-- [conteúdo] -->
</form>

Listagem 01 - Exemplo de como utilizar o método RegisterClientScriptBlock

No exemplo da Listagem 01 nos especificamos o tipo como (vb) Me.GetType() e this.GetType() (c#), a chave "MyScript", o script para inclusão "function AlertHello(){ [...] }" e um valor "true", que permite colocar o script automaticamente dentro das tags <script>.

Quando temos um pouco de JavaScript que está trabalhando com algum controle em nossa página, e demais casos, devemos utilizar o método RegisterStartupScript em lugar de RegisterClientBlock. Por exemplo, nós usamos o seguinte código para criar uma página que inclui um simples controle <asp:TextBox> que contém um valor "Hello ASP.NET" (Listagem 02).

<asp:TextBox ID="TextBox1" Runat="server">Hello ASP.NET</asp:TextBox>

Listagem 02 - Exemplo de controle TextBox

Utilize o método RegisterClientScriptBlock para embutir um script na página que acessa o valor do controle "TextBox1", ilustrado na Listagem 03.

'vb            
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) 
	 Dim myScript As String = "alert(document.forms[0]['TextBox1'].value);"
	 Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "myKey", myScript, _
	   True) 
End Sub           

//c#
protected void Page_Load(object sender, EventArgs e) { 
	 string myScript = @"alert(document.forms[0]['TextBox1'].value);"; 
	 Page.ClientScript.RegisterClientScriptBlock(this.GetType(), 
	   "MyScript", myScript, true); 
}

Listagem 03 - Exemplo de como acessar o controle "TextBox1" com o método RegisterClientScriptBlock

Ao rodar esta página será gerado um erro de JavaScript (Figura 01).

Figura 01 - Erro gerado pela utilização do método RegisterClientScriptBlock

A razão deste erro é que a função JavaScript dispara antes das tags serem recebidas pelo navegador. Portanto, a função JavaScript não encontra "TextBox1" e causa erro.

Por fim, a diferença do método RegisterStartupScript é que ele insere a função JavaScript após todas as tags serem recebidas pelo navegador.

Embutindo Campos Ocultos

Desenvolvedores frequentemente armazenam pequenas quantidades de informações na página, ocultas de um usuário. Se o conteúdo é dinâmico, semelhante a uma variável, o formulário trabalhará com um armazenamento local. O método RegisterHiddenField() é responsável por esse procedimento. A construção possível com este método é:

Page.ClientScript.RegisterHiddenField(hiddenFieldName, hiddenFieldInitialValue);

Onde:

hiddenFieldName - representa o nome do Hidden, ou melhor, o identificador do controle;
hiddenFieldInitialValue - valor inicial do controle;

Veja na prática:

'vb
Page.ClientScript.RegisterHiddenField("submittime", "")

//c#
Page.ClientScript.RegisterHiddenField("submittime", "");


<input type="hidden" name="submittime" id="submittime" value="" />

Listagem 02 - Exemplo de como utilizar o método RegisterHiddenField

Para manipular este campo utilize "document.forms[0].submittime.value = 'submit';".

Uma das desvantagens é que o controle Hidden permite alteração de conteúdo via navegador, o que pode tornar a aplicação vulnerável.

Embutindo Blocos de Código na Base

O método RegisterStartupScript não é muito diferente do método RegisterClientScriptBlock. A grande diferença é que o RegisterStartupScript coloca o script na base da página - depois que o navegador receber todas as tags e antes da tag </form>. As construções possíveis com este são:

RegisterStartupScript (type, key, script);
RegisterStartupScript (type, key, script, addScriptTags);

Estes parâmetros seguem a mesma especificação do método RegisterClientScriptBlock.

Veja na prática:

'vb            
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) 
	 Dim myScript As String = "function AlertHello() { alert('Hello ASP.NET'); }"
	 Page.ClientScript.RegisterStartupScript(Me.GetType(), "myKey", myScript, _
	   True) 
End Sub           

//c#
protected void Page_Load(object sender, EventArgs e) { 
	 string myScript = @"function AlertHello() { alert('Hello ASP.NET'); }";
	 Page.ClientScript.RegisterStartupScript(this.GetType(), 
	   "MyScript", myScript, true); 
}

<!-- Resultado HTML -->
<form>
	 <!-- [conteúdo] -->
	 <script type="text/javascript">
	 <!--
	 function AlertHello() { alert('Hello ASP.NET'); }// -->
	 </script>
</form>

Listagem 03 - Exemplo de como utilizar o método RegisterStartupScript

Embutindo Referência a um Arquivo ".js"

Muitos desenvolvedores colocam o código JavaScript dentro de um arquivo .js. Considerado uma boa prática, um .js é um arquivo global que permite modificar facilmente o código, persistindo em toda aplicação. Podemos registrar arquivo de script em nossa página através do método RegisterClientScriptInclude. As construções possíveis com este são:

RegisterClientScriptInclude (key, url);
RegisterClientScriptInclude (type, key, url);

Onde:

type - o tipo de cliente script para registrar. Neste caso, o tipo é a própria página;
key - palavra chave que permite traçar as funções programaticamente;
url - caminho do arquivo;

Veja na prática:

'vb            
Dim myScript As String = "myJavaScriptCode.js" 
Page.ClientScript.RegisterClientScriptInclude("myKey", myScript)           

//c#
string myScript = "myJavaScriptCode.js" 
Page.ClientScript.RegisterClientScriptInclude("myKey", myScript);

<!-- Resultado HTML -->
<script src="myJavaScriptCode.js" type="text/javascript"></script>

Listagem 03 - Exemplo de como utilizar o método RegisterClientScriptInclude

Embutindo Atributo Específico em um Controle

O método RegisterExpandoAttribute registra um par de nome/valor como um atributo personalizado de um controle específico.

Confira: ClientScriptManager..::.RegisterExpandoAttribute

Embutindo Recursos

O método RegisterClientScriptResource registra recurso de script de cliente como objeto Page usando o tipo e o nome do recurso.

Confira: ClientScriptManager..::.RegisterClientScriptResource

Adicionando JavaScript a Controles de Servidor

Podemos adicionar efeitos no ASP.NET adicionando JavaScript inline no atributo. Para permitir um evento JavaScript para um objeto HTML, adicione o evento como um atributo do objeto HTML e informe qual a ação que será executada quando o evento for disparado.

Eventos Inline

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="alert('Hello ASP.NET')" />
<asp:Image ID="Image1" runat="server" OnMouseOver="alert('Hello ASP.NET')" />

Eventos Adicionados Dinamicamente

Image1.Attributes.Add("OnMouseOver", "alert('Hello ASP.NET')")
Button1.Attributes.Add("OnClick", "alert('Hello ASP.NET')")

Registrar Identificador dos Controles no Código JavaScript

Dim myScript As String = "<script>document.all." & TextBox1.ClientID & ".focus()</script>"
Page.ClientScript.RegisterStartupScript(Me.GetType(), "myKey", myScript, True)

OU


document.all.<%# Textbox1.ClientID %>.focus();

Referências

Professional ASP.NET 2.0 Published by Wiley Publishing, Inc.;
ASP.NET 2.0 All-in-One Desk Reference For Dummies® Published by Wiley Publishing, Inc.;
ASP.NET Cookbook, 2nd Edition By Michael A. Kittel, Geoffrey T. LeBlond ;
ASP.NET Solutions—23 Case Studies: Best Practices for Developers By Rick Leinecker ;
JavaScript Professional Projects by Paul Hatcher and John Gosney ;
JavaScript™ by Example By Ellie Quigley ;

Estou disponível para qualquer dúvida ou sugestão (kallebe.santos@gmail.com).

Um grande abraço e até a próxima...