页面刷新后重新加载最后一个活动选项卡（引导程序）答案

【问题标题】：Reloading last active tab after page refresh (Bootstrap)页面刷新后重新加载最后一个活动选项卡（引导程序）
【发布时间】：2013-04-23 14:07:19
【问题描述】：

我正在构建一个 MVC 应用程序，在我看来，我使用引导选项卡。现在，我想要的是在刷新页面或从控制器重定向到它之后重新加载最后一个活动选项卡。关于如何以最简单的方式做到这一点的任何帮助？这是我的代码：

<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>

【问题讨论】：

一种方法是跟踪活动选项卡，并让您的控制器使用该信息更新模型以供视图使用。在此处添加您的控制器代码，也许可以对其进行适当的修改。
我在控制器中尝试过这样的return new RedirectResult(Url.Action("Action", "Controller", new { ID = id }) + "#Stages"); 但它不会将 Stages 选项卡的类更改为活动，我不知道如何实现这一点
您需要添加基于数据绑定的“活动”类，或者在渲染视图之后/时使用 jQuery 设置它。

标签： jquery asp.net-mvc twitter-bootstrap tabs

【解决方案1】：

尝试在客户端检查location.href.hash 并相应地操作选项卡选择。
否则您将不得不使用一些导航/历史客户端库，例如 nav.js 或 sammy.js。这可以使用哈希路径在浏览器历史堆栈中注册选项卡点击。通过 URL 哈希，您可以操作选项卡选择
可以参考Sammy Implementation

【讨论】：

【解决方案2】：

TwitterBootstrapMVC 允许通过扩展方法传递活动标签号：

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>
    }
}

因此，如果您的模型中有关于您想要打开的选项卡的信息，您可以使用它。

【讨论】：