CODEWITHSUNDEEP
jqueryasp.net-mvctwitter-bootstraptabs
dgebaei
dgebaei

Reputation: 51

Reloading last active tab after page refresh (Bootstrap)

I'm building an MVC application and in my view i use bootstrap tabs. Now, what i want to to is to reload last active tab after refreshing the page or redirecting to it from the controller. Any help on how can i do this in the simplest way? This is my code:

<div id="tabs">
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#Stages" data-toggle="tab">Stages</a>
        </li>
        <li>
            <a href="#Activities" data-toggle="tab">Activities</a>
        </li>
        <li>
            <a href="#History" data-toggle="tab">History</a>
        </li>       
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="Stages">                
            @Html.Partial("_Stages", Model.stages)
        </div>
        <div class="tab-pane" id="Activities">
            @Html.Partial("_Activities", Model.activities)
        </div>
        <div class="tab-pane" id="History">
            @Html.Partial("_History", Model.history)
        </div>
    </div>
</div>

Upvotes: 2

Views: 2233

Answers (2)

Dmitry Efimenko
Dmitry Efimenko

Reputation: 11203

TwitterBootstrapMVC allows passing active tab number through an extension method:

using (var tabs = Html.Bootstrap().Begin(new Tabs("TabsId").ActiveTab(2)))
{
    @tabs.Tab("Tab 1")
    @tabs.Tab("Tab 2")
    @tabs.Tab("Tab 3")

    using (tabs.BeginPanel())
    {
        <p>Contents of tab 1</p>
    }
    using (tabs.BeginPanel())
    {
        <p>Contents of tab 2</p>
    }
    using (tabs.BeginPanel())
    {
        <p>Contents of tab 3</p>
    }
}

So if you have information in your model about the tab you want to be on, you could use that.

Upvotes: 0

Abhijit J
Abhijit J

Reputation: 91

  1. Try checking location.href.hash on client side and manipulate tab selection accordingly.

  2. Or else you will have to use some navigation/history client libraries like nav.js or sammy.js. This can register tab clicks in browser history stack with hash path. And with URL hash you can manipulate the tab selection

  3. You can refer to Sammy Implementation

Upvotes: 1

Related Questions