ASP .NET - Obtendo valores de controles da página usando JavaScript

Faz muito tempo que eu trabalho com o desenvolvimento para web e neste período de tempo muita coisa mudou, muitas tecnologias surgiram, outras desapareceram ou se tornaram obsoletas , mas o JavaScript permanece impávido como uma rocha em meio a tecnologias modernas. Portanto quer você goste dele ou não , não têm jeito, pelo menos até agora, sem conhecer JavaScript suas aplicações web não poderão usar muitos recursos que tornarão a experiência do usuário mais interativa e agradável.

Conclusão: "Se não pode vencê-lo, junte-se a ele..."

Neste artigo eu vou mostrar como você pode obter valores/textos de controles como  Textbox, RadioButtonList, ListBox and dropdownlist usando JavaScript em páginas ASP .NET.

Vou começar com uma apresentação do JavaScript tirada da wikipédia:( http://pt.wikipedia.org/wiki/JavaScript)

JavaScript é uma linguagem de programação baseada na linguagem de programação ECMAScript padronizada pela Ecma international nas especificações ECMA-262[2] e ISO/IEC 16262 e é atualmente a principal linguagem para programação client-side em navegadores web. Foi concebida para ser uma linguagem script com orientação a objetos baseada em protótipos, tipagem fraca e dinâmica e funções de primeira classe.

O uso de JavaScript em páginas XHTML, pelo padrão W3C, deve ser informado ao navegador da seguinte forma:

script type="text/javascript"

    /* aqui fica o script */
 
</script>

Caso contrário, o navegador irá interpretar o script como sendo código HTML, escrevendo-o na página.

Outra maneira de incluir scripts em páginas web, implementada a partir de Javascript 1.1, é incluir arquivos externos onde se podem colocar muitas funções que se utilizem na página. Os arquivos costumam ter extensão .js e se incluem da seguinte forma:

<SCRIPT language=javascript src="arquivo_externo.js">
   //estou USANDO o arquivo "arquivo_externo.js"
</SCRIPT>

Nos exemplos usados neste artigo vou colocar o código entre as tags <head>.

Para obter os valores/Textos dos controles em uma página ASP .NET vamos usar o evento Click dos controles de servidor e os seguintes recursos:

Para os exemplos usados neste artigo eu estou usando o Visual Web Developer 2010 Express Edition.

Antes de iniciar esteja atento as seguinte definições:

Criando o projeto ASP .NET

Abra o Visual Web Developer 2010 Express e crie um novo projeto (File -> New Project) usando o template ASP .NET Empty Web Application com o nome UsandoJavaScript e clique no botão OK;

Como criamos um projeto vazio vamos agora incluir um Web Form ao projeto.No menu selecione Project -> Add New Item e a seguir escolha o template Web Form informando o nome Default.aspx e clicando no botão Add;

Obtendo o valor selecionado em um TextBox

Vamos agora incluir na página Default.aspx a partir da ToolBox os controles Label, TextBox e Button arrastando e soltando nesta página conforme o leiaute da figura abaixo:

Em seguida ative a guia Source e inclua o código JavaScript entre as tags <head> conforme mostrado abaixo em azul:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="UsandoJavaScript._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Pegando o texto de um TextBox</title>
    <script type ="text/javascript">
        function getTexto() {
            var texto = document.getElementById("TextBox1");
            alert(texto.value);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
         <strong>Macoratti.net</strong> 
         <br />
         <asp:Label ID="Label1" runat="server" Font-Bold="True" Text="Nome:"></asp:Label>
         <asp:TextBox ID="TextBox1" runat="server" Height="16px" Width="96px"></asp:TextBox>
         <asp:Button ID="Button1" runat="server" Font-Bold="True" Text="Enviar" Width="56px" OnClientClick ="return getTexto()"/>
    </div>
    </form>
</body>
</html>

Neste código vemos os controles adicionados na página usando os IDs padrão : Label1, TextBox1 e Button1. (Em produção é recomendável não usar os nomes atribuidos)

No código JavaScript definimos a função getTexto que usa a propriedade getElementById para obter o o texto do controle TextBox1.

Observe que estamos usando o evento OnClientClick do controle Button para chamar a função getTexto().

Executando o projeto e preenchendo o controle TextBox com um texto ao clicar no botão Enviar iremos obter:

Obtendo o valor selecionado em um Dropdownlist/ListBox

Vamos agora obter o valor selecionado em um controle DropDownList, um controle muito usado para apresentar opções ao usuário.

A partir da ToolBox inclua um controle DropDownList e um controle Button na página Default.aspx conforme o leiaute abaixo:

O código exibido na página referente aos controles incluídos pode ser visto abaixo:

    <div>
      <asp:Button ID="Button2" runat="server" Text="Enviar" OnClientClick ="return ddlSelecao()" ForeColor="#FF0066" Width="72px"/>
      <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" Height="16px" Width="151px">        
            <asp:ListItem Value="1">Santos</asp:ListItem>
            <asp:ListItem Value="2">Palmeiras</asp:ListItem>
            <asp:ListItem Value="3">São Paulo</asp:ListItem>
      </asp:DropDownList>
    </div>

Note que temos o evento OnClientClick chamando a função ddlSelecao() que é uma função JavaScript que iremos definir.

Vamos incluir esta função no código JavaScript da página entre as tags <head> junto com o código que usamos anteriormente conforme o código destacado em azul:

   <script type ="text/javascript">

        function getTexto() {
            var texto = document.getElementById("TextBox1");
            alert(texto.value);
        }

      
        function ddlSelecao()
        {
            alert("Valor selecionado : " + document.getElementById("DropDownList1").value);
        }

    </script>

Nota: Para obter o valor de um controle CheckBox basta definir a função JavaScript

function GetCheckBoxValor(id)
{
      alert(document.getElementById(id).checked);
}

Executando o projeto e selecionando um item da DropDownList e clicando no botão Enviar teremos:

Obtendo o valor selecionado em um RadioButtonList

Vamos agora incluir um controle RadioButtonList e um novo controle Button na página Default.aspx  conforme o leiaute a seguir:

O código referente aos novos controles é o seguinte:

    <!--RadioButtonList -->
    <div>
       <asp:RadioButtonList ID="radiobuttonlist1" runat="Server" RepeatLayout="flow" RepeatDirection="horizontal">
         <asp:ListItem Text="Santos" Value="1" Selected="True"></asp:ListItem>
         <asp:ListItem Text="Palmeiras" Value="2"></asp:ListItem>
         <asp:ListItem Text="America" Value="3"></asp:ListItem>
         </asp:RadioButtonList>
         <input type="button" value="Submeter" onclick="GetRadioButtonValor('<%= radiobuttonlist1.ClientID %>')" />
    </div>

No evento onclick do botão estamos chamando a função JavaScript GetRatioButtonValor() passando o id do controle.

Para obter o valor vamos definir o seguinte código JavaScript:

function GetRadioButtonValor(id) {
    var radio = document.getElementsByName(id);
    for (var j = 0; j < radio.length; j++) 
     {
          if (radio[j].checked)
             alert("Valor Selecionado : " + radio[j].value);
     }
}

Executando o projeto e selecionando um item do controle RadioButtonList ao clicar em Submeter teremos:

Podemos ainda definir uma função JavaScript para obter mais de um valor informado. No exemplo a seguir vamos definir 3 controles TextBox e um Button na página Default.aspx conforme o leiaute a seguir:

O código da página referente aos controles acima é o seguinte:

  <!--Obtendo valores de múltiplos TextBox -->
    <div>
      Texto1: <input id="Text1" name="textfield" type="text" value="Macoratti.net " /><br />
      Texto2: <input id="Text2" name="textfield" type="text" value="Quase tudo para " /><br />
      Texto3: <input id="Text3" name="textfield" type="text" value="Visual Basic" /><br />
      <input id="Button3" type="button" value="Submeter" onclick="getValores('textfield')" />
    </div>

No evento onclick do botão de comando temos a função JavaScript : getValores() passando o nome dos controles TextBox.

O código JavaScript usado para realizar tal tarefa utiliza a propriedade getElementsByName e é dado a seguir:

function getValores(objName) 
{
            var arr = new Array();
            arr = document.getElementsByName(objName);

            alert("total de objetos com o nome \"textfield\" = \n" + arr.length);

            for (var i = 0; i < arr.length; i++) {
                var obj = document.getElementsByName(objName).item(i);
                alert(obj.id + " = " + obj.value);
            }
}

Executando o projeto iremos obter:

Naturalmente se você precisa usar mesmo JavaScript em suas páginas considere utilizar o JQuery que além de facilitar o trabalho é bem simples de usar.

Simples , simples assim...

Pegue o projeto completo aqui: UsandoJavaScript.zip

Eu sei é apenas ASP .NET e JavaScript, mas eu gosto...

Referências:

José Carlos Macoratti