ViewComponents 与孩子答案

【问题标题】：ViewComponents with childrenViewComponents 与孩子
【发布时间】：2019-03-17 11:59:31
【问题描述】：

我可以在这样的页面中使用 ViewComponents。

<vc:parent-component>
     <some random html>
</parent-component>

当我尝试这个时，它只呈现父组件。在父组件的 cshtml 中，我正在寻找类似下面的内容

<h2>Parent component markup</h2>
@RenderChildren()??
<h2>Parent component markup end</h2>

所以结果会是

<h2>Parent component markup</h2>
@RenderChildren()
<h2>Parent component markup end</h2>

【问题讨论】：

标签： asp.net-core asp.net-core-viewcomponent

【解决方案1】：

您不能像以前那样在 ViewComponent 标签助手中使用随机 html。可能您正在考虑将 ViewComponent 标签助手与 html 元素一样。实际上它不是html元素，而是剃刀代码。

根据Invoking a view component as a Tag Helper 文档，您的ViewComponent 标签助手应如下所示

<vc:[view-component-name]
  parameter1="parameter1 value"
  parameter2="parameter2 value">
</vc:[view-component-name]>

【讨论】：

【解决方案2】：

当您需要通过在 ProcessAsync 函数中包含以下行来传递子项时，您可以使用标签助手。

public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
{
    var childContent = await output.GetChildContentAsync();
    output.Content.SetHtmlContent(fullContent);
}

它们确实有限制，因为在标签助手内部，您无法立即访问 razor 模板，但有一种方法可以克服这一点：

检查其他答案：

How to render a Razor template inside a custom TagHelper in ASP.NET Core?

还有其他上下文：

https://github.com/aspnet/Mvc/issues/5504

当您结合这两种方法时，如果不需要，您实际上可以在不使用 Blazor 的情况下拥有完整的服务器渲染组件。

【讨论】：