Razor组件中dialog元素的条件式"open"属性设置问题

• 问题核心：你尝试通过条件渲染切换<dialog>的open属性，但原有写法无法正确生成符合要求的HTML结构，导致对话框无法正常显示。
• 错误写法的问题：@(paneOpen ? open : "")里的open未定义为变量，Blazor无法正确解析，最终生成的属性不符合HTML布尔属性规则（布尔属性只需存在即生效，无需赋值open="open"）。

修正后的代码 #

<dialog class="dialog" open="@paneOpen">
    <form>
        Content
    </form>
</dialog>

@code {
    public bool paneOpen = true;
}

原理说明 #

Blazor对HTML布尔属性有原生支持：

• 当绑定的布尔值为true时，会渲染open属性（无赋值，即<dialog open>）；
• 当值为false时，会自动移除该属性，对话框随之隐藏。

如果需要手动控制属性字符串，也可以用以下等价写法：

<dialog class="dialog" @(paneOpen ? "open" : null)>
    <!-- 内容 -->
</dialog>

内容的提问来源于stack exchange，提问作者Ladefuss