创建接受HTML或其他组件作为参数的视图组件模板/容器 [英] Create a View Component template/container that accepts HTML or other components as parameters
本文介绍了创建接受HTML或其他组件作为参数的视图组件模板/容器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我已经搜索了很多地方,但没有找到任何与我所想的类似的东西。
假设我想创建一个可重用的容器组件,如卡片、表单或模式,并将其另存为一个View组件。如何在该主视图组件的正文中添加新的视图组件,以使其最大限度地可重复使用?
这里的语法当然只是为了演示这个概念,但例如,类似于:
<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类,如下所示:
[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 as模型,因为只有一个参数,但是对于更多的参数,您只需调用@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或其他组件作为参数的视图组件模板/容器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文