Skip Navigation Links



Translate this page now :



»Programação
»Programação.NET
»Banco de Dados
»Webdesign
»Office
» Certificações Microsoft 4
»Treinamentos4
»Programação 4
»Webdesign«
»Office & User Tips«
»Grupos de UsuĆ”rios
»CĆ©lulas AcadĆŖmicas«
intcontpiada : 118
Os 3 Porquinhos
Você já está cadastrado e participa do grupo de usuários de sua cidade ? Se não, comente o porque.
 
 
FaƧa um pequeno teste com 10 questƵes de VB
.:.
Teste seus conhecimentos em Visual Basic, SQL Server e ASP 3.0 com nossas provas on-line
.:.
Aprimore seus conhecimentos em programaĆ§Ć£o com nosso treinamento on-line de lĆ³gica de programaĆ§Ć£o
.:.
Veja nosso calendƔrio de treinamentos
Gostou da PƔgina?
Então

para um amigo!

Pesquisa personalizada
Pesquisar Dicas:

 






Utilizando javascript com .NET

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é 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 :

<asp:Image id="Image1" runat="server"
ImageUrl="SNAG-0002.jpg" onmouseover="javascript:window.status='testando 1,2,3'" onmouseout="javascript:window.status=''"></asp:Image>

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ógica 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.

<script language=javascript>
<!--
function Confirmar()
{
return(window.confirm("Tem certeza ?"))

}
//-->
</script>

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 (</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", "<script>alert('Operação concluida !')</script>")

 

Definindo o foco para uma caixa :

Me.RegisterStartupScript("z", "<script>document.all.TextBox1.focus()</script>")


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", "<script>document.all." & TextBox1.ClientID & ".focus()</script>")

 

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 :

<script language="javascript">
<!--
function DefinirFoco()
{
document.all.<%# Textbox1.clientid %>.focus()

}
//-->
</script>

 

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.

<script language="javascript">
<!--

function abrirjanela()
{
var ret;
ret=window.showModalDialog("webform2.aspx","","");
document.all.TextBox1.value=ret;
}

//-->
</script>

 

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", "<script>abrirjanela()</script>")

 

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

<script language="javascript">
<!--
function terminou()
{
window.returnValue=document.all.TextBox1.value;
window.close();
}
//-->
</script>

 

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", "<script>terminou()</script>")

 

Detalhes adicionais

  • Funções javaScript podem ser inseridas em arquivos .JS e estes vinculados a página através da própria tag <script>
  • O trabalho entre frames também precisa ser feito em javascript
  • Deve-se ter cuidado com o autoPostback, que insere código javascript em alguns eventos do objeto. Se ao mesmo tempo você tentar inserir seu próprio código javascript para o mesmo evento, gerará erro
  • O evento onSubmit do form é um evento especial, pois todos os webControls podem manipula-lo. Por isso você não deve tentar lidar diretamente com esse evento. Para isso existe um método chamado RegisterOnSubmitStatement que irá controlar o uso do evento OnSubmit por todos os webControls

 

Dennes Torres
MCAD,MCSD,MCSE,MCDBA

 

 





Envie seus comentįrios sobre este artigo

Nome :

E-mail :

Comentários :


Avise-me quando houverem novos comentįrios nesta pįgina

Veja abaixo os comentários já enviados :

Nome : Maurício Hespanholeti E-Mail : hespanholeti@gmail.com
Bom dia,

Estou começando agora a trabalhar com ASP e estou tendo algumas dificuldades com fazer a validação dos campos.
Por exemplo:
Não posso deixar o usuário sair do campo "Textbox" sem que ele não tenha preenhido nada, como posso fazer esta validação?
Nome : Carlos Eduardo E-Mail : fladurj@ig.com.br
Já trabalho com ASP e agora estou migrando para o ASP.NET. A explanação dada sobre a integração Javascript e Asp.Net, foi bastante enriquecedora.
Nome : Dalmiro E-Mail : dalmiro@ig.com.br
Ola Denis,

Primeira dúvia, o showModalDialog so funciona do ei correto ? como ter o mesmo resultado (modal) para outros browser ?

Segunda dúvida:

Como retorno da pagina um valor booleano onde se for verdadeiro eu executo o que esta no click do botão.
Vou exemplificar
no load da pagina 1 esta assim:
btnMaisP.Attributes("onclick") = "javascript:return abrirjanela()"
no html da pagina coloquei o js assim:
Nome : Fernando E-Mail : fernadomichelutti@yahoo.com
Olá Dennes, como vai?
Parabéns pelo seu artigo! Realemnte excelente!
Porém tenho uma dúvida... Quando vc usa:
Me.RegisterClientScriptBlock("x", "
Nome : Rafael E-Mail : rf.augusto@gmail.com
Amigos,

No poup up, ao clicar no botão de (fechar), apenas muda o tamanho do poup up e so fecha no segundo clique (deveria ser no primeiro).

Alguem pode me ajudar?

Obrigado

rf.augusto@gmail.com
11 8207-1861
Nome : Felipe E-Mail : fe_piccirillo@hotmail.com
Olá, estou querendo colocar um focus no meu text...

por exemplo: <input type="text" name="text1">, como é que eu faço pra colocar o focus no meu text1 quando a pagina carregar???

Eu quero que o usuario entre e o focus já esteja no "text1"

Obrigado!
Nome : Felipe E-Mail : fe_piccirillo@hotmail.com
Olá, estou querendo colocar um focus no meu text...

por exemplo: <input type="text" name="text1">, como é que eu faço pra colocar o focus no meu text1 quando a pagina carregar???

Eu quero que o usuario entre e o focus já esteja no "text1"

Obrigado!
Nome : Felipe E-Mail : fe_piccirillo@hotmail.com
Olá, estou querendo colocar um focus no meu text...

por exemplo: <input type="text" name="text1">, como é que eu faço pra colocar o focus no meu text1 quando a pagina carregar???

Eu quero que o usuario entre e o focus já esteja no "text1"

Obrigado!
Nome : Marcel Renan Ardaia Pereira E-Mail : marcel.ardaia@gmail.com
Esta de parabens Dennes, procurei por vários artigos na net sobre Java Script e este foi com certeza um dos melhores!!!

Atenciosamente,

Marcel Renan Ardaia Pereira
Nome : Eliel E-Mail : eliel@snetwork.com.br
Amigo gosto mto de seus artigos e acopanho seu serviço. Mas preciso da sua ajuda por favor.
Gostaria de saber:
É possivel chamar um função do codebehind via JS ? E Como ?
Nome : Flávio Freitas E-Mail : flaviodfp@hotmail.com
Olá, você está de parabens !. Não é fácil sair de win32 e desenvolver em ASP.NET, esta página caiu do céu. São muitas dúvidas, as quais quase não encontramos respostas.
Eu tenho uma dúvida: Seria possível pegar o número do HD da máquina do cliente. Como escrever uma função em Java Script para executar esta tarefa?

Ats,

Flávio Freitas.
Nome : CLÁUDIA E-Mail : claudiangomes@terra.com.br
querido por favor me ajude eu baixei um negócio do baixaki e está pedindo pra eu clicar no botão focus e eu ñ sei o que é, o nome do programa é ubrowser, e eu queria muito conseguir mecher nele por favor me ensina aonde fica esse tal de botão focus.

obrigada bjinhos e xau xau!!!!!
Nome : Alexandre Rodrigues E-Mail : easy_rs@terra.com.br
Estou tentando executar a função ´ChatLogoff´ com código ASP abaixo..
<%
Function ChatLogoff()
If Session("LogChat") = True then
Dim Chat_Log_Off
Set Chat_Log_Off =ObjConexao.Execute("Update chat_log set NumLogin = 1 where NumOrder = " & Session("IdChat"))
Set Chat_Log_Off = Nothing
End If
End Function
%>

... de dentro de uma outra função feita em JavaScript...
Nome : Wellington Mesquita Farias Gomes E-Mail : wmfgomes@gmail.com
Dennes Torres,

Muito bom seu artigo.

Parabens.
Nome : edsonbassani E-Mail : edsonbassani@gmail.com
Fernando, em seu caso especificamente, você poderá colocar assim:

Me.RegisterClientScriptBlock(typeof(Page), "meuScript", "
Nome : André Vieira E-Mail : andre.vieira@icraft.com.br
Olá,

Estou com um problema que talvez possa me ajudar, que o seguinte:
Tenho uma rotina em que envio para o meu servidor um arquivo, o qual gravo o nome deste no meu banco, mas se por acaso atualizo a página com o F5 (IE) o registro é salvo novamente. Então gostaria de saber como poderia evitar um postback e assim evitar a duplicidade.

Obrigado
Nome : wilson E-Mail : wilson@aceng.com.br
Olá Dennis. Você mencionou que podemos enviar um alert de confirmação a partide de um objeto aspnet. Beleza e funciona legal, mas fiquei com uma dúvida apenas: para o comando: Button1.attributes.add("onclick","return confirm('Tem certeza ?')") como faço para, no ambiente aspnet pegar os eventos true ou false do retorno? Pergunto pegá-los dentro do código asp.net (.cs). Obrigado.
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br
Oi, Wilson !

Não faz. Neste exemplo o true vai fazer com que o botão provoque um postback, o false não resulta em nada. Se precisa de algo mais detalhado, talvez o ideal seja chamar uma função javascript no evento onclick

[]'s

Nome : E-Mail :
Nome : Afonso E-Mail : hs@hs02.com.br
Por favor responda a seguinte questão:
quando uso JS do tipo => javascript: return confirm("Quer Gravar ?")
A utilização deste JS inibe objetos do tipo RequerideFieldValidator que estão na página APSX, como faço para usar o JS e também fazer a validação dos campos usando objetos do tipo RequerideFieldValidator, RangerValidatos
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br
Oi

Ao invés de inserir esse javascript via attributes.add, utilize a propriedade onclientclick do botão para inserir esse javascript

[]'s

Nome : deni E-Mail : denyelmormen@hotmail.com
como psso fazer para ter acesso ao windws live?
Nome : elias E-Mail : elias2@hotmail.com.br
Nome : E-Mail :
Nome : E-Mail :
Nome : E-Mail :
Nome : marllon E-Mail : 87marllon@gmail.com
como faço para ao invés de abrir uma outra janela, abrir essa outra página na página que fez a requisição em uma div?

desde já obrigado
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br

Location.href em javascript altera a url da p?gina atual

Abs,

Dennes
Nome : -1' E-Mail : 1
1
Nome : 1 E-Mail : -1'
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
-1'
Nome : -1' E-Mail : 1
1
Nome : 1 E-Mail : -1'
1
Nome : -1' E-Mail : 1
1
Nome : 1 E-Mail : -1'
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : -1' E-Mail : 1
1
Nome : 1 E-Mail : -1'
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : hDSi9rUK9Cn E-Mail : j6ezd9jk@yahoo.com
I was very pleased to find this wetsbi-e.I wanted to thanks for your time for this wonderful read!! I definitely enjoying every little bit of it and I have you bookmarked to check out new stuff you blog post.
Nome : adidas ultra boost 3.0 E-Mail : qxirrfqhle@gmail.com
Thank you a lot for giving everyone an extraordinarily breathtaking possiblity to read from here. It's usually very terrific plus packed with a good time for me personally and my office fellow workers to search your blog the equivalent of thrice every week to find out the newest guides you have got. Of course, we're usually fascinated with all the perfect guidelines you serve. Selected 1 facts in this article are in fact the most effective we've had.
adidas ultra boost 3.0 https://42.herber.pl/ultrausc
Nome : coach factory outlet E-Mail : moveojrk@gmail.com
I definitely wanted to post a small word to be able to thank you for some of the awesome solutions you are placing at this website. My prolonged internet lookup has at the end of the day been honored with reliable points to exchange with my two friends. I 'd assume that we readers actually are unquestionably fortunate to be in a fantastic community with very many wonderful people with very helpful strategies. I feel extremely fortunate to have used your entire site and look forward to plenty of more awesome times reading here. Thanks once more for a lot of things.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Conheça mais sobre o nosso site :

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::



Quer saber mais?
Faça um curso na Búfalo Informática, Treinamento e Consultoria e
Prepare-se para o Mercado!
Veja o que a Búfalo tem para você.

ļæ½ BĆŗfalo InformĆ”tica, Treinamento e Consultoria - Rua Ɓlvaro Alvim, 37 Sala 920 - CinelĆ¢ndia - Rio de Janeiro / RJ
Tel.: (21)2262-1368 (21) 9240-5134 (21) 9240-7281 e-Mail:
contato@bufaloinfo.com.br