Hoje gostaria de falar e mostrar como pegar o nome do componente dentro de funções escritas em JavaScript. Principalmente quando você começa a utilizar painéis, TabContainer e outros objetos que no código fonte HTML não aparecem todos.

O que será falado aqui não é uma coisa complicada, muito pelo contrário. Percebi que alguns desenvolvedores possuem problemas para pegar o nome dos objetos em tela ou em tempo de execução dentro de funções JavaScript. Dessa forma, resolvi fazer um artigo para ajudar.

Se você não sabe, o nome de um label colocado na página web não é o mesmo nome quando vira HTML, principalmente quando está dentro de um objeto do próprio .NET como TabContainer, Panel e outros.

O objetivo aqui é pegar o valor ou o evento de um campo dentro do componente TabContainer do Visual Studio 2010.

<ajaxToolkit:TabContainer ID="tabControle" runat="server" AutoPostBack="true" onactivetabchanged="tabControle_ActiveTabChanged">

    <!--- primeira aba -->

    <ajaxToolkit:TabPanel ID="tabExemplo" runat="server">

        <ContentTemplate>...

Code 1

Note que existe o TabPanel dentro do TabContainer. Dentro do ContentTemplate pode ser colocado tabelas e até outros componentes do próprio Visual Studio 2010.

<ajaxToolkit:TabContainer ID="tabControle" runat="server" AutoPostBack="true" onactivetabchanged="tabControle_ActiveTabChanged">

    <!--- primeira aba -->

    <ajaxToolkit:TabPanel ID="tabExemplo" runat="server">

        <ContentTemplate>

<asp:TextBox ID="txtNomeQualquer" ToolTip="Digite o nome qualquer" MaxLength="10" runat="server" Width="99px"></asp:TextBox>

Code 2

No Code 2, coloquei como exemplo um TextBox chamado txtNomeQualquer. Dentro da página HTML, esse componente textBox aparece com o nome muito estranho, isto é, utilizando $ e underline.

O meu problema é, quando alguém clicar ENTER no botão eu preciso pegar o valor e saber qual o evento clicado. Pra isso, tive que usar a propriedade onkeyPress pegando o evento do clique do usuário, passando alguns outros parâmetros.

Utilizei o Attributes.Add dentro do código C#.NET. (Code 3)

txtNomeQualquer.Attributes.Add("onkeyPress", "f_bEnter(event.keyCode,'txtNomeQualquer');");

Code 3

Pra ficar mais dificultoso, além de pegar o valor e nome, preciso passar o foco do campo automaticamente para o próximo campo da tela. Quando chegar o foco no botão, preciso que o clique seja acionado também. 

Note que chamo uma função em JavaScript f_bEnter passando o código do evento e o próximo campo da tela. Segue a função JavaScript, Code 4.

function f_bEnter(vTecla, sProximo) {

   if (vTecla == 13) {

      if(sProximo=="txtNomeQualquer")

           document.getElementById("<%=txtCampo2.ClientID %>").focus();

}

Code 4

Essa minha função em JavaScript está na parte HTML da página. A primeira verificação é se o evento clicado é igual a 13, ou seja, se é igual a ENTER. O evento ENTER equivale ao número 13.

O próximo passo foi verificar se o valor do próximo parâmetro é igual ao campo enviado. Se for igual, utilizei o comando document.getElementById para pegar o nome do campo aproveitando os dados do .NET. Note que usei as tags “<%” com o nome do objeto .NET ponto ClienteID. Após isso, coloquei o ponto focus() para que o foco do mouse pule para o outro campo.

Para o botão, basta colocar o ponto click(). (Code 5)

document.getElementById("<%=cmdEnviar.ClientID %>").click();

Code 5

Verifico primeiro se o botão tem o nome de cmdEnviar, uso o ClientID e depois o ponto click() para chamar o evento em C#.NET. É bem simples o conceito, o problema foi fazere a comunicação entre os objetos de tela escondidos com funções em JavaScript chamando os eventos.

Dessa forma que mostrei acima, funciona para os componentes escondidos ou abertos. Você pode dar um alerta na página com o nome do objeto utilizando o comando. (Code 6).

Alert(document.getElementById("<%=txtNomeQualquer.ClientID %>").focus());

Code 6

E daí em diante o valor pode ser pego, os campos e o evento feito pelo usuário. Bom, espero ter ajudado e qualquer dúvida pode entrar em contato.