twitter-bootstrap 您如何使用 mvc 视图来填充引导程序选项卡？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20058032/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you use mvc views to fill bootstrap tabs?
提问by matt weston
I am building an MVC application and am trying to use twitter bootstrap to build a responsive ui. I have setup my navigation as follows:
我正在构建一个 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>
My question is what is optimal solution. 1) To find a way, to put this in a Razor Layout and load the individual panes as RenderSections 2) To scrap the Razor Layout and just apply the navigation to all content pages
我的问题是什么是最佳解决方案。1) 找到一种方法，将其放入 Razor 布局并将各个窗格加载为 RenderSections 2) 废弃 Razor 布局并将导航应用于所有内容页面
采纳答案by Jared
In this case I would Probably recommend using RenderPage vs RenderSection as it would appear that you will always have the same content rendered in each panel. So most of your work will be done in your _Layout.cshtml. Your body is going to look like this:
在这种情况下，我可能会建议使用 RenderPage 与 RenderSection，因为看起来您将始终在每个面板中呈现相同的内容。所以你的大部分工作都将在你的 _Layout.cshtml 中完成。你的身体会变成这样：
<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>
Then you are going to have an Index.cshtml which will act as your landing page and it will look something like this:
然后您将拥有一个 Index.cshtml，它将作为您的登陆页面，它看起来像这样：
<div>
@Html.Partial("ViewName")
// Reapeat for each tab
</div>
Then is each tab partial you will have your content for the tab:
然后是每个选项卡部分您将拥有该选项卡的内容：
<div class="tab-content">
<div id="panel1" class="tab-pane">
page 1
</div>
</div>
回答by oalbrecht
This can be done using layouts. Here are the basic steps:
这可以使用布局来完成。以下是基本步骤：
Create a layout that includes your navbar. Put the layout in the /Views/Shared folder. (e.g. _LayoutMain.cshtml)
<body> <div class="nav navbar-fixed-top"> <ul class="nav nav-tabs"> <li class="active"><a href="#pane1Link">Dashboard</a></li> <li><a href="#pane2Link">Sell</a></li> <li><a href="#pane3Link">Products</a></li> <li><a href="#pane4Link">Customers</a></li> <li><a href="#pane5Link">Settings</a></li> <li><a href="#pane6Link">Help</a></li> </ul> </div> @RenderBody() @Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false) </body>Create a template (optionally with a controller action) for each nav bar item (Sell, Products, Customers, etc.)
In each template, reference your layout like so:
@{ Layout = "~/Views/Shared/_LayoutMain.cshtml"; }Then add the following javascript code to the main layout page. This code actively selects which nav bar item you've currently clicked:
<script> $(document).ready(function () { var pathname = $(location).attr('pathname'); $('a[href="' + pathname + '"]').parent().addClass('active'); }); </script>
创建一个包含导航栏的布局。将布局放在 /Views/Shared 文件夹中。（例如_LayoutMain.cshtml）
<body> <div class="nav navbar-fixed-top"> <ul class="nav nav-tabs"> <li class="active"><a href="#pane1Link">Dashboard</a></li> <li><a href="#pane2Link">Sell</a></li> <li><a href="#pane3Link">Products</a></li> <li><a href="#pane4Link">Customers</a></li> <li><a href="#pane5Link">Settings</a></li> <li><a href="#pane6Link">Help</a></li> </ul> </div> @RenderBody() @Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false) </body>为每个导航栏项目（销售、产品、客户等）创建一个模板（可选择使用控制器操作）
在每个模板中，像这样引用您的布局：
@{ Layout = "~/Views/Shared/_LayoutMain.cshtml"; }然后将以下 javascript 代码添加到主布局页面。此代码主动选择您当前单击的导航栏项目：
<script> $(document).ready(function () { var pathname = $(location).attr('pathname'); $('a[href="' + pathname + '"]').parent().addClass('active'); }); </script>
The nice thing about this approach is that you can nest as many layouts as you want. So for example, you could have a main navbar and within one of those pages you could have another navbar (such as tabs/pills) using the same approach.
这种方法的好处是您可以嵌套任意数量的布局。因此，例如，您可以拥有一个主导航栏，而在其中一个页面中，您可以使用相同的方法拥有另一个导航栏（例如选项卡/药丸）。
This might be helpful too: http://www.mikesdotnetting.com/article/164/nested-layout-pages-with-razor.
这也可能有帮助：http: //www.mikesdotnetting.com/article/164/nested-layout-pages-with-razor。
