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

Question

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

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

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

我使用按钮如下：

<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 文件中创建的页面吗？

为了更清楚，举个例子。

我有主要的 window，其中 window 我有一个配置按钮。

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

Answer 1

好的开始。

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

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

@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>
}

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

How to open and close a blazor page using Onclick

html

javascript

razor

blazor