带有选项卡和页面布局的 MVC3答案

【问题标题】：MVC3 with Tabs and page Layouts带有选项卡和页面布局的 MVC3
【发布时间】：2011-04-21 03:00:42
【问题描述】：

我正在开发一个 MVC3 Web 应用程序，我需要创建一个类似于 SalesForce 的选项卡驱动布局的布局。我尝试创建一个局部视图以在我的选项卡内容区域内呈现我的侧边栏导航。 CSS 定位不起作用，因为我需要留在标签的内容区域内。我应该如何正确呈现我的内部导航菜单和我的内容并保持在选项卡式内容区域内。我尝试发布 salesforce 的屏幕截图，但该网站的新用户无法加载图片。

<div id="tabs">
<ul>
    "#tabs-1">Project
    #tabs-2">Metrics
     href="#tabs-3">Task
</ul>
<div id="tabs-1">   
             @Html.Partial("_SideBar")

</div>
<div id="tabs-2">
    <p>Content for TAB2</p>
</div>
<div id="tabs-3">
    <p>Content for TAB3.</p>
</div>

好吧，我遇到的问题是我正在尝试将 JqueryUI TAB 小部件与我的 _Layout 页面一起使用。我正在尝试嵌入一个 2 列布局，该布局在第一列中具有侧边栏导航，在第二列中具有内容。这必须显示在 TAB 的视图区域的墙壁内。因此，如果我单击 TAB1，您可以看到第 1 列中的导航和第 2 列中的内容。如果我然后单击 TAB 2，我希望仍然在左侧有导航，在右侧有内容，但他们会有其中不同的数据。最大的问题是如何确保 TAB 视图区域内的这些列保留在 TAB 的视图区域中，而不是完全呈现在 TAB 之外。我希望这很清楚。如果我需要提供更多信息，请告诉我。谢谢

【问题讨论】：

标签： asp.net-mvc-3 layout

【解决方案1】：

在这里很难完全得到你想要的东西，但你只是想在你的布局中使用区域吗？比如

@RenderSection（“Tab2Content”，必需：假）

在你看来：

@section Tab2Content{ 内容在这里 }

【讨论】：

我被 JQuery Tab 组件误导了。 float 属性导致选项卡不展开，使其看起来好像没有任何东西在 div 标记内保留。只需从外部标签中删除浮动属性

【解决方案2】：

我被 JQuery Tab 组件误导了。 float 属性导致选项卡不展开，使其看起来好像没有任何东西在 div 标记内保留。只需从外部标签中删除浮动属性

【讨论】：