Создайте шаблон / контейнер ViewComponent, который принимает Html или другие компоненты в качестве параметров

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

Поэтому я разобрался, как это сделать.

Я использовал часть этого урока о помощниках: Шаблоны с 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>

И все, отлично сработало. К сожалению, я не смог найти более плавный путь. Но это делает работу.

Если кто-нибудь знает лучшую альтернативу, я бы хотел узнать больше.