Chapter 2: WebPages Razor

WebPages Razor” (or in full: ASP.NET Web Pages – Adding Razor Code). This is the key chapter where they teach you how to actually add and write server-side code inside your .cshtml pages using Razor syntax.

Last time we talked about what ASP.NET Web Pages is. Today we zoom in on the most important part: adding Razor code.

I’ll explain it like we’re building it together on one screen — very detailed, with real examples copied/adapted from W3Schools style, plus my extra teacher explanations so you truly understand why and how it works.

Step 1: What does “Adding Razor Code” mean?

In a normal HTML file → everything is static.

In ASP.NET Web Pages → you add Razor code to make the page dynamic:

• Show current time/date
• Greet user by name
• Show different content based on time/choice
• Read from form, database, files
• Calculate things
• Loop over lists

Razor is the syntax (the rules) that lets you mix C# (or VB) server code smoothly into HTML.

Main idea: HTML stays HTML. Razor starts with @ and lives inside special blocks or inline.

Step 2: The Two Main Ways to Add Razor Code

There are two primary ways to write Razor code:

A. Code Blocks → for multiple lines / logic / variables B. Inline Expressions → for quick single values inside HTML

A. Code Blocks (the @{ … } or @Code … End Code part)

This is where you put “serious” code: declare variables, if-statements, loops, calculations — anything that doesn’t directly print.

For C# (most common in Web Pages tutorials):

For VB.NET (less common now, but still supported):

Rules to remember (write these down!):

• C#: Use @{ … } — statements must end with ;
• VB: Use @Code … End Code — no ; needed
• Code inside runs first (server-side)
• Variables declared with var (C#) or Dim (VB)

B. Inline Expressions (the @ symbol magic)

This is the beautiful part — just put @ before something, and it prints the value right into HTML.

• No quotes needed around variables
• Works for variables, properties, methods, calculations
• If complex → wrap in parentheses: @(hour + 5)

Step 3: Full Practical Example – Putting It All Together

Let’s build a complete page that adds Razor code in different ways.

File name: Welcome.cshtml

What happens step-by-step (teacher whiteboard mode):

1. Server sees .cshtml → hands to Razor engine
2. Executes the @{ … } block first:
   • Sets variables
   • Checks time → decides greeting
3. Then renders HTML
4. Replaces every @something with the real value
5. Browser gets pure HTML — no @ or C# visible!

Step 4: Common Ways People Add Razor Code (from W3Schools examples)

Here are the classic patterns you’ll see in the tutorial:

1. Simple variable output

2. Multi-line logic

3. Using built-in objects (no import needed)

4. Handling form input (very common!)

Step 5: Quick Teacher Tips & Gotchas (2026 edition)

• Always end C# statements with ;
• Use @: or <text> if you want to output plain text inside a code block (rare)
• Razor auto-encodes output → safer than Classic ASP (prevents XSS)
• Prefer C# over VB nowadays — more jobs, better modern support
• In 2026: This exact syntax lives on in ASP.NET Core Razor Pages — so learning it now is future-proof!

Got questions?

• Want to see loops (@for, @foreach) next?
• Conditionals with @if inside HTML?
• How to escape @ if you really need to show “@” symbol?
• Or a full page with form + database?

Just say — next lesson is ready whenever you are! You’re doing awesome, keep going! 🚀🇮🇳