0

Tenho um controller, que depois que salva, ele precisa ser derecionado para uma tab especifica, então eu uso como reterno os seguintes parametros.

return Redirect(Url.Action("Editar/" + resultado.Id, "ClienteEmpresa") + "#nav-profile");

Com isso eu consigo, pegar na url, exatamente, a o que eu quero, porém não sei como faço para que a Nav-Tab, #nav-profile, seja a que abra, pois ainda estás a abrir, a primeira Tab.

Minha Url fica dessa forma ao abrir

http://localhost:51029/ClienteEmpresa/Editar/14#nav-profile

Porém a tab que vem aberta é a #nav-home-tab

Esse aqui é meu HTML.

<div class="default-tab col-lg-12">
    <nav>
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Empresa</a>
            <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Contador</a>
            <a class="nav-item nav-link" id="nav-bloqueios-tab" data-toggle="tab" href="#nav-bloqueios" role="tab" aria-controls="nav-bloqueios" aria-selected="false">Bloqueios</a>
            <a class="nav-item nav-link" id="nav-financeiro-tab" data-toggle="tab" href="#nav-financeiro" role="tab" aria-controls="nav-financeiro" aria-selected="false">Controle de Vencimentos</a>
            <a class="nav-item nav-link" id="nav-cobranca-tab" data-toggle="tab" href="#nav-cobranca" role="tab" aria-controls="nav-cobranca" aria-selected="false">Controle De Cobranças</a>
        </div>
    </nav>
    <div class="tab-content pl-3 pt-2" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">


        </div>
        <div class="tab-pane fade " id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">

        </div>
        <div class="tab-pane fade " id="nav-bloqueios" role="tabpanel" aria-labelledby="nav-bloqueios-tab">
            @Html.Action("_tblBloqueios", new { Id = Model.Id })
        </div>
        <div class="tab-pane fade " id="nav-financeiro" role="tabpanel" aria-labelledby="nav-financeiro-tab">
            @Html.Action("_tableVencimentos", new { Id = Model.Id })
        </div>

        <div class="tab-pane fade " id="nav-cobranca" role="tabpanel" aria-labelledby="nav-cobranca-tab">
            @Html.Action("_tableControleDeCobranca", new { Id = Model.Id })
        </div>
    </div>
</div>

Como eu posso fazer isso? não manjo muito de Js e nem Jquery. então toda e qualquer dica será bem vinda.

1 Resposta 1

2

Para isso será necessário verificar a presença de um # na url.

function afterLoad(){
    var url = location.href;
    var splittedUrl = url.split("#");
    if (splittedUrl.length >= 2) {
        var goToTabAriaControls = splittedUrl[splittedUrl.length-1];
        $('a[aria-controls="' + goToTabAriaControls + '"]').click();
    } else {
        //implemente aqui o código caso não seja encontrada a presença de um #
    }
}

Você pode executar o código acima sempre que houver o carrega da página, por exemplo, no final da View você poderia colocar esse código e executá-lo afterLoad() logo em seguida, ou colocar esse código num arquivo javascript previamente inserido e apenas executar o método, sendo que a execução ainda estaria na View.

Nessa resposta é verificada a presença do # na url e é utilizada última parte encontrada para realizar a ação do click.

goToTabAriaControls sempre será a string que se encontra após o último # encontrado.

8
  • É necessário prestar atenção que NÃO existe espaçamento entre o a e o [ Commented 13/05/2019 às 19:12
  • 1
    subarashi!, cara, de todos que eu fucei na net, (e olha que eu to com mais de 5 hora de pesquisa, o seu script/explicação, foi a unica que funcionou. muito obrigado! Commented 13/05/2019 às 19:31
  • Por nada! Fico feliz em ter ajudado Commented 13/05/2019 às 19:32
  • Não querendo abusar, mas aproveitando o gancho, teria como além de eu direcionar para a tab, ainda abrir uma modal? pq a verdade é que o objetivo principal é essa, é uma regra. (depois que eu clicar em salvar para adicionar o cliente, obrigatoriamente, eu tenho que mandar o usuário para a aba #nav-profile, nessa aba eu tenho um botão que abre um modal para adicionar um contador, mas a verdade, é que era para abrir na aba, e ja abrir a modal. Commented 13/05/2019 às 19:51
  • Após executar o .click() verifique qual o valor de goToTabAriaControls se for o nav-profile abra a modal Commented 13/05/2019 às 19:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .