The @ Symbol and Razor's Core Idea
Razor is the templating syntax ASP.NET Web Pages uses to blend server-side code with HTML. Its defining trick is the @ symbol, which the parser uses to detect the transition from markup into code without requiring closing tags like the old <% %> syntax from classic ASP. Writing @DateTime.Now inside a paragraph outputs the current server time directly into the rendered HTML, and the Razor parser is smart enough to figure out where the C# expression ends and plain text resumes based on characters like whitespace and angle brackets.
Cricket analogy: The @ symbol acts like a bowler's mark on the run-up; the moment Mohammed Shami's foot crosses it, the delivery phase begins, just as @ marks the exact point where Razor switches from HTML text into executable code.
Expressions vs. Code Blocks
@{
string userName = "Priya";
int score = 87;
string grade = score >= 90 ? "A" : score >= 75 ? "B" : "C";
}
<p>Welcome back, @userName!</p>
<p>Your score: @score (Grade @grade)</p>
@if (score >= 75) {
<p class="pass">You passed the assessment.</p>
} else {
<p class="fail">Please retake the assessment.</p>
}Razor distinguishes between a single inline expression, such as @userName, which just outputs a value, and a multi-statement code block wrapped in @{ }, which runs logic but does not automatically render anything unless you explicitly write out HTML inside it. Control structures like @if, @foreach, and @for do not need braces around the C# condition and can contain HTML directly inside their body, and Razor correctly infers where the HTML markup begins again after the condition, which is what makes it noticeably terser than the code-behind model in Web Forms.
Cricket analogy: An inline expression is like a single quick single run taken between the wickets, while a code block is like a whole over of five dot balls building up before the sixth ball finally produces a boundary that the scoreboard shows.
Loops and Rendering Collections
Razor's @foreach loop is commonly used to render a table row or list item per item in a collection, and because Razor mixes code and markup so tightly, the loop body can contain plain HTML tags directly without needing string concatenation. For example, iterating over a List<string> of product names and emitting an <li> for each one requires no special output method; you simply place the HTML tag inside the loop's curly braces and Razor renders it once per iteration, substituting @item.Name for the current element on each pass.
Cricket analogy: A foreach loop over a squad list is like a team manager like Rahul Dravid walking through fifteen players one by one during a training session, running the same warm-up drill for each player in turn.
Razor code blocks and expressions can be freely mixed with plain HTML. Razor's parser uses heuristics based on characters like < and whitespace to decide where code ends and markup resumes, so you rarely need explicit closing markers.
Escaping the @ Symbol
Because @ is a reserved trigger character in Razor, you occasionally need to display a literal @ in your output, such as in an email address like [email protected]. Razor handles this with the @@ escape sequence, rendering a single @ character rather than starting a code expression. This matters in real-world Web Pages sites where footers or contact sections routinely include email addresses, and forgetting to escape the symbol produces a compile error because Razor tries to interpret the text after @ as C# code.
Cricket analogy: Escaping @ with @@ is like a batter like Virat Kohli deliberately leaving a wide delivery alone rather than swinging, signaling to the umpire that this particular ball should be treated differently from a normal delivery.
A single unescaped @ in plain text followed by something Razor can parse as an identifier, such as an email address, will cause a compilation error. Always use @@ when you need a literal @ character in rendered output.
- The @ symbol is Razor's trigger for switching from HTML markup into C#/VB.NET code.
- Inline expressions like @variableName output a value directly into HTML.
- Code blocks wrapped in @{ } run multiple statements and don't render output unless you write HTML inside them.
- Control structures like @if, @foreach, and @for can contain HTML directly in their body without special output calls.
- Razor infers the transition between code and markup using parsing heuristics, avoiding verbose closing tags.
- Use @@ to escape a literal @ character, such as in an email address, to avoid a parser error.
- Razor is significantly terser than the classic ASP <% %> syntax or Web Forms code-behind files.
Practice what you learned
1. What character does Razor use to signal a transition from HTML into code?
2. What is the correct way to output a literal @ character, such as in an email address, inside a Razor file?
3. What is the key difference between an inline expression and a Razor code block?
4. Can HTML tags be placed directly inside a Razor @foreach loop's body?
5. What happens if you write an unescaped @ followed by parseable text, like an email address, in a Razor file?
Was this page helpful?
You May Also Like
What Is ASP.NET Web Pages?
An introduction to ASP.NET Web Pages, a lightweight framework that mixes server-side C# or VB.NET code directly into HTML using Razor syntax, aimed at simple, file-based site development.
Helpers in Web Pages
How built-in and custom helpers provide reusable, prebuilt pieces of functionality, from Chart and WebGrid to WebMail and Facebook integration, plus how to write your own helper with @helper.
Layout Pages in Web Pages
How shared layout pages, the RenderBody and RenderSection methods, and reusable partial views let ASP.NET Web Pages sites keep a consistent header, footer, and navigation across many content pages.
WebMatrix and Project Structure
How Microsoft's free WebMatrix tool creates and organizes an ASP.NET Web Pages site, including the special App_Data, App_Start, and Account folders and the built-in development web server.
Related Reading
Related Study Notes in Microsoft Technologies
Browse all study notesWindows 10 / UWP Development Study Notes
.NET · 30 topics
Microsoft TechnologiesWindows Batch Scripting Study Notes
Batch · 30 topics
Microsoft TechnologiesMFC (Microsoft Foundation Classes) Study Notes
C++ · 30 topics
Microsoft TechnologiesSilverlight Study Notes
.NET · 30 topics
Microsoft TechnologiesXAML Study Notes
.NET · 30 topics
Microsoft TechnologiesWPF (Windows Presentation Foundation) Study Notes
.NET · 30 topics