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

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

0 голосов
/ 16 марта 2019

Я искал во многих местах, и до сих пор я не видел ничего похожего на то, о чем я думал.

Допустим, я хочу создать контейнерный компонент многократного использования, например карточку, форму или модал, и сохранить его как 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.

Большое спасибо!

1 Ответ

0 голосов
/ 17 марта 2019

Итак, я понял, как это сделать.

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

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

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

...