CODEWITHSUNDEEP
javascripthtmlrazorblazor
richard wallace
richard wallace

Reputation: 7

How to open and close a blazor page using Onclick

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

Upvotes: 0

Views: 2064

Answers (1)

Luke Parker
Luke Parker

Reputation: 354

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

Upvotes: 1

Related Questions