← All lessons

Level 1 / ASP.NET Core Razor / lesson 3 of 6

Showing markup conditionally

Use @if and else to switch which markup a page renders.

`@if` moves you from markup into C#, and the `{ }` block moves you back into markup. Everything inside the braces is only written out when the condition is true.

Understand the idea

Render a branch, not a hidden block

@if chooses which HTML Razor writes for a request. The other branch is not rendered into that response, unlike an element hidden with CSS.

Conditions have types

A bool can be tested directly; a numeric threshold needs a comparison such as Model.RedFlagHours > 0. Test both sides of the condition instead of trusting one preview state.

Presentation versus policy

A display condition is not authorization. A real app must enforce permissions on the server before sending protected data, regardless of which HTML is visible.

7 lines
6 lines

Preview - simulated. Not a .NET compiler.

Zone 4

Step 1 of 3

In progress

Branch on a bool

Add @if (Model.IsOnline) rendering <p>Reporting</p>, with an else branch rendering <p>No contact</p>. IsOnline starts true, so the preview should show Reporting.

  • The markup contains an @if block - not done yet
  • The condition reads Model.IsOnline - not done yet
  • The markup renders a <p> element - not done yet

Coach

The checklist above is what decides whether a step is done. The coach only explains; it never grades.

The preview is a simulated Razor renderer, not a compiler. It supports @model, @{ } literal assignments, @Expression, @foreach, @if/@else, @* comments *@, and plain markup with class, id, and title attributes. Anything else is reported as outside the lesson instead of being guessed at.

Where the simulator stops

This workbench supports basic @if and else, not arbitrary C# conditions or ASP.NET Core authorization. Do not treat a conditional view as a security check.

Try it in a real .NET project

In a Razor Pages app, set an IsOnline flag from your PageModel. Render distinct status messages for true and false; verify both in a browser by changing the model value. Add a numeric alert threshold and test values on each side.

Check your understanding

Can hiding a link with @if stop someone from requesting its destination?

Show the explanation

No. @if controls only which HTML appears. The destination needs its own server-side authorization checks before it returns protected data.

Goose School teaches Microsoft's stack. Goose Solutions is not affiliated with, endorsed by, or sponsored by Microsoft.