如何在 @code 块中编写 Blazor HTML 代码？

Question

如何在@code块内的函数中编写 Blazor HTML 代码？

考虑以下代码：

@page "/Test"

@if (option == 1)
{
    drawSomething("Something");
}
else
{
    drawSomething("Something else");
}

@code {
    int option;

    void drawSomething(string message)
    {
        <p>message</p>
    }
}

在我尝试构建之前它不会产生任何错误，然后它给了我以下错误：

错误 CS0103 当前上下文中不存在名称“__builder”

在 ( Test.razor.g.cs) 中的行：

__builder.AddContent(0, "        ");
__builder.AddMarkupContent(1, "<p>message</p>\r\n");

如果这意味着 Blazor HTML 代码只能写入文件的第一部分，而不能写入函数或类中，这似乎非常有限。

我使用的是编写3.0.100-preview9-014004blazor版本 ( ) 时的最新版本。

注意：给定示例中的输出高度简化，我想知道我是否以及如何从函数中编写代码，而不是以更好的方式解决上面的输出。

Answer 1

版本 1

在 Blazor 惯用的方式是创建组件，而不是尝试直接在@code.

创建 drawSomething.razor

<p>@Message</p>

@code {
    [Parameter]
    public string Message {get;set;}
}

并且在你的 Test.razor

@page "/Test"

@if (option == 1)
{
    <drawSomething Message="Something" />
}
else
{
    <drawSomething Message="Something else" />
}

@code {
    int option;
}

在这里我假设你有一些更复杂的东西，然后就简单了

.

版本 2

如果你真的想要简单的方法，那么就

@page "/Test"

@if (option == 1)
{
    <p>Something</p>
}
else
{
    <p>Something else</p>
}

@code {
    int option;
}

第 3 版 基于 Isaac 的建议

@page "/Test"

@if (option == 1)
{
    <drawSomething Message="Something" />
}
else
{
    <drawSomething Message="Something else" />
}

@code {
    int option;

    RenderFragment drawSomething(string message)
    {
        return @<p>@message</p>;
    }
}

Answer 2

这是作为 Preview6 的一项功能宣布的，但它并没有像当时宣传的那样工作，而且一些细节后来似乎发生了变化。该页面底部有来自 Cosmin Sontu 的评论，指出了正确的方法：

@using Microsoft.AspNetCore.Components.Rendering

@*tested with preview 9*@
@{ GreetPerson(__builder, "John"); }

@code {

    void GreetPerson(RenderTreeBuilder __builder, string name)
    {            
        <p>Hello, <em>@name!</em></p>
    }
}

名称__builder不能更改。那是双下划线。