How to show and hide Blazor content. Its simple!

When creating UIs using XAML, to show and hide content you typically manipulate the Visbility property of a div tag or other Html element. In Blazor it is far simpler. You just wrap teh content in a Blazor if sequence.

@if (Viz) 
<h1>The Heading for Visible</h1>
<h1>The Heading for Viz false</h1>
<button class="btn btn-primary" @onclick="@Toggle">Toggle Viz</button>

    bool Viz {get;set;} = true;

    protected void Toggle(MouseEventArgs e)
        Viz = ! Viz;

That is all it takes!

It is worth noting that the Html code in the “hidden” part is not actually hidden! If you look at the source, when in a browser, you will find that the “hidden” part only comes into existence in the DOM when it is toggled to show

 This Category Links 
Category:Blazor Index:Blazor
  Next: > Blazor How To
<  Prev:   Blazor