我正在构建一个 MVC 应用程序，并尝试使用 twitter bootstrap 来构建响应式 ui。我的导航设置如下:
<div class="nav navbar-fixed-top">
<ul class="nav nav-tabs">
<li class="active"><a href="#pane1" data-toggle="tab">Dashboard</a></li>
<li><a href="#pane2" data-toggle="tab">Sell</a></li>
<li><a href="#pane3" data-toggle="tab">Products</a></li>
<li><a href="#pane4" data-toggle="tab">Customers</a></li>
<li><a href="#pane5" data-toggle="tab">Settings</a></li>
<li><a href="#pane6" data-toggle="tab">Help</a></li>
</ul>
</div>
<div>
<div class="tab-content">
<div id="panel1" class="tab-pane">
page 1
</div>
</div>
<!--Panels 2-6 are omitted to save space -->
</div>
</div>
我的问题是什么是最佳解决方案。 1)找到一种方法，将其放入 Razor 布局中并将各个 Pane 加载为 RenderSections 2) 废弃 Razor 布局并将导航应用于所有内容页面
最佳答案
在这种情况下，我可能会建议使用 RenderPage 与 RenderSection，因为看起来您将始终在每个面板中呈现相同的内容。因此，您的大部分工作将在 _Layout.cshtml 中完成。你的 body 看起来像这样:
<body>
<div class="nav navbar-fixed-top">
<ul class="nav nav-tabs">
<li class="active"><a href="#pane1" data-toggle="tab">Dashboard</a></li>
<li><a href="#pane2" data-toggle="tab">Sell</a></li>
<li><a href="#pane3" data-toggle="tab">Products</a></li>
<li><a href="#pane4" data-toggle="tab">Customers</a></li>
<li><a href="#pane5" data-toggle="tab">Settings</a></li>
<li><a href="#pane6" data-toggle="tab">Help</a></li>
</ul>
</div>
@RenderBody()
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
然后你将有一个 Index.cshtml 它将作为你的登陆页面，它看起来像这样:
<div>
@Html.Partial("ViewName")
// Reapeat for each tab
</div>
然后是每个选项卡部分，您将拥有该选项卡的内容:
<div class="tab-content">
<div id="panel1" class="tab-pane">
page 1
</div>
</div>
关于asp.net-mvc - 如何使用 mvc View 来填充 Bootstrap 选项卡？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20058032/