如何使用 Onclick 打开和关闭 Blazor 页面

Question

我有一个按钮可以打开一个 blazor 页面，目前我使用 css 显示在无和块之间切换。

但我想改变它的工作方式，我想我会在单击按钮时添加以打开页面并在单击另一个按钮时关闭页面

打开的剃须刀页面必须在主窗口内打开。

我使用按钮如下：

<svg class="Mybutton" viewBox="0 0 50 50" @onclick="() => OpenConf()">
    ...
</svg>


void OpenMenu() {
    SRuntime.InvokeAsync<string>("OpenConf");
}


function OpenConf() {
    document.getElementById("navi").style.display = "block";
}

有什么方法可以打开和关闭在 razor 文件中创建的页面？

为了更清楚，举个例子。

我有主窗口，在那个窗口中我有一个配置按钮。

当我单击此按钮时，它会打开带有此页面代码的 razor 文件，当我单击此页面内的按钮时，它会关闭

Answer 1

好的开始。

使用 Blazor 编写时要记住的一件事是，您很少需要 JS，它可以帮助您找到解决方案。

首先 - 请记住，Blazor 会检测状态并相应地更新页面。因此，我们可以创建一个bool 来记住页面是否应该显示/隐藏。

@code
{
   private bool _pageShown = true;
}

现在让我们创建一个按钮来切换这个布尔值

<button @onclick="() => _pageShown = !_pageShown">Toggle</button>

注意这是一个 lambda 函数，因为这是一个 EventHandler。

最后，让我们添加一个if 语句

@if (_pageShown)
{
   <p>
      Content we might want to show, but we also might want to hide this...
   </p>
}