Razor视图foreach循环内调用Component.InvokeAsync组件未渲染问题

Razor视图引擎的输出编译规则存在明确的场景差异：

• 在普通页面标记流区域（非大括号包裹的C#代码块内）直接书写await Component.InvokeAsync()时，Razor编译器会自动识别该表达式的返回值（IHtmlContent类型），并自动将其注入页面输出流，因此单独调用组件时可以正常渲染输出。
• 在@foreach等大括号包裹的C#代码块内裸写await Component.InvokeAsync()语句时，该行属于普通C#执行逻辑，Razor编译器不会自动将方法返回值收集到输出流中；叠加异步执行的上下文切换机制，方法返回的组件渲染内容会因为没有被输出流捕获，最终完全不会呈现在页面上，也就出现了循环执行三次、但组件内容完全丢失的现象。

额外排查点：需确认循环内调用的组件名称与实际注册的视图组件名完全匹配。比如测试场景中单独调用的是HelloComponent，如果循环内误写为HouseOptionsComponent，引擎找不到对应组件时会静默返回空内容，不会抛出可感知的异常。

在循环代码块内调用组件时，必须通过Razor的显式输出语法，将组件方法的返回值强制注入输出流，核心改动是将裸写的异步调用包裹在@()表达式中，修改后的可运行代码如下：

@{
    List<string> options = new List<string>();
    options.Add("Adam");
    options.Add("Adrian");
    options.Add("Bart");   
}

///My code before component

@foreach(var item in options)
{
    <h3>Test header</h3>
    // 修复写法：显式标记组件返回值为页面输出
    @(await Component.InvokeAsync("HelloComponent"))
}

///My code after component

修改后页面渲染效果与预期完全一致：

///My code before component

Test header
Hello Adam!
Test header
Hello Adam!
Test header
Hello Adam!

///My code after component

内容的提问来源于stack exchange，提问作者Adam Wróbel