✨ ASP.NET Razor Syntax – Code Integration with HTML Using C# & VB

🧲 Introduction – What is Razor Syntax in ASP.NET?

Razor is a lightweight markup syntax used in ASP.NET (especially Web Pages and MVC) to seamlessly embed server-side code into HTML. It’s clean, concise, and supports both C# and VB.NET, making dynamic web page generation simple and efficient.

🎯 In this guide, you’ll learn:

• How Razor works and its syntax rules
• How to declare and use variables using Razor
• How to write loops and conditionals inside Razor views
• How Razor handles both C# and VB.NET logic

---

📘 Topics Covered

🔹 Topic	📖 Description
📥 Razor – Introduction	Overview of Razor and its benefits in ASP.NET
🧾 Razor – Syntax Overview	Key syntax rules, file types, and inline code
🔤 Razor C# – Variables	How to declare and print C# variables in Razor
🔁 Razor C# – Loops	Using for, foreach, and while inside views
🔣 Razor C# – Logic	Writing if, else, and switch blocks
🔤 Razor VB – Variables	Using VB.NET variables in Razor pages
🔁 Razor VB – Loops	VB For, For Each, Do While examples in views
🔣 Razor VB – Logic	Conditional logic in Razor using VB syntax

---

📥 Razor – Introduction

Razor syntax allows embedding server-side code in .cshtml (C#) or .vbhtml (VB.NET) pages.

✅ Example in Razor C#:

<h1>Hello @Model.UserName</h1>

✅ Example in Razor VB:

<h1>Hello @Model("UserName")</h1>

Razor improves readability by minimizing code tags (@ vs <% %> from classic ASP).

---

🧾 Razor – Syntax Overview

Feature	Razor C#	Razor VB
Code Start	@	@
Code Block	@{ }	@Code ... End Code
Print Value	@variable	@variable
HTML Output	HTML mixed with @code	Same
Comments	@* comment *@	@* comment *@

✅ .cshtml = C# code
✅ .vbhtml = VB.NET code

---

🔤 Razor C# – Variables

@{
    var name = "Alice";
    int age = 25;
}
<p>@name is @age years old.</p>

✅ Variables are scoped within @{ } blocks and rendered using @.

---

🔁 Razor C# – Loops

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

@foreach (var user in Model.Users) {
    <li>@user.Name</li>
}

✅ Use for, foreach, and while as in regular C# code.

---

🔣 Razor C# – Logic

@if (Model.IsAdmin) {
    <p>Welcome, admin!</p>
} else {
    <p>Access restricted.</p>
}

@switch (Model.Role) {
    case "Admin":
        <p>Admin Panel</p>;
        break;
    default:
        <p>User Panel</p>;
        break;
}

✅ Razor makes conditional rendering intuitive with clean syntax.

---

🔤 Razor VB – Variables

@Code
    Dim name As String = "Bob"
    Dim age As Integer = 30
End Code

<p>@name is @age years old.</p>

✅ VB developers can write Razor using familiar Dim, Integer, etc.

---

🔁 Razor VB – Loops

@Code
    For i As Integer = 1 To 3
        Response.Write("<p>Number " & i & "</p>")
    Next
End Code

✅ VB-style loops work seamlessly within .vbhtml.

---

🔣 Razor VB – Logic

@Code
    If IsPost Then
        Response.Write("<p>Form submitted.</p>")
    Else
        Response.Write("<p>Submit the form.</p>")
    End If
End Code

✅ Familiar If...Else logic supported directly.

---

📌 Summary – Recap & Next Steps

Razor syntax makes ASP.NET views cleaner, faster, and more maintainable by merging server-side code and HTML in one seamless flow. Whether using C# or VB.NET, you get dynamic capabilities with minimal syntax clutter.

🔍 Key Takeaways:

• Razor uses @ to denote server-side logic
• Supports both .cshtml and .vbhtml
• Inline and block-level code supported
• Clean syntax for loops, conditions, and output
• Fewer brackets and tags than classic ASP

⚙️ Real-World Applications:

• Dynamic dashboards and reports
• Form-driven UI rendering
• Email template generation
• User-specific conditional UIs

---

❓ Frequently Asked Questions

❓ What is the difference between Razor and classic ASP.NET syntax?
✅ Razor uses @, making it cleaner and more HTML-friendly. Classic used <% %> tags.

---

❓ Can I use both C# and VB.NET Razor in one project?
✅ No. Razor pages are either .cshtml (C#) or .vbhtml (VB), and must not mix languages in one view.

---

❓ Does Razor work in ASP.NET Core?
✅ Yes. Razor syntax is used in Razor Pages, Blazor, and MVC views in ASP.NET Core.

---

❓ Can I include Razor logic inside HTML tags?
✅ Yes. Example:

<p class="@Model.CssClass">Text</p>

---

Share Now :