同一页面上的 Asp.Net MVC 多个 Html.Actions？避免这种情况的正确方法是什么？答案

【问题标题】：Asp.Net MVC Multiple Html.Actions On Same Page? What is the correct way to avoid this?同一页面上的 Asp.Net MVC 多个 Html.Actions？避免这种情况的正确方法是什么？
【发布时间】：2017-01-11 15:49:53
【问题描述】：

在具有主导航结构的网站上工作，该结构在我的共享“_Layout.cshtml”页面中定义，主导航上的链接将带您到具有单独导航栏的不同页面，该导航栏是独一无二的那个页面。

（类似这样的^）。

目前，我的第二个导航和主要内容都在同一个页面上，并且有大量不同的选项卡呈现 Html.Actions，它们是通过单击第二个导航上的链接并更改选项卡来切换的。这可行，但它使我的初始页面加载非常缓慢，因为我相信它们都是一次加载的。

标签的 HTML：

<div class="tab-content">
<div class="tab-pane fade in active" id="tab1" role="tabpanel">
    <div class="container-fluid">
        @Html.Action("tab1", new ViewDataDictionary { { "item", m.item }, { "item2", m.item2 } })
    </div>
</div>
<div class="tab-pane fade in" id="tab2" role="tabpanel">
    <div class="container-fluid">
        @Html.Action("tab2", new ViewDataDictionary { { "item", m.item }, { "item2", m.item2 } })
    </div>
</div>
<div class="tab-pane fade" id="tab3" role="tabpanel">
    <div class="container-fluid">
        @Html.Action("tab3", new ViewDataDictionary { { "item", m.item }, { "item2", m.item2 } })
    </div>
</div>
<div class="tab-pane fade" id="tab4" role="tabpanel">
    <div class="container-fluid">
        @Html.Action("tab4", new ViewDataDictionary { { "item", m.item }, { "item2", m.item2
        } })
    </div>
</div>

对于具有多个辅助导航栏的布局是否有更好的选择，这些辅助导航栏会根据“_Layout.cshtml”页面上单击的链接而变化？

感谢任何帮助或想法。

【问题讨论】：

标签： html asp.net razor

【解决方案1】：

如果您有复杂的页面需要提前加载，而且速度很慢...替代方案是：

使选项卡仅链接到使用相同选项卡但实际上并未加载的其他页面。这看起来是一样的，但是 - 自然 - 从一个选项卡导航到下一个选项卡会更慢，因为所有内容都没有预先加载。
当用户单击选项卡时，使用 javascript 动态加载内容。例如。使用jQuery.load()。这更复杂，但更适合您当前的设置。

【讨论】：