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

版本1

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

创建@code

drawSomething.razor

并在您的<p>@Message</p> @code { [Parameter] public string Message {get;set;} }

中

Test.razor

在这里，我假设您有一些更复杂的东西，然后只是简单的

。

版本2

如果您真的想要简单的方法，那么只需

@page "/Test"

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

@code {
    int option;
}

版本3 根据以撒的建议

@page "/Test"

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

@code {
    int option;
}

Answer 2

这是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代码？

2 个答案: