🧾 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

🔣 Element	🧠 Description	✅ Example
@{ }	Code block	@{ var x = 1; }
@value	Inline output	@DateTime.Now
@Html.Raw()	Output raw HTML	@Html.Raw("<b>Hi</b>")
@* comment *@	Razor comment	@* This is hidden *@
@if / else	Conditional rendering	@if(condition) { ... }
@for / @foreach	Iteration over loops	@foreach(var i in list) { ... }
@@	Escape Razor syntax	@@symbol renders @

---

📘 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.

---

Share Now :