Comprehensive Guide to Razor Syntax in ASP.NET Core

Learn how to use Razor syntax to create dynamic and interactive web applications in ASP.NET Core.

Table of Contents

• Introduction
• What is Razor Syntax?
• Razor Syntax Basics
• Razor Expressions
• Razor Directives
• Working with Data in Razor
• Loops and Conditions in Razor
• Razor Functions
• Combining Razor with HTML
• Best Practices for Razor Syntax
• Conclusion

Introduction

Razor is a powerful and lightweight syntax used in ASP.NET Core for embedding server-side code into web pages. It simplifies the development of dynamic web applications by seamlessly integrating C# code with HTML markup. In this guide, we’ll explore the core concepts of Razor syntax, its features, and best practices for building robust web applications.

The following diagram illustrative Guide to learn Razor Syntax for ASP.NET Core:

What is Razor Syntax?

Razor is a markup syntax used in ASP.NET Core for creating dynamic web pages. It allows developers to write C# code directly in HTML, enabling seamless interaction between the front end and back end. Razor files typically have extensions like .cshtml or .razor.

Razor Syntax Basics

Razor uses the @ symbol to switch between HTML and C# code. This makes it intuitive and easy to embed dynamic content within a static HTML structure. For example:

<h1>Welcome, @UserName!</h1>
<p>The current date and time is: @DateTime.Now</p>

In this snippet, @UserName and @DateTime.Now dynamically render content from the server.

Razor Expressions

Razor expressions are used to evaluate and render C# code within HTML. Common examples include:

• Inline Expressions: Render the result of a C# expression, e.g., @(2 + 2).
• Variables: Display variable values, e.g., @message.
• Method Calls: Invoke C# methods, e.g., @DateTime.Now.ToShortDateString().

Razor Directives

Directives in Razor are keywords that provide instructions to the Razor engine. Some common directives include:

• @model: Specifies the type of data passed to the view.
• @using: Includes namespaces for use in Razor pages.
• @inject: Injects dependencies into the page.
• @functions: Defines reusable C# functions within the Razor file.
• @section: Defines sections for layout pages.

Working with Data in Razor

Razor integrates seamlessly with data models. By using the @model directive, you can bind data to the view:

@model MyApp.Models.User

<h1>Welcome, @Model.Name!</h1>
<p>Email: @Model.Email</p>

Loops and Conditions in Razor

Razor allows the use of conditional statements and loops for dynamic content:

Conditional Statements

@if (isLoggedIn)
{
    <p>Welcome back, @UserName!</p>
}
else
{
    <p>Please log in to continue.</p>
} 

Loops

@foreach (var product in Model.Products)
{
    <p>@product.Name - @product.Price</p>
}

Razor Functions

The @functions directive allows you to define reusable C# functions within the Razor file:

@functions {
    public string FormatDate(DateTime date)
    {
        return date.ToString("MMMM dd, yyyy");
    }
}

<p>Today's date: @FormatDate(DateTime.Now)</p>

Combining Razor with HTML

One of Razor’s strengths is its ability to blend seamlessly with HTML. For example:

<ul>
    @foreach (var item in Items)
    {
        <li>@item</li>
    }
</ul> 

Best Practices for Razor Syntax

• Use @model for strongly-typed views.
• Minimize inline C# logic in Razor views.
• Leverage partial views and components for reusability.
• Organize Razor code using directives and comments.
• Optimize loops and conditions for readability and performance.

Conclusion

Razor syntax is a versatile and powerful tool for creating dynamic web applications in ASP.NET Core. By mastering its features and following best practices, developers can build robust, maintainable, and user-friendly applications.

© 2025 Sandeep Mhaske. All rights reserved.