Busca online em todo site:
Heroes

Você não está logado, deseja logar na comunidade? clique aqui.




Título do Artigo

Trabalhando com o componente TabContainer


Data Publicação: 16/10/2009 10:24:05
Total de visualizações: 957

comente
 


         Olá pessoal, gostaria de mostrar, passo a passo como trabalhar com o componente TabContainer, pegar qual aba está selecionada e qual o nome dessa determinada aba.

         Esse componente é do ASP.NET Ajax Control Toolkit localizado no endereço (http://www.asp.net/ajax/ajaxcontroltoolkit/samples/). Existem vídeos explicando como trabalhar com alguns componentes, porém tudo em inglês. Veja também o site (www.asp.net).

 

Requisitos:

Tecnologia: ASP.NET

Ferramenta: Visual Studio .NET 2008

Componentes: Ajax

Linguagens declarativas: Tags HTML e JavaScript

 

Primeiro Passo

         Instalar os componentes baixados nos sites acima gratuitamente. Na imagem (1.1), mostro que além de instalar na máquina os “plugins” feitos pela Microsoft, coloquei no meu toolbox. Basta clicar com o botão direito em cima do toolbox e escolher a opção Choose Items... .


Imagem 1.1

 

         Na opção Choose Item... procurei a DLL chamada AjaxControlToolkit.dll e anexei, automaticamente apareceram todos os componentes na tela. (Referência 1.2)

 

Imagem 1.2

 

         Depois disso foi só alegria e felicidades para usar os componentes. Arrastei o TabContainer para a minha humilde tela. Adicionei o AutoPostBack = true, dei um nome de tabControle e comecei a olhar as propriedades.

         Percebi que, existia o OnClienteActiveTabChanged; isto é; na mudança de aba, eu posso saber qual o id atual e o nome da aba.

         Antes de entrar nessa etapa, vou criar algumas abas. (Referência Code 1.1)

 

 

<cc1:TabContainer ID="tabControle" runat="server"                        AutoPostBack="true">

                        <cc1:TabPanel ID="tabIndexacao" runat="server" HeaderText="Indexação">

                            <ContentTemplate>

                                <table style="width:100%;" cellpadding="0" cellspacing="0" border="0">

                                    <tr valign="top">

                                        <td>

                                            Prontuário: <asp:TextBox Width="200px" ID="txtIndexacaoProntuario" runat="server"></asp:TextBox>

                                        </td>

                                        <td>

                                            Qtde Documentos: 10

                                            <br /><br />

                                        </td>

                                    </tr>

                                    <tr valign="top">

                                        <td>

                                            Documentos: <br />

                                            <asp:ListBox ID="lstIndexacaoDocumentos" runat="server" Height="100" Width="362px"></asp:ListBox>

                                        </td>

                                        <td>

                                            Descrição da ocorrência: <br />

                                            <asp:ListBox ID="lstIndexacaoDescricaoOcorrencia" runat="server" Height="100" Width="362"></asp:ListBox>

                                        </td>

                                    </tr>

                                    <tr>

                                        <td colspan="2">Frente (Ctrl+F)&nbsp; Verso (Ctrl+V)</td>

                                    </tr>

                                    <tr>

                                        <td colspan="2">

                                            Imagem

                                        </td>

                                    </tr>

                                </table>

                               

                               

                            </ContentTemplate>

                        </cc1:TabPanel>

                       

                        <cc1:TabPanel ID="tabControleQualidade" runat="server" HeaderText="Controle de Qualidade">

                            <ContentTemplate>

                                teste qualidade

                            </ContentTemplate>

                        </cc1:TabPanel>

                       

                        <cc1:TabPanel ID="tabDuplicados" runat="server" HeaderText="Duplicados">

                            <ContentTemplate>

                                teste duplicados

                            </ContentTemplate>

                        </cc1:TabPanel>

                       

                        <cc1:TabPanel ID="tabRedigitalizacao" runat="server" HeaderText="CPS Redigitalização">

                            <ContentTemplate>

                                teste de redigitalizacao

                            </ContentTemplate>

                        </cc1:TabPanel>

 

                    </cc1:TabContainer>

Code 1.1

        

         Note que, o que delimita uma aba é um TabPanel com um <Content>. Em cada Content eu posso colocar as tags que quiser, por exemplo: <asp:TextBox...>, <asp:ListBox...> e outros. Referência Code 1.2

 

 

                   <cc1:TabPanel ID="tabRedigitalizacao" runat="server" HeaderText="CPS Redigitalização">

                            <ContentTemplate>

                                teste de redigitalizacao

                            </ContentTemplate>

                        </cc1:TabPanel>

 

Code 1.2

 

Pegando o nome e o id da aba em tempo real

         Para pegar os dados em tempo real, coloquei no componente principal e não na TabPanel chamado OnClientActiveTabChanged="getTab". Esse nome getTab é apenas um método em JavaScript. (Referência Code 1.3)

 

 

<cc1:TabContainer ID="tabControle" runat="server"

                        AutoPostBack="true" OnClientActiveTabChanged="getTab">

                        <cc1:TabPanel ID="tabIndexacao" runat="server" HeaderText="Indexação">

                            <ContentTemplate>

                                <table style="width:100%;" cellpadding="0" cellspacing="0" border="0">

                                    <tr valign="top">

                                        <td>

                                            Prontuário: <asp:TextBox Width="200px" ID="txtIndexacaoProntuario" runat="server"></asp:TextBox>

                                        </td>

                                        <td>

                                            Qtde Documentos: 10

                                            <br /><br />

                                        </td>

                                    </tr>

                                    <tr valign="top">

                                        <td>

                                            Documentos: <br />

                                            <asp:ListBox ID="lstIndexacaoDocumentos" runat="server" Height="100" Width="362px"></asp:ListBox>

                                        </td>

                                        <td>

                                            Descrição da ocorrência: <br />

                                            <asp:ListBox ID="lstIndexacaoDescricaoOcorrencia" runat="server" Height="100" Width="362"></asp:ListBox>

                                        </td>

                                    </tr>

                                    <tr>

                                        <td colspan="2">Frente (Ctrl+F)&nbsp; Verso (Ctrl+V)</td>

                                    </tr>

                                    <tr>

                                        <td colspan="2">

                                            Imagem

                                        </td>

                                    </tr>

                                </table>

                               

                                

                            </ContentTemplate>

                        </cc1:TabPanel>

                       

                        <cc1:TabPanel ID="tabControleQualidade" runat="server" HeaderText="Controle de Qualidade">

                            <ContentTemplate>

                                teste qualidade

                            </ContentTemplate>

                        </cc1:TabPanel>

                       

                        <cc1:TabPanel ID="tabDuplicados" runat="server" HeaderText="Duplicados">

                            <ContentTemplate>

                                teste duplicados

                            </ContentTemplate>

                        </cc1:TabPanel>

                       

                        <cc1:TabPanel ID="tabRedigitalizacao" runat="server" HeaderText="CPS Redigitalização">

                            <ContentTemplate>

                                teste de redigitalizacao

                            </ContentTemplate>

                        </cc1:TabPanel>

                    </cc1:TabContainer>

 

Code 1.3

        

         É bom, você leitor, olhar o código com mais detalhes para entender de acordo com sua necessidade. O próximo passo, gerei um método javascript chamado getTab recebendo dois parâmetros de entrar como se fosse uma função em c#.net. Por exemplo: getTab(sender, args). (Referência Code 1.4)

 

 

<script type="text/javascript">

    var indexTab = 0;

    var nomeTab;

    function getTab(sender, args) {

        // do what ever i want with lastTab value

        indexTab = sender.get_activeTabIndex();

        //var teste = sender.get_activeTabIndex().get_HeaderText();

        nomeTab = sender.get_activeTab().get_headerText();

        alert(indexTab + " - " + nomeTab);

    }

</script>

 

 

Code 1.4

 

         Declarei duas variáveis: indexTab e nomeTab. Para pegar o nome do índex escrevi esse código (sender.get_activeTabIndex();) para pegar o nome do tab (sender.get_activeTab().get_headerText();) e no final gerei um alert com os nomes das variáveis. Veja o resultado em tela.

 

Resultado em tela

 

Referência: Imagem 1.3

 

Referência: Imagem 1.4


         Fico por aqui, espero ter ajudado e qualquer dúvida pode entrar em contato via o sistema do site.


 



Total de visualizações: 957
voltar   comente  subir

Autor:


Por:Mauricio Junior
Maurício Júnior
Formado pela Faculdade Anhanguera, Especialista pela FGV (Fundação Getúlio Vargas), Pós-Graduação em Docência Superior e cursando Mestrado na UNB Engenharia Elétrica; .
Tenho 27 anos e possuo sete livros publicados pela editora Ciência Moderna no ano de 2009. Sou Certificado Microsoft MCP, MCAD e MVP, faço parte da comunidade ASPNETI.COM, onde publico artigos, vídeos, ebooks e livros Publico artigos, vídeos e podcast em outras comunidades. Trabalho como Analista de Sistemas / Desenvolvedor na empresa ATP S/A. Blog:  blog.mauriciojunior.orgSite pessoal  www.mauriciojunior.org


Comentários:


Comente (dê sua opinião): VOCÊ PRECISA ESTAR LOGADO

Comentário:
Código Imagem:  (digite o código da imagem respeitando maiúsculo e minúsculo)

Favor digitar o código da imagem para cadastramento.

 

Outros Artigos do Autor

Desenvolvendo para iPhone com ASP.NET
Escrever log de erro e warning
Vídeo - Mostrando um sistema com pocket pc
Desenvolvimento de Aplicativos para TV Digital - Parte 4
Sistema Calcula IMC e IGC no Celular
Google Sync Mobile
Usando o Translator da Microsoft
Criando Números Aleatoriamente
Lançamento do e-Book Dicas DotNet
Sistema ASP 3.0 utilizando 3 camadas – Parte 1
Vídeo - Teste do Windows 7 RC
Sistema de Login em ASP – Parte VII (Utilizando três camadas)
Criando, utilizando e agendando sistema de backup
Sistema iGas - Controle de Gasolina
Resources e Internacionalização usando Visual Studio.NET 2005 - Parte III
Vídeo - Ler EventLog do Windows usando C#.NET
Internet Explorer 8
Conecte - novidades tecnológicas revolucionam a medicina
Visual SourceSafe - Série 4
Dados via Post no VS 2005
Visual Studio 2010 Beta 2
101 Exemplos de Linq
Criando menu dinâmico com C#.NET (Passo 2) - Com diferenciação de usuário
My Tracks
Comunicação .NET e VB 6.0 – Parte I
Virus: Provocando sua curiosidade
PodCast na Comunidade
Código fonte do livro DESENVOLVENDO WEBSERVICES
Lançamento do livro Desenvolvendo Sistema para Celular
Pedido de desculpas
Nem tudo é o que parece!
Vídeos para download
Heroes {Community} Launch - Brasilia/DF
Agrupar Email no Mail - MacBook
CRIANDO MENU DINÂMICO COM C#.NET Passo 1

Publicidade:

[sumir] [aparecer]
NETITC




Informações Online:

Usuários Online: 46
Artigos:  622
Vídeos:  43
PodCast's:  28
Fórum:  3092
Empregos:  1212
Usuários Cadastrados: 5705

Categoria de Artigos

Vídeos

Enquete - Dê sua opinião

 Os podcasts tem sido proveitoso pra você?

 

Colaboradores

Foto Autor autor: Mauricio Junior   
publicou 367 artigo(s).
Foto Autor autor: Júlio Battisti   
publicou 51 artigo(s).
Foto Autor autor: Fabio Galante Mans   
publicou 28 artigo(s).
Foto Autor autor: Kleber Becerra   
publicou 10 artigo(s).
Foto Autor autor: Ramon Durães   
publicou 6 artigo(s).
Foto Autor autor: Ebenézer de Souza   
publicou 5 artigo(s).
Foto Autor autor: Fabio Aguiar   
publicou 4 artigo(s).
NETITC