dê seu feedback
post favorito
Exemplos Práticos com Javascript em Aplicações ASP.NET
Veja neste artigo alguns exemplos práticos simples, utilizando Javascript em Aplicações ASP.NET.
Inicialmente veremos como limitar um campo texto para receber apenas caracteres numéricos.
Para isso, em sua ASPX, dentro da tag head crie uma função que irá fazer essa limitação, como ilustra a Listagem 01.
Listagem 01 – Função para permitir somente números
No TextBox chame a função pelo evento onkeypress, como ilustra a Listagem 02.
Listagem 02 – Chamada a função no TextBox
O evento onkeypress é “chamado” a cada novo caracter inserido pelo usuário no TextBox. Faça os testes e tente incluir letras.
A próxima função é muito útil, com ela conseguimos recuperar o valor de um TextBox e atribuirmos outro valor qualquer a ele.
A Listagem 03 exibe esta função.
Listagem 03 – Recuperando o ID do controle
Agora input para chamar esta função (se você precisar usar um controle ASP.NET como o asp:Button, não fará sentido utilizar a função Javascript, concorda?), como ilustra a Listagem 04.
Listagem 04 – Chamada a função da Listagem 03
Faça o teste agora inserindo um valor no TextBox e clicando no botão criado. A Figura 01 exibe o resultado.
Figura 01 – Valor recuperado do TextBox
Finalizando crie um TextBox e insira um valor padrão a sua propriedade Text. A ideia é que, ao clicar no TextBox, o texto suma e, ao clicar fora dele, o texto retorne.
Esse é um exemplo muito comum em sites de compras com campos de busca, por exemplo.
A Listagem 05 ilustra a função que montará essa lógica, e a Listagem 06 mostra o controle ASP.NET com a chamada a função.
Listagem 05 – Função para exibir/limpar valores do TextBox
Listagem 06 – Chamada a função no TextBox
Note que no controle é usado os eventos onfocus e onblur, que são acionados quando se clica no controle e quando clica fora dele, respectivamente.
Faça os testes clicando no TextBox e fora dele.
Com estas pequenas dicas conseguimos explorar um pouco do poder do Javascript e aprender basicamente como é simples de integrarmos seu uso com aplicações ASP.NET.
Assim finalizo o artigo. Muito obrigado a todos!
Um abraço, e até o próximo artigo.
Wellington Balbo de Camargo
wellingtonbalbo@gmail.com
Para isso, em sua ASPX, dentro da tag head crie uma função que irá fazer essa limitação, como ilustra a Listagem 01.
Listagem 01 – Função para permitir somente números
<script type="text/javascript">
function PermiteSomenteNumeros(event) {
var charCode = (event.which) ? event.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
< /script>
Listagem 02 – Chamada a função no TextBox
<asp:TextBox ID="txtProduto" runat="server" onkeypress="return PermiteSomenteNumeros(event);" />
A próxima função é muito útil, com ela conseguimos recuperar o valor de um TextBox e atribuirmos outro valor qualquer a ele.
A Listagem 03 exibe esta função.
Listagem 03 – Recuperando o ID do controle
<script type="text/javascript">
function RecuperandoValorControle() {
var controle = document.getElementById(" < %=txtProduto.ClientID% > ")
alert(controle.value);
}
< /script>
Listagem 04 – Chamada a função da Listagem 03
<input type="button" onclick="RecuperandoValorControle()" value="Recuperar Valor" />
Figura 01 – Valor recuperado do TextBox
Finalizando crie um TextBox e insira um valor padrão a sua propriedade Text. A ideia é que, ao clicar no TextBox, o texto suma e, ao clicar fora dele, o texto retorne.
Esse é um exemplo muito comum em sites de compras com campos de busca, por exemplo.
A Listagem 05 ilustra a função que montará essa lógica, e a Listagem 06 mostra o controle ASP.NET com a chamada a função.
Listagem 05 – Função para exibir/limpar valores do TextBox
<script type="text/javascript">
function ExibindoOcultandoValor(valor) {
var controle = document.getElementById(" < %=txtValor.ClientID% > ")
if (valor == '1') {
controle.value = '';
}
else {
controle.value = 'Valor Padrão';
}
}
</script>
<asp:TextBox ID="txtValor" runat="server" Text="Valor Padrão"
onblur="ExibindoOcultandoValor('0')" onfocus="ExibindoOcultandoValor('1')" />
Faça os testes clicando no TextBox e fora dele.
Com estas pequenas dicas conseguimos explorar um pouco do poder do Javascript e aprender basicamente como é simples de integrarmos seu uso com aplicações ASP.NET.
Assim finalizo o artigo. Muito obrigado a todos!
Um abraço, e até o próximo artigo.
Wellington Balbo de Camargo
wellingtonbalbo@gmail.com
5 COMENTÁRIOS
Joao Arthur Juaçaba Moreira.
em 13/2/2012 16:22 - Responder
não consegui fazer validar a função somenteNumeros
'attribute onkeypress is not valid of element textbox'
o que seria ?
'attribute onkeypress is not valid of element textbox'
o que seria ?
em 13/2/2012 16:22 - Responder
[Comentário do autor]
Wellington Balbo De Camargo
em 13/2/2012 16:34 - Responder
Wellington Balbo De Camargo
Você está usando um controle ASP.NET ?
Se está, está utilizando o atributo runat="server" para indicar que o controle rodará no servidor?
Veja se é isso.
Abraços.
Se está, está utilizando o atributo runat="server" para indicar que o controle rodará no servidor?
Veja se é isso.
Abraços.
em 13/2/2012 16:34 - Responder
Joao Arthur Juaçaba Moreira.
ta assim:
ToolTip="digite o controle do aluno">
em 13/2/2012 17:29 - Responder
Joao Arthur Juaçaba Moreira.
asp:TextBox ID="edtControle" runat="server" ToolTip="digite o controle do aluno">
em 13/2/2012 17:30 - Responder
[Comentário do autor]
Wellington Balbo De Camargo
em 14/2/2012 22:12 - Responder
Wellington Balbo De Camargo
Cara, faz assim, no evento Page_Load da sua página de códigos (aperte F7 para ir a ela) adicione o seguinte código:
txtProduto.Attributes.Add("onkeypress", "return PermiteSomenteNumeros(event);");
É pra funcionar.
Abraços.
txtProduto.Attributes.Add("onkeypress", "return PermiteSomenteNumeros(event);");
É pra funcionar.
Abraços.
em 14/2/2012 22:12 - Responder
[Este post ainda não foi associado a uma sequência]
Você está em:
canal .net
Publicidade
Wellington Balbo De Camargo
Space do autor
Tecnólogo em Análise de Sistemas, atua na área de Desenvolvimento .NET com aplicações Web a 2 anos, onde trabalha atualmente com a linguagem C# usando a tecnologia ASP.NET, no desenvolvimento em camadas usando o banco de dados SQL Server.
Procura estudar cada vez mais para melhorar os conheciment...
Space do autor
0
0
