Artigos .NET 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", "");

<!-- Resultado HTML 
-->
<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...