📥 Razor – Introduction – Simplify Server-Side Coding in ASP.NET

🧲 Introduction – What Is Razor in ASP.NET?

Razor is a lightweight, server-side templating syntax used in ASP.NET to generate dynamic HTML markup using C# (or VB.NET). It blends server code with HTML using a clean and expressive syntax that avoids bulky markup and enhances productivity.

🎯 In this guide, you’ll learn:

• What Razor is and why it matters in modern ASP.NET development
• Basic syntax and how to embed C# in HTML
• How Razor differs from classic .aspx and Web Forms
• Practical examples of Razor expressions, loops, and conditionals

---

💡 What Is Razor Syntax?

Razor syntax starts with the @ symbol, which indicates a switch from HTML to C# code. It allows you to embed logic, display values, and render dynamic content directly in the markup.

✅ Razor files use the .cshtml (C#) or .vbhtml (VB.NET) extension.

---

🧪 Example – Basic Razor Syntax in .cshtml

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

<h2>Welcome, @name!</h2>
<p>Current time is: @time</p>

🔍 Explanation:

• @{ ... } is a Razor code block for declaring variables
• @name and @time inject values into the HTML

🧪 Output:

Welcome, Vaibhav!
Current time is: 6/11/2025 4:45 PM

---

📄 Razor Page Layout

A typical Razor Page includes:

• A @page directive
• A mix of C# and HTML
• Page model support in PageModel.cs file (ASP.NET Core)

@page
@model IndexModel
@{
    ViewData["Title"] = "Home Page";
}
<h1>@ViewData["Title"]</h1>

---

🔁 Razor Loops and Conditionals

✅ Conditional Statement

@if (User.Identity.IsAuthenticated)
{
    <p>Welcome, @User.Identity.Name!</p>
}
else
{
    <p>Please <a href="/login">login</a>.</p>
}

✅ Loop Example

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

---

🧩 Inline Razor vs Code Blocks

Syntax Type	Example
Inline	<p>Hello, @name</p>
Code Block	@{ var name = "John"; }
Expressions	@DateTime.Now
HTML + Logic Mix	HTML tags wrapped in @if logic

---

🧠 Razor vs ASP.NET Web Forms (.aspx)

Feature	Razor Syntax	ASPX Syntax
Code Injection	@name	<% = name %>
Control Flow	@if, @for	<% if(condition) { %>
File Extension	.cshtml	.aspx
Language	C# only (in Razor Pages)	VB.NET or C#
Layout Simplicity	Cleaner & compact	Verbose markup-heavy syntax

✅ Razor is designed for clarity, performance, and maintainability.

---

🧬 Razor Directives

Directive	Purpose
@page	Marks a Razor Page (used in ASP.NET Core)
@model	Declares the view model
@using	Imports a namespace
@inherits	Specifies base class for page
@functions	Declares helper methods

---

📘 Best Practices for Razor Pages

✅ Do:

• Keep logic minimal in views (use PageModel or Controller)
• Use @Html.DisplayFor, @Html.EditorFor for model-driven UIs
• Use @await for asynchronous method calls

❌ Avoid:

• Putting complex C# logic in .cshtml files
• Mixing too much HTML inside @{ ... } blocks
• Using ViewBag for strongly-typed models (prefer @model)

---

📌 Summary – Recap & Next Steps

Razor simplifies dynamic content generation in ASP.NET by mixing C# and HTML elegantly. It’s the preferred syntax in ASP.NET Core, Razor Pages, and MVC Views due to its readability and maintainability.

🔍 Key Takeaways:

• Razor uses @ to switch from HTML to C#
• Razor is cleaner and more modern than Web Forms
• It supports full C# syntax, including loops and conditions

⚙️ Real-world Use Cases:

• Generating dynamic user dashboards
• Templating product listings, tables, or charts
• Building form-driven, model-bound UI in ASP.NET Core

---

❓ FAQs – Razor Introduction

---

❓ What is Razor used for in ASP.NET?
✅ Razor is used to render HTML markup with embedded C# logic dynamically.

---

❓ Is Razor only for ASP.NET Core?
✅ No. Razor works in ASP.NET Web Pages, ASP.NET MVC, and ASP.NET Core.

---

❓ Can I use JavaScript inside Razor pages?
✅ Yes. Razor is only interpreted server-side. JS is served normally as part of HTML.

---

❓ What’s the file extension for Razor?
✅ Razor views use .cshtml (C#) or .vbhtml (VB.NET).

---

Share Now :