如何在 @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>
    }
}

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

Error CS0103 The name '__builder' does not exist in the current context

在 (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

版本 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>;
    }
}

Answer 2

更新，您现在可以使用：

@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。那就是双下划线。

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

How do I write Blazor HTML code inside the @code block?

c#

blazor

blazor-server-side