Bootstrap 选项卡不适用于具有两个局部视图的视图

Question

我有一个包含两个选项卡的主视图。第一个选项卡是默认选项卡，应显示第一个局部视图，第二个选项卡应显示第二个局部视图。当我让它正常工作时，我无法为特定的选定选项卡突出显示选项卡。

我的控制器。

public ActionResult Contact(int condition=0)
    {

        if(condition==0)
            ViewBag.Message = "Tab1";
        else
            ViewBag.Message = "Tab2";

        ViewBag.Condition = condition;
        return View();
    }

我的观点

@{
ViewBag.Title = "Contact";
}
<h2>@ViewBag.Title.</h2>


<div>
<ul class="nav nav-tabs">
    <li>@Html.ActionLink("Tab1","Contact", new { condition=0})</li>
    <li>@Html.ActionLink("Tab2", "Contact", new { condition = 1 })</li>
</ul>
<div class="tab-content">
    @if (ViewBag.Condition == 0)
    {
    <div class="tab-pane active" id="Tab1">
        @Html.Partial("_Partial1")
    </div>
    }
    else
    {
    <div class="tab-pane active" id="Tab2">
        @Html.Partial("_Partial2")
    </div>
    }
</div>

</div>

编辑 1：正如答案所建议的那样并没有解决问题。

@{
ViewBag.Title = "Contact";
}
<h2>@ViewBag.Title.</h2>


<div>
<ul class="nav nav-tabs">
    <li>@Html.ActionLink("Tab1","Contact", new { condition=0}, new { @class = ViewBag.Condition == 0 ? "active" : "" })</li>
    <li>@Html.ActionLink("Tab2", "Contact", new { condition = 1 }, new { @class = ViewBag.Condition == 1 ? "active" : "" })</li>
</ul>
<div class="tab-content">
    @if (ViewBag.Condition == 0)
    {
    <div class="tab-pane active" id="Tab1">
        @Html.Partial("_Partial1")
    </div>
    }
    else
    {
    <div class="tab-pane active" id="Tab2">
        @Html.Partial("_Partial2")
    </div>
    }
</div>

</div>

编辑 2：

   <div id="tabs">
   <ul class="nav nav-tabs">

        <li class="nav active">@Html.ActionLink("Tab1", "Contact", new { condition = 0 }, new { @id = "Tab1", data_toggle = "tab" })</li>
        <li class="nav">@Html.ActionLink("Tab2", "Contact", new { condition = 1 }, new { @id = "Tab2", data_toggle = "tab" })</li>

</ul>
<div class="tab-content">

    <div class="tab-pane fade in active" id="Tab1">
        @Html.Partial("_Partial1")
    </div>

    <div class="tab-pane fade" id="Tab2">
        @Html.Partial("_Partial2")
    </div>

</div>

</div>

我已将代码更改为基于 this fiddle 差别不大。

Answer 1

<div>
    <ul class="nav nav-tabs">
        <li>@Html.ActionLink("Tab1", "Contactme", new { condition = 0 })</li>
        <li>@Html.ActionLink("Tab2", "Contactme", new { condition = 1 })</li>
    </ul>
    <div class="tab-content">
        @if (ViewBag.Condition == 0)
        {
            <div class="tab-pane active" id="Tab1">
               @Html.Partial("_Partial1")
            </div>
        }
        else
        {
            <div class="tab-pane active" id="Tab2">
                @Html.Partial("_Partial2")
            </div>
        }
    </div>
    </div>

Answer 2

我相信有更好的方法可以做到这一点，但这个解决方案对我很有效。我只是每次检查Viewbag并根据检查设置li的class active。这样我最终设置了正确的 li 元素，即使屏幕调用了选项卡更改时的操作方法。

<div>
<ul class="nav nav-tabs">
    @if (ViewBag.Condition == 0)
    {
        <li class="nav active">@Html.ActionLink("Tab1", "Contact", new { condition = 0 }, new { @id = "Tab1" })</li>
        <li class="nav">
            @Html.ActionLink("Tab2", "Contact", new { condition = 1 }, new{@id = "Tab2"})
        </li>
    }
    else if (ViewBag.Condition == 1)
    {
        <li class="nav">@Html.ActionLink("Tab1", "Contact", new { condition = 0 }, new { @id = "Tab1"})</li>
        <li class="nav active">@Html.ActionLink("Tab2", "Contact", new { condition = 1 }, new { @id = "Tab2"})</li>
    }
</ul>
<div class="tab-content">
    @if (ViewBag.Condition == 0)
    {
        <div class="tab-pane fade in active" id="Tab1">
            @Html.Partial("_Partial1")
        </div>
    }
    else if (ViewBag.Condition == 1)
    {
        <div class="tab-pane fade  in active" id="Tab2">
            @Html.Partial("_Partial2")
        </div>
    }
</div>

Bootstrap 选项卡不适用于具有两个局部视图的视图

Bootstrap tabs not working for a view with two partial views

asp.net-mvc

tabs

asp.net-mvc-partialview

twitter-bootstrap