创建一个接受 HTML 或其他组件作为参数的视图组件模板/容器答案

【问题标题】：Create a View Component template/container that accepts HTML or other components as parameters创建一个接受 HTML 或其他组件作为参数的视图组件模板/容器
【发布时间】：2021-07-14 02:28:15
【问题描述】：

我已经搜索了很多地方，但没有看到任何与我想的相似的东西。

假设我想创建一个可重用的容器组件，例如卡片、表单或模式，并将其保存为视图组件。如何在该主视图组件的“主体”内添加新的视图组件，以使其最大程度地可重用？

这里的语法当然只是为了演示这个想法，但是例如，像这样：

<vc:parent var1="x" var2="y">
    <vc:child var3="a" var4="b"></vc:child>
    <vc:child var3="c" var4="d"></vc:child>
</vc:parent>

这样的事情可能吗？

这不一定需要使用视图组件——也许是部分视图？——只要实现了重用其他可重用元素的容器的主要目标。

我研究了帮助程序，但它们在 ASP.NET Core 中不再可用。

【问题讨论】：

除此之外，ASP.NET Web 表单有很多令人讨厌的地方，但这是他们的服务器控件实现做得非常好的一件事，因此允许一组非常丰富和直观的声明性语法用于模板可重复使用的组件。

标签： asp.net-core razor-pages asp.net-core-viewcomponent view-components

【解决方案1】：

所以我想出了怎么做。

我使用了本教程中有关助手的部分内容：Templates With Razor 并对其进行了修改，使其适用于 ViewComponents。

为了让它工作，在一个最小的例子中，创建一个 ViewComponent 类：

[ViewComponent(Name = "Test")]
public class VCTest : ViewComponent
{
    public IViewComponentResult Invoke(Func<dynamic, object> Content)
    {
        return View(Content);
    }
}

在 cshtml 文件中创建您想要的实际模板，如下所示：

@model Func<dynamic, object>

<div id="SomeTemplateTest">
    @Model(null)
</div>

在这个非常简单的例子中，我只使用 Func 作为模型，因为只有一个参数，但对于更多参数，您只需调用 @Model.funname(null) 而不仅仅是 @Model(null)。没什么大不了的。

从您的视图中调用此组件时，请预先创建您的子元素，如下所示：

@{Func<dynamic, object> children=
    @<div>
        <vc:child var1="a" var2="b"></vc:child>
        <vc:child var1="c" var2="d"></vc:child>
        <vc:child var1="e" var2="f"></vc:child>
    </div>;}

div 只是用来封装所有元素。我还没有找到解决方法，但它没有重大影响。

然后调用相应的参数传递的父 ViewComponent 标签：

<vc:test content="children"></vc:form-test>

就是这样，完美运行。不幸的是，我找不到更无缝的方式。但这确实有效。

如果有人知道更好的选择，我很想知道更多。

【讨论】：