Question

我正在构建一个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 Layout并将各个窗格作为RenderSections加载 2）废弃Razor布局并将导航应用于所有内容页面

Answer 1

在这种情况下，我可能会建议使用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>

然后你将会有一个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>

Answer 2

这可以使用布局来完成。以下是基本步骤：

创建包含导航栏的布局。将布局放在/ 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>

这种方法的好处在于您可以根据需要嵌套任意数量的布局。例如，您可以使用主导航栏，在其中一个页面中，您可以使用相同的方法使用另一个导航栏（例如制表符/药片）。

这也可能有用： http://www.mikesdotnetting.com/article/164/nested-layout-pages-with-razor。

如何使用mvc视图填充引导选项卡？

2 个答案: