Razor Syntax (@) ASP.NET Tutorial

Welcome to this comprehensive guide on Razor Syntax, a powerful feature of ASP.NET that simplifies HTML and server-side code! In this tutorial, we'll dive deep into the world of Razor, covering everything from the basics to advanced examples.

💡 What is Razor Syntax?

Razor Syntax is a template engine used in ASP.NET to write HTML markup with embedded C# code. It makes it easier to create dynamic web pages by reducing the amount of server-side code required.

🚀 Getting Started with Razor

Let's start by creating a new ASP.NET Core Web Application:

bash

dotnet new webapp -n MyFirstRazorApp

Navigate to the new project folder:

bash

cd MyFirstRazorApp

Now, let's create a simple Razor page:

bash

dotnet add page -n Welcome

Open the newly created Pages/Welcome.cshtml file. You'll see a mix of HTML and C# code. Let's break it down:

csharp

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>Welcome</title>
</head>
<body>
    <h1>Welcome to ASP.NET Core!</h1>
</body>
</html>

In the @{ ... } block, we're writing C# code that will be executed on the server. The rest is plain HTML.

💻 Basic Razor Syntax Examples

Variables

You can declare and use variables in your Razor pages:

csharp

@{
    int myNumber = 10;
}
<h1>My number is @myNumber</h1>

Loops

Razor supports basic loops like foreach:

csharp

@{
    int[] numbers = { 1, 2, 3, 4, 5 };
}
<ul>
    @foreach (int number in numbers)
    {
        <li>@number</li>
    }
</ul>

Conditional Statements

Use if, else, and else if to control the flow of your code:

csharp

@{
    int myNumber = 10;
}
@if (myNumber > 5)
{
    <h1>The number is greater than 5.</h1>
}
else
{
    <h1>The number is less than or equal to 5.</h1>
}

📝 Notes

Always start your Razor code blocks with @{ ... }
Remember to escape HTML characters using @Html.Raw()
Use @code blocks for complex C# code

🎯 Practice Time

Quick Quiz

Question 1 of 1

What does the `@{ ... }` block represent in Razor Syntax?

🛠 Advanced Razor Examples

Partials

Partials are reusable sections of HTML and Razor code. They can be used to separate common layout elements across multiple pages:

csharp

@using MyNamespace
@{
    Layout = null;
}

<h1>Header</h1>
<div class="nav">Navbar</div>

<div class="content">
    @RenderBody()
</div>

<footer>Footer</footer>

In this example, we've created a _Layout.cshtml partial that includes a common header, navbar, content area, and footer. We can include this partial in our pages:

csharp

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@include "./_Layout"

<h1>Welcome to My Page</h1>
<p>This is my page content.</p>

Tag Helpers

Tag Helpers are custom HTML tags that can generate server-side code when they are rendered. They are a great way to simplify complex server-side logic:

html

<form asp-action="Submit" method="post">
    <div>
        <label for="name">Name:</label>
        <input asp-for="Name" />
    </div>
    <button type="submit">Submit</button>
</form>

In this example, we've used the asp-action and asp-for tag helpers to generate the appropriate server-side code for a form submission.

🎯 Practice Time

Quick Quiz

Question 1 of 1

What is the purpose of a partial in Razor Syntax?

That's it for this tutorial on Razor Syntax in ASP.NET! Now, you're well-equipped to create dynamic web pages using Razor. Happy coding! 🎉