Razor Syntax Basics

Analogy categoryAnalogies

Razor syntax lets you embed C# directly inside HTML-like markup using the @ symbol as the transition character: @expression evaluates a single C# expression and writes its result into the output, while @{ } code blocks let you write multiple statements (assignments, loops) that don't directly render anything themselves. Razor is smart enough to recognize where markup ends and code begins in most cases, which is what makes it feel more like writing HTML with C# sprinkled in than writing a templating DSL.

🏏

Cricket analogy: The @ symbol is like the umpire's signal that switches the game from 'play' to a 'review' — most of the time the match (markup) just flows naturally, but @ marks the exact moment C# logic needs to step in and make a decision.

Control Flow: Conditionals and Loops

Razor supports standard C# control-flow keywords directly in markup: @if/else if/else for conditional rendering, and @foreach, @for, and @while for repeating markup over a collection. Because these are real C# constructs rather than a separate templating mini-language, you get compile-time checking, full IntelliSense, and the ability to call any method or LINQ operator directly inside the loop or condition.

🏏

Cricket analogy: An @if checking whether a batter is out is like DRS reviewing a decision — the markup rendered depends entirely on whether the C# condition (out or not out) evaluates true, just as the umpire's final call determines what happens next.

Data Binding and Escaping HTML

The @bind directive attribute creates two-way data binding between a form element and a C# field or property — @bind:event="oninput" customizes which DOM event triggers the update (default is onchange for text inputs). By default, Razor HTML-encodes any string you output with @expression, which protects against cross-site scripting; to render raw, trusted HTML you must explicitly opt in with MarkupString, and doing so on untrusted user input is a real security risk.

🏏

Cricket analogy: @bind is like a live scoreboard wired directly to the official scorer's tablet — type a run update on the tablet (input) and the stadium display (UI field) updates immediately, and vice versa, keeping both in sync automatically.

razor

@page "/razor-basics-demo"

<input @bind="searchTerm" @bind:event="oninput" placeholder="Search fruits..." />

<ul>
    @foreach (var fruit in fruits.Where(f => f.Contains(searchTerm, StringComparison.OrdinalIgnoreCase)))
    {
        <li>
            @if (fruit == "Mango")
            {
                <strong>@fruit (house favorite)</strong>
            }
            else
            {
                @fruit
            }
        </li>
    }
</ul>

@code {
    private string searchTerm = string.Empty;
    private List<string> fruits = new() { "Apple", "Mango", "Banana", "Papaya" };
}

Wrapping untrusted user-supplied text in a MarkupString to render raw HTML disables Razor's automatic encoding and reopens the app to cross-site scripting (XSS) attacks. Only use MarkupString for content you control or have explicitly sanitized — never for raw text a user typed into a form field.

The @ symbol transitions from HTML markup into C# — @expression writes a value, @{ } holds statements.
@if/else and @foreach/@for/@while bring real, compiler-checked C# control flow directly into markup.
Because Razor logic is real C#, you get IntelliSense, compile-time errors, and access to LINQ.
@bind creates two-way data binding between a form element and a C# field or property.
@bind:event lets you customize which DOM event (e.g. oninput) triggers the binding update.
Razor HTML-encodes @expression output by default to prevent cross-site scripting.
MarkupString opts out of encoding to render raw HTML and should never be used with untrusted input.

Practice what you learned

1. What character does Razor use to transition from HTML markup into C# code?

2. What is the difference between @expression and an @{ } code block?

3. What does the @bind directive attribute do?

4. What does Razor do by default when you render a string with @expression?

5. Why is wrapping untrusted user input in MarkupString risky?

Was this page helpful?

Your First Razor Component

Related Study Notes in Microsoft Technologies

Browse all study notes

Microsoft Technologies

Windows 10 / UWP Development Study Notes

.NET · 30 topics

Microsoft Technologies

Windows Batch Scripting Study Notes

Batch · 30 topics

Microsoft Technologies

MFC (Microsoft Foundation Classes) Study Notes

C++ · 30 topics

Microsoft Technologies

Silverlight Study Notes

.NET · 30 topics

Microsoft Technologies

XAML Study Notes

.NET · 30 topics

Microsoft Technologies

WPF (Windows Presentation Foundation) Study Notes

.NET · 30 topics

Topics covered

#BlazorStudyNotes#MicrosoftTechnologies#RazorSyntaxBasics#Razor#Syntax#Control#Flow#StudyNotes#SkillVeris#ExamPrep

Razor Syntax Basics