Conditionally rendering HTML in Blazor

Question

If I use an if statement to render a block of HTML in a Blazor WebAssembly app, does it actually get rendered and not displayed if the condition is false?

Something like this:

@if(isSectionVisible)
{
   <div>Some HTML here</div>
}

Would this actually render the <div> and not display it if isSectionVisible is set to false or not render it at all?

Here's the actual scenario that I'm working on and the objective is to render only what's necessary and not just make it invisible to user. In my scenario, it's a big form with quite a few <InputText> controls user needs to fill out and be able to view the "terms and conditions" which comes from an external static URL if user chooses to. The whole thing is actually in a modal which is why I want to switch between the form and the iframe. I just don't want to open a modal on top of another.

<div>
   @if(isFormVisible)
   {
      <EditForm>
         ... Omitted for brevity
      </EditForm>
   }

   @if(isTermsAndConditionsVisible)
   {
      <iframe src="@termsAndConditionsUrl"></iframe>
   }

</div>

@code {
   bool isFormVisible = true;
   bool isTermsAndConditionsVisible = false;
   string termsAndConditionsUrl = "";

   void TogglePanels(string panelName)
   {
      if(panelName == "terms-conditions")
      {
         termsAndConditionsUrl = "https://example.com";
         isFormVisible = false;
         isTermsAndConditionsVisible = true;
      }
      else
      { 
         isFormVisible = true;
         isTermsAndConditionsVisible = false;
         termsAndConditionsUrl = "";
      }
   }
}

it'd won't end up in the DOM or be rendered. (you can confirm by right-clicking in the browser and choosing "Inspect") — browsermator
– browsermator, Commented Oct 1 at 19:45

Henk Holterman · Accepted Answer · 2025-10-02 06:57:23Z

1

No, the content is not rendered when the condition is false.

Apart from the actual HTML that you can inspect it means that when you toggle isFormVisible then the <EditForm> will be created or Disposed. So it can have consequences for state management.

If you want the EditForm to stay alive but not be visible then you can replace the if(){ } with a hidden="@(!isFormVisible)" attribute.

answered Oct 2 at 6:57

Henk Holterman

276k33 gold badges353 silver badges540 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Conditionally rendering HTML in Blazor

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related