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

Question

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

但是我想改变它的工作方式，我想我应该添加的是当我点击按钮时打开页面当我点击另一个按钮时关闭页面

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

我按如下方式使用按钮:

<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文件当我点击该页中的按钮时它会关闭

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