Razor – Syntax Overview – The Elegant Way to Write C# in HTML

Introduction – What Is Razor Syntax in ASP.NET?

Razor syntax is a streamlined way to combine C# code with HTML markup inside .cshtml pages in ASP.NET. It was designed to be lightweight, expressive, and easy to read—offering a clean alternative to older .aspx or Web Forms markup with <% ... %>.

In this guide, you’ll learn:

• Core Razor syntax elements like @, code blocks, and expressions
• Conditional statements, loops, and inline rendering
• Syntax rules for escaping, raw HTML, and layout helpers
• Tips and best practices for clean Razor code

Razor Syntax Basics

Razor uses the @ symbol to switch between HTML and C#.

@{
    var name = "Vaibhav";
    var date = DateTime.Now;
}

<p>Hello, @name! Today is @date.ToLongDateString().</p>

Output:

Hello, Vaibhav! Today is Tuesday, June 11, 2025.

Razor Code Block

Wrap multiple C# lines inside @{ ... }

@{
    int a = 5;
    int b = 10;
    int sum = a + b;
}
<p>Sum = @sum</p>

Razor Inline Expressions

Use @expression to embed single-line values or methods:

<p>Time now: @DateTime.Now.ToShortTimeString()</p>

Razor Loops and Conditionals

if, else Conditional

@if (User.Identity.IsAuthenticated)
{
    <p>Welcome, @User.Identity.Name!</p>
}
else
{
    <p>Please log in.</p>
}

for Loop

@for (int i = 1; i <= 3; i++)
{
    <li>Item @i</li>
}

foreach Loop

@foreach (var item in new[] { "Apple", "Banana", "Cherry" })
{
    <p>@item</p>
}

Razor Comments

@* This is a Razor comment and won't render in HTML *@

Razor Special Scenarios

Escaping the @ Symbol

Use @@ to render a literal @:

<p>Email: @@mycompany.com</p>

Output:

Email: @mycompany.com

Raw HTML with @Html.Raw()

@{
    var htmlText = "<strong>This is bold</strong>";
}
@Html.Raw(htmlText)

Without Raw, Razor encodes the tag into plain text.

Multi-line Code + HTML Mix

@{
    var colors = new[] { "Red", "Green", "Blue" };
}

<ul>
@foreach (var color in colors)
{
    <li>@color</li>
}
</ul>

Razor Syntax Summary Table

Best Practices for Razor Syntax

Do:

• Use @model at the top for strongly typed views
• Keep logic minimal in the .cshtml file (use PageModel/Controller)
• Use HTML helpers and tag helpers for form fields and rendering

Avoid:

• Writing complex logic in views
• Using Response.Write (Razor handles output automatically)
• Mixing JavaScript in Razor blocks—separate script logic when possible

Summary – Recap & Next Steps

Razor syntax gives ASP.NET developers a simple, readable way to mix server-side logic with HTML. Its minimal syntax reduces clutter, improves maintainability, and provides full C# support for building dynamic views.

Key Takeaways:

• Use @ to switch between HTML and C# code
• Razor supports if, for, foreach, and expressions inline
• Razor is cleaner and more modern than older Web Forms markup

Real-world Use Cases:

• Render dynamic product listings or tables
• Show/hide UI sections based on user roles
• Loop over lists and format output cleanly

FAQs – Razor Syntax Overview

Is Razor syntax case-sensitive?
Yes, Razor uses C# which is case-sensitive.

Can I use JavaScript inside Razor blocks?
Yes, but it’s best to keep JavaScript outside @{} blocks and embed it properly using <script> tags.

What file types use Razor?
.cshtml (C#) and .vbhtml (VB.NET)

How do I debug Razor syntax errors?
Razor compilation errors will show during runtime. Use descriptive error messages and try to isolate the block causing failure.