I have a button where I open a blazor page currently I use the css display changing between none and block.
But I want to change the way this works, what I thought I'd add to open the page when I click on the button and close when I click on the other one
The opened razor page must open inside the main window.
I use the button as follows:
<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";
}
Is there any way to open and close the page created in a razor file?
To be clearer, an example.
I have the main window and in that window I have a Config button.
When I click on this button it opens the razor file with the code for this page and when I click on the button inside this page it closes
Good start.
One thing to keep in mind when writing with Blazor is that you very rarely need JS, which can help you reach a solution.
Firstly - remember that Blazor detects state and will update the page accordingly. Hence, we can create a bool to remember if the page should be shown/hidden.
@code
{
private bool _pageShown = true;
}
Now lets create a button to toggle this Boolean
<button @onclick="() => _pageShown = !_pageShown">Toggle</button>
Note that this is a lambda function, because this is an EventHandler.
Finally, lets add an if statement
@if (_pageShown)
{
<p>
Content we might want to show, but we also might want to hide this...
</p>
}