创建一个接受HTML或其他组件作为参数的ViewComponent模板/容器 [英] Create a ViewComponent template/container that accepts Html or other components as parameters

问题描述

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

I have searched in many places and so far I have not seen anything similar to what I have been thinking.

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

Let's say I want to create a reusable container component, like a card, form or a modal, and save that as a ViewComponent. How would I add new view components inside of the "body" of that main ViewComponent in a way that would make it maximally reusable?

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

The syntax here is just to demonstrate the idea of course, but for an exemplification, something like this:

<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或局部视图.

Is anything like this possible? Not necessarily using ViewComponents, maybe partial views, as long as the primary goal of reusing the containers of other reusable elements is achieved.

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

I have looked into helpers but they are no longer available in Core.

非常感谢！

推荐答案

所以我想出了办法.

我使用了本教程中有关助手的一部分:带有剃刀的模板 并对其进行了修改，使其可以与ViewComponents一起使用.

I used part of this tutorial about helpers: Templates With Razor And modified it so it works with ViewComponents.

因此，为了使其正常工作，在一个最小的示例中，创建一个ViewComponent类，如下所示:

So to get it working, in a minimal example, create a ViewComponent class as such:

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

在像这样的cshtml文件中创建所需的实际模板:

Create the actual template that you want, in a cshtml file like this:

@model Func<dynamic, object>

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

在这种非常简单的情况下，我只使用Func作为模型，因为只有一个参数，但是对于更多参数，您只需要调用@ Model.funname(null)而不是@Model(null).没关系.

In this very simple case I just used the Func as model since there is only one parameter, but for more parameters you'd just have to call @Model.funname(null) instead of just @Model(null). No big deal.

从您的视图调用此组件时，请像这样预先创建子元素:

when calling this component from your view, create your child elements beforehand like so:

@{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仅用于封装所有元素.我还没有找到解决这个问题的方法，但是它没有重大的意义.

The div is there only to encapsulate all the elements. I haven't found a way around that but it has no major implications.

然后调用父级ViewComponent标记，并相应地传递参数:

Then call the parent ViewComponent tag passing on the parameters accordingly:

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

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

And that's it, worked perfectly. It is unfortunate that I could not find a more seamless way. But this does the job.

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

If anyone knows of a better alternative I'd love to know more.

这篇关于创建一个接受HTML或其他组件作为参数的ViewComponent模板/容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！