如何将内容投影到ASP MVC局部视图中？

Question

我正在尝试找到一种在ASP MVC应用程序中使用抽象HTML组件的优雅方法。我不希望数百页的页面被bootstrap或jquery或任何魔术标记污染，并且，如果我决定用材料HTML替换bootstrap HTML，我希望将其包含在一个地方。

我将用Tab容器进行解释，因为这是一个完美的示例，并且每个人都熟悉它。我有一些与HtmlHelpers一起工作的东西，但坦率地说，这很丑陋：

@using (var tabs = Html.ExTabs())
{
    tabs.AddTab("Tab 1", "tab1", "IconName");
    tabs.AddTab("Tab 2", "tab2", "IconName");
    tabs.AddTab("Tab 3", "tab3", "IconName");
    using (tabs.NextPanel())
    {
        // tab1 content
    }
    using (tabs.NextPanel())
    {
        // tab2 content
    }
    using (tabs.NextPanel())
    {
        // tab3 content
    }
}

尽管这可以解决我的主要要求（在所有视图中均使用抽象的Tab容器），但仍有一些令人烦恼的事情：

1. 实际的HTML来自TagHelper中的C＃，而不是视图文件
2. 我觉得仍然有太多非HTML / XML魔术
3. 我们必须告诉Tabs AddTab有多少个标签
4. 因此标签数据与面板内容是分开的

我想做的是这样的：

<ex-tab-container>
    <ex-tab heading="Tab 1" id="tab1" icon="IconName">
        ...
    </ex-tab>
    <ex-tab heading="Tab 2" id="tab2" icon="IconName">
        ...
    </ex-tab>
    <ex-tab heading="Tab 3" id="tab3" icon="IconName">
        ...
    </ex-tab>
</ex-tab-container>

这显然要求标签容器能够迭代包含的标签（例如，部分视图可以注入ChildComponents列表）。

我正在考虑完全按照自己的意愿编写自己的MVC视图引擎-但前提是无法实现（可能已经存在另一个视图引擎？）

有没有更优雅的方式做到这一点？

更新：我想一种解决方案是仅使用jQuery转换客户端上的标记，然后魔术放在客户端js中而不是服务器端c＃中，并且标记可以保持整洁。