如何通过Onclick点击事件实现Blazor页面内部打开与关闭功能

完全可以用Blazor原生的状态驱动渲染能力实现，不需要额外调用JS操作DOM，逻辑更简洁也符合Blazor的开发规范：

第一步：改造主页面代码 #

<!-- 原来的Config触发按钮 -->
<svg class="Mybutton" viewBox="0 0 50 50" @onclick="() => ShowConfigPage = true">
    ...
</svg>

<!-- 配置页面渲染容器，根据状态决定是否渲染/展示 -->
@if (ShowConfigPage)
{
    <!-- 传入关闭回调到子组件 -->
    <ConfigPage OnClose="CloseConfigPage" />
}

@code {
    // 控制配置页显隐的状态变量
    private bool ShowConfigPage { get; set; } = false;

    private void CloseConfigPage()
    {
        ShowConfigPage = false;
    }
}

第二步：改造你的Config razor页面（子组件） #

在你的配置页razor文件里添加关闭参数和关闭触发逻辑：

<!-- 配置页原有内容 -->
...

<!-- 配置页内部的关闭按钮 -->
<button @onclick="TriggerClose">关闭配置页</button>

@code {
    // 接收父组件传入的关闭回调
    [Parameter]
    public Action OnClose { get; set; }

    private void TriggerClose()
    {
        OnClose?.Invoke();
    }
}

可选：保留CSS过渡效果的调整 #

如果你需要保留淡入淡出等CSS过渡动画，不想用条件渲染直接销毁节点，可以把显隐逻辑改成绑定display样式，不需要改JS：

<div id="navi" style="display: @(ShowConfigPage ? "block" : "none")">
    <ConfigPage OnClose="CloseConfigPage" />
</div>

这个方案所有渲染都在主窗口内部完成，显隐逻辑全由C#状态控制，不需要额外维护JS代码，也避免了JS操作DOM和Blazor渲染逻辑冲突的问题。

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