文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用mvc视图填充引导选项卡？

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

Stack Overflow用户

提问于 2013-11-19 05:13:48

回答 2查看 18.3K关注 0票数 3

我正在构建一个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布局中，并将单个窗格加载为RenderSections 2)取消Razor布局，仅将导航应用于所有内容页面

twitter-bootstrap

layout

razor

asp.net-mvc

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-11-19 05:39:25

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

票数 1

Stack Overflow用户

发布于 2015-04-20 04:54:13

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

创建包含导航栏的布局。将布局放在/Views/Shared文件夹中。(例如_LayoutMain.cshtml)
为每个导航栏项目(销售、产品、客户等)创建一个模板(可选择使用控制器操作)
在每个模板中，如下所示引用您的布局：

@{ Layout = "~/Views/Shared/_LayoutMain.cshtml"；}然后

将以下javascript代码添加到主布局页面。此代码主动选择您当前单击的导航栏项目：

这种方法的好处是，您可以根据需要嵌套任意多个布局。例如，你可以有一个主导航栏，在其中一个页面中，你可以有另一个导航栏(比如标签/药丸)，使用相同的方法。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20058032

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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