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

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

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