Question

我在很多地方进行了搜索，到目前为止，我还没有看到与我一直在想的东西类似的东西。

比方说，我想创建一个可重复使用的容器组件，例如卡片，表格或模式，并将其另存为ViewComponent。我该如何在主要ViewComponent的“主体”内部添加新的视图组件，以使其能够最大程度地重用？

这里的语法只是为了演示这一思想，但在示例中，是这样的：

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

像这样可能吗？只要实现了重用其他可重用元素的容器的主要目标，就不必使用ViewComponents或局部视图。

我已经研究了助手，但是Core中不再提供它们。

非常感谢您！

Answer 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>

就是这样，完美地工作了。不幸的是，我找不到更无缝的方式。但这可以完成工作。

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

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

1 个答案: