创建一个接受 HTML 或其他组件作为参数的视图组件 template/container
Create a View Component template/container that accepts HTML or other components as parameters
找了很多地方都没有看到和我想的一样的东西
假设我想创建一个可重用的容器组件,例如卡片、表单或模式,并将其另存为视图组件。我将如何以使其最大程度可重用的方式在该主视图组件的“主体”内添加新的视图组件?
这里的语法当然只是为了演示这个想法,但是例如,像这样:
<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 中不再可用。
所以我想出了怎么做。
我使用了本教程中关于助手的部分内容:Templates With Razor
并对其进行了修改,使其适用于 ViewComponents。
因此,为了使其正常工作,在一个最小的示例中,创建一个 ViewComponent class 如下:
[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(无效的)。没什么大不了的。
从您的视图调用此组件时,请像这样预先创建您的子元素:
@{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>
就是这样,效果很好。不幸的是,我找不到更无缝的方式。但这样就可以了。
如果有人知道更好的选择,我很想知道更多。
找了很多地方都没有看到和我想的一样的东西
假设我想创建一个可重用的容器组件,例如卡片、表单或模式,并将其另存为视图组件。我将如何以使其最大程度可重用的方式在该主视图组件的“主体”内添加新的视图组件?
这里的语法当然只是为了演示这个想法,但是例如,像这样:
<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 中不再可用。
所以我想出了怎么做。
我使用了本教程中关于助手的部分内容:Templates With Razor 并对其进行了修改,使其适用于 ViewComponents。
因此,为了使其正常工作,在一个最小的示例中,创建一个 ViewComponent class 如下:
[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(无效的)。没什么大不了的。
从您的视图调用此组件时,请像这样预先创建您的子元素:
@{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>
就是这样,效果很好。不幸的是,我找不到更无缝的方式。但这样就可以了。
如果有人知道更好的选择,我很想知道更多。