none
Aba bootstrap RRS feed

  • Pergunta

  • Boa noite,

    Estou começando com o Bootstrap e gostaria de realizar uma ação que funcionava muito bem com o componente TabConteiner do AjaxControlToolKit, que no caso era a troca de abas apenas indicando a propriedade

    TabSetor.ActiveTabIndex = 0;

    Isso direcionava para a tab que eu indicasse, mas agora estou utilizando o BootsTrap e o sistema de abas através do HTML

    <ul class="nav nav-tabs">
           <li class="active"><a href="#TabSetor" data-toggle="tab">Setor</a></li>

    e gostaria de saber se é possível no código C# indicar para que aba ir depois de um determinado evento.

    Tenho a impressão que só com JavaScript é possível realizar isso, mas como fazer essa função e adicionar a chamada no C# passando a aba pretendida. Segue os trechos de código:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Patrimonio/Formularios/Site.Master" AutoEventWireup="true" CodeBehind="FormSetor.aspx.cs" Inherits="PatrimonioWeb.Patrimonio.Formularios.FormSetor" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
        <div class="conteiner"> 
            <fieldset class="externo-border">
                <legend class="externo-border">Cadastro de Setores</legend>
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#TabSetor" data-toggle="tab">Setor</a></li>
                        <li><a href="#TabPesquisar" data-toggle="tab">Pesquisar</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane" id="TabSetor">
                            <asp:UpdatePanel id="UPSetor" runat="server"> 
                                <ContentTemplate>
                                    <br />
                                    <fieldset class="interno-border">
                                        <legend class="interno-border">Comandos</legend>
                                        <asp:ImageButton ID="ImgIncluir" runat="server" ImageUrl="~/Patrimonio/Img/salvar.png" TabIndex="1" ToolTip="Cadastrar Setor" OnClick="ImgIncluir_Click" />
                                        <img src="/Patrimonio/Img/separador.png" class="Separador" />
                                        <asp:ImageButton ID="ImgAtualizar" runat="server" ImageUrl="~/Patrimonio/Img/atualizar.png" TabIndex="3" ToolTip="Atualizar Setor" OnClick="ImgAtualizar_Click" />
                                        <img src="/Patrimonio/Img/separador.png" class="Separador" />
                                        <asp:ImageButton ID="ImgExcluir" runat="server" ImageUrl="~/Patrimonio/Img/excluir.png" TabIndex="2" ToolTip="Excluir Setor" OnClick="ImgExcluir_Click" OnClientClick="if (confirm(&quot;Deseja realmente Excluir?&quot;)) {return true;} else {return false;}" />
                                        <img src="/Patrimonio/Img/separador.png" class="Separador" />
                                        <asp:ImageButton ID="ImgNovo" runat="server" ImageUrl="~/Patrimonio/Img/novo.png" TabIndex="4" ToolTip="Criar Novo Setor" OnClick="ImgNovo_Click" />
                                        <img src="/Patrimonio/Img/separador.png" class="Separador" />
                                        <asp:ImageButton ID="ImgImprimir" runat="server" ImageUrl="~/Patrimonio/Img/imprimir.png" TabIndex="5" ToolTip="Imprimir Relatório" />
                                    </fieldset>
                                    <br />
                                    <fieldset class="interno-border">
                                        <legend class="interno-border">Dados do Setor:</legend>
                                            <div class="form-group">
                                                <div class="container-fraid">
                                                    <div class="row">
                                                        <div class="col-xs-1 col-xs-push-1"> <!--3 casas p/ direita -->
                                                            <asp:Label ID="LblCodigo" runat="server" Text="Código:"></asp:Label>
                                                            <asp:TextBox ID="TxtSetorCod" CssClass="form-control input-sm" TabIndex="6" runat="server" AutoPostBack="True" OnTextChanged="TxtSetorCod_TextChanged"></asp:TextBox>
                                                        </div>
                                                        <br />
                                                        <div class="col-xs-2 col-xs-pull-1"> <!--9 casas p/ esquerda -->
                                                            <asp:Label ID="Label1" runat="server" Text="Situação:"></asp:Label>
                                                            <asp:DropDownlist ID="ddlSituacao" CssClass="ddl" TabIndex="7" runat="server">
                                                                <asp:ListItem Value="A">Ativo</asp:ListItem>
                                                                <asp:ListItem Value="I">Inativo</asp:ListItem>
                                                            </asp:DropDownlist>
                                                        </div>
                                                        <div class="col-xs-2 col-xs-pull-1"> <!--9 casas p/ esquerda -->
                                                            <asp:Label ID="Label10" runat="server" Text="Localização:"></asp:Label>
                                                            <asp:DropDownlist ID="ddlLocalizacao" CssClass="ddl" TabIndex="8" runat="server" AutoPostBack="True" ToolTip="O setor pertence a Capital ou Interior do Estado?">
                                                                <asp:ListItem Value="S">Selecione</asp:ListItem>
                                                                <asp:ListItem Value="C">Capital</asp:ListItem>
                                                                <asp:ListItem Value="I">Interior</asp:ListItem>
                                                            </asp:DropDownlist>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xs-1 col-xs-push-3"> <!--3 casas p/ direita -->
                                                            <asp:Label ID="Label2" runat="server" Text="Sigla:"></asp:Label>
                                                            <asp:TextBox ID="TxtSigla" CssClass="form-control input-sm" TabIndex="9" runat="server"></asp:TextBox>
                                                        </div>
                                                        <div class="col-xs-3 col-xs-pull-9"> <!--9 casas p/ esquerda -->
                                                            <asp:Label ID="Label3" runat="server" Text="Nome:"></asp:Label>
                                                            <asp:TextBox ID="TxtDescr" CssClass="form-control input-sm" TabIndex="10" runat="server"></asp:TextBox>        
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                    </fieldset>
    

    Trecho C#
    protected void GridSigla_SelectedIndexChanged(object sender, EventArgs e)
            {
                SetorBLL Setor = new SetorBLL();
                try
                {
                    Setor.habilitaBotoes(ImgIncluir, ImgExcluir, ImgAtualizar, "N");
                    GridViewRow row = GridSigla.SelectedRow;
                    TxtSetorCod.Text = HttpUtility.HtmlDecode(row.Cells[1].Text);
                    TxtSigla.Text = HttpUtility.HtmlDecode(row.Cells[2].Text);
                    TxtDescr.Text = HttpUtility.HtmlDecode(row.Cells[3].Text);
                    TxtMtrResp.Text = HttpUtility.HtmlDecode(row.Cells[4].Text);
                    TxtNomeResp.Text = HttpUtility.HtmlDecode(row.Cells[5].Text);
                    TxtCargoResp.Text = HttpUtility.HtmlDecode(row.Cells[6].Text);
                    TxtMtrRespAnt.Text = HttpUtility.HtmlDecode(row.Cells[7].Text);
                    TxtNomeRespAnt.Text = HttpUtility.HtmlDecode(row.Cells[8].Text);
                    TxtCargoRespAnt.Text = HttpUtility.HtmlDecode(row.Cells[9].Text);
                    ddlSituacao.SelectedValue = row.Cells[10].Text;
                    ddlLocalizacao.SelectedValue = row.Cells[11].Text;
                    //TabSetor.ActiveTabIndex = 0;
    
                    
                                   
                }
                catch (Exception erro)
                {
                    executa.Log(erro.Message.ToString());
                }
                finally
                {
                    Setor = null;
                }
            }

    Desde já agradeço a colaboração.



    quarta-feira, 8 de junho de 2016 23:35

Todas as Respostas

  • Existe sim: é só atribuir o atributo runat="server", os atributos "name" e "id".

     <li class="active"><a href="#TabSetor" id="minhaAba" name="minhaAba" data-toggle="tab" runat="server">Setor</a></li>

    Abs

    quinta-feira, 9 de junho de 2016 16:36
  • Boa tarde Gilberto,

    Declarei a nova tag dessa forma:

    <li class="active"><a href="#TabSetor" id="Id_Setor" name="Id_Setor" data-toggle="tab" runat="server">Setor</a></li>

    e no C# tentei chamar assim:

     protected void GridSigla_SelectedIndexChanged(object sender, EventArgs e)
            {
                SetorBLL Setor = new SetorBLL();
                try
                {
                    Setor.habilitaBotoes(ImgIncluir, ImgExcluir, ImgAtualizar, "N");
                    GridViewRow row = GridSigla.SelectedRow;
                    TxtSetorCod.Text = HttpUtility.HtmlDecode(row.Cells[1].Text);
                    TxtSigla.Text = HttpUtility.HtmlDecode(row.Cells[2].Text);
                    TxtDescr.Text = HttpUtility.HtmlDecode(row.Cells[3].Text);
                    TxtMtrResp.Text = HttpUtility.HtmlDecode(row.Cells[4].Text);
                    TxtNomeResp.Text = HttpUtility.HtmlDecode(row.Cells[5].Text);
                    TxtCargoResp.Text = HttpUtility.HtmlDecode(row.Cells[6].Text);
                    TxtMtrRespAnt.Text = HttpUtility.HtmlDecode(row.Cells[7].Text);
                    TxtNomeRespAnt.Text = HttpUtility.HtmlDecode(row.Cells[8].Text);
                    TxtCargoRespAnt.Text = HttpUtility.HtmlDecode(row.Cells[9].Text);
                    ddlSituacao.SelectedValue = row.Cells[10].Text;
                    ddlLocalizacao.SelectedValue = row.Cells[11].Text;
                    //TabSetor.ActiveTabIndex = 0;
                    Id_Setor.Focus();
    
    
                    
                }
                catch (Exception erro)
                {
                    executa.Log(erro.Message.ToString());
                }
                finally
                {
                    Setor = null;
                }
            }
     

    e não funfou como eu queria, na verdade explicando melhor o que eu pretendo... Tenho um formulário com duas abas(Setor e PesquisarSetor) na aba PesquisarSetor tenho um gridView que é preenchido depois de uma pesquisa pelo nome do setor, sendo assim o usuário vai clicar na linha do Gridview preenchido e o registro vai popular os campos na outra aba chamada Setor(utilizando o evento SelectedIndexChanged), dessa forma depois de selecionar o registro o sistema deve preencher os dados e sair da aba Pesquisar e ir pra aba Setor.

    Eu realizava isso com facilidade quando utilizava TabContainer do AjaxToolKit, mas agora com o bootstrap ainda não consegui essa façanha.

    Qualquer dica agradeço.


    • Editado AlmeidaSql quinta-feira, 9 de junho de 2016 21:00
    quinta-feira, 9 de junho de 2016 21:00
  • Boa tarde, Almeida!

    Neste caso você pode adicionar o runat="server" nas div que representam suas abas, por exemplo a TabSetor, e no código você exibe/ocultar de acordo com o necessário utilizando a propriedade Visible.

    Ou seja ao invés de usar isso

    TabSetor.ActiveTabIndex = 0;

    Você usa isso

    TabSetor.Visible = true;

    TabPesquisar.Visible = false;



    Att,
    Leandro

    Se foi útil, marque como útil ou como resposta.

    segunda-feira, 20 de junho de 2016 16:09