如何在 @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 代码只能写在文件的第一部分而不是函数或类中，这似乎非常有限。

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

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

Answer 1

更新，您现在可以使用：

@GreetPerson("John")

@code {
  RenderFragment GreetPerson(string name)
  {
    return @<p>Hello <em>@name</em></p>;
  }
}

旧答案：

这是announced as a feature for 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 无法更改。这是一个双下划线。

Answer 2

版本 1

在 Blazor 中，惯用的方式是创建组件，而不是尝试直接在 @code 中编写 HTML。

创建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>;
    }
}