不支持Blazor条件打开/关闭标记

Question

我想在某些条件下在另一个内容中显示Blazor服务器页面的部分：

@if (DoOpenTag) {
<ContainerTag>
}
<MyControl />
@if (DoOpenTag) {
</ContainerTag>
}

编译器在这里似乎完全迷失了方向。。。我知道我可以做到：

@if (DoOpenTag) {
<ContainerTag>
<MyControl />        
</ContainerTag>
}
else {
<MyControl />
}

但内容中有相当多的代码，这会导致代码重复，我宁愿避免！

有什么办法可以在这里实现我想要的吗？

Answer 1

Razor标记中不允许使用第一个代码块。

您可以在Renderfragment中定义内部代码块，然后在条件语句中使用它。

这里有一个简单的例子向你展示如何做到这一点

@page "/"
<PageTitle>Index</PageTitle>
<div class="m-2 text-end">
<button class="btn btn-primary" @onclick=SetShowBox>Toggle Box</button>
</div>
@if (showBox)
{
<div class="bg-dark text-white p-2 m-2">
@InnerContent
</div>
}
else
{
@InnerContent
}
@code {
private bool showBox = false;
private void SetShowBox()
=> showBox = !showBox;
private RenderFragment InnerContent => __builder =>
{
// This can be any Razor Markup block
<h1>Hello World</h1>
<div>Welcome to my Blazor Application</div>
};
}

为什么您的第一个块会导致错误？

Razor编译器将Razor文件编译为普通的C#文件。Razor编译器不允许"；"错误成形"；代码块中的标记。您的代码很容易出现拼写错误或逻辑添加了错误的结束标记。

以下是主要区块的发射：

if (showBox)
{
__builder.OpenElement(10, "div");
__builder.AddAttribute(11, "class", "bg-dark text-white p-2 m-2");
__builder.AddContent(12, InnerContent);
__builder.CloseElement();
}
else
{
__builder.AddContent(13, InnerContent);
}