Mastering Razor: A Complete Guide to Syntax, Use Cases, Workflow, and Getting Started

What is Razor?

Razor is a lightweight, powerful, and flexible markup syntax used for dynamic web page generation in the .NET ecosystem. It allows developers to seamlessly integrate server-side C# code into HTML markup, making it an essential tool for building dynamic web pages with ASP.NET Core.

Razor is not just a templating language but also an integral part of the ASP.NET Core framework. It helps developers build both web applications and APIs by embedding server-side code directly into the web page’s HTML structure, thus enabling dynamic content rendering. Razor is used predominantly in ASP.NET MVC Views and Razor Pages, and it provides a more efficient way to manage dynamic content compared to older technologies like WebForms.

Razor syntax is simple and clean, which makes it easy for developers to maintain code. It is characterized by the use of the @ symbol to embed C# code in HTML. This allows the application to interact with databases, user input, or session data, and present relevant content to users.

For example:

<h1>@Model.Title</h1>
<p>The current time is: @DateTime.Now</p>

In the above example:

The @Model.Title expression dynamically renders data passed from the controller to the view.
The @DateTime.Now expression inserts the current date and time.

Razor is compiled into HTML on the server side before being sent to the browser, making it efficient for rendering dynamic data and ensuring fast response times.

What are the Major Use Cases of Razor?

Razor is highly versatile and finds use in a variety of applications, particularly in web development. Some of the primary use cases of Razor include:

Dynamic Web Pages with ASP.NET Core MVC:
Razor is primarily used in MVC (Model-View-Controller) applications to generate dynamic web pages. The controller handles business logic, retrieves data from databases, and passes it to the Razor view. The view then dynamically renders this data as HTML to the browser. This separation of concerns allows for maintainable and scalable applications.
Razor Pages for Simpler Web Applications:
Introduced in ASP.NET Core, Razor Pages simplifies the MVC pattern by combining the controller and view into a single page-focused model. Razor Pages are great for simple applications where you don’t need the complexity of controllers. Each Razor Page is tied to a handler method, making it simpler to manage and understand.
Server-Side Rendering (SSR):
Razor is frequently used for server-side rendering of HTML content. In SSR, the server generates the entire HTML document, including dynamic data, before sending it to the client. This is useful for improving SEO, ensuring fast load times, and providing content to users even if they have JavaScript disabled in their browsers.
Data-Driven Websites:
Websites that require fetching data from a database (e.g., user profiles, product lists, blog posts) can use Razor to present this data in an organized way. The data fetched from the database is passed to the Razor view, where it is embedded into the HTML structure.
Forms and Data Submission:
Razor is also used in form-based applications where user input is processed and displayed dynamically. For instance, a user fills out a contact form or submits a survey, and the results are processed server-side using Razor. The server can send back a response or confirmation, such as showing the submitted data or a thank-you message.
Dynamic Content Rendering:
Razor allows dynamic rendering of content, such as displaying user-specific data (e.g., personalized welcome messages, dashboards) and other time-sensitive or context-based content. This is common in applications like online stores, user portals, and real-time reporting dashboards.
Email Templates:
Razor can also be used to generate dynamic email templates. It allows you to embed dynamic content such as user names, product recommendations, or personalized messages directly into the HTML of the email. This is especially useful in transactional emails like order confirmations, welcome emails, or password reset instructions.
Complex Reports and Dashboards:
In enterprise-level applications, Razor is often used to generate reports or dashboards based on user-specific data. Developers can use Razor to process large datasets and present them in easy-to-read tables, charts, or graphs.
API Responses with Dynamic HTML:
Razor can be used to generate dynamic HTML content for API responses. If your web API returns HTML, Razor can process data dynamically and return it as part of the response. This is useful for scenarios where server-side HTML rendering is needed rather than just JSON or XML data.

How Razor Works Along with Architecture?

The architecture of Razor revolves around its deep integration with the ASP.NET Core ecosystem. Razor views and Razor Pages are processed on the server side, and they generate the HTML that is eventually sent to the client’s browser.

The Razor engine functions as part of the ASP.NET Core pipeline and integrates seamlessly with the MVC or Razor Pages frameworks. Let’s break down how Razor fits into the overall architecture of an ASP.NET Core application:

MVC and Razor Views:
- Model: Represents the application’s data. This could be anything from a user profile to a list of products. The controller retrieves data and passes it to the Razor view.
- View: The Razor view (a .cshtml file) is responsible for rendering the data passed from the controller into HTML. Razor code is written in this view to dynamically generate the final markup.
- Controller: Handles user requests, processes business logic, retrieves data, and passes it to the view. For example, if a user requests to view a product page, the controller retrieves the relevant product data from the database and sends it to the Razor view.
Razor Pages Architecture:
Razor Pages simplifies the MVC pattern by combining the controller and view logic into a single page model. Each Razor Page consists of:
- A Razor Page file (.cshtml).
- A Page Model file (.cshtml.cs) that contains handler methods. This is where the page-specific logic is executed.
For example, when a user visits a page such as /Products/Details, the Razor Page will process the request, execute any handler logic in the Page Model, and then render the appropriate Razor view.
The Request Pipeline:
Razor views are processed within the ASP.NET Core request pipeline. The pipeline consists of various middleware components that handle tasks such as routing, authentication, authorization, and rendering content. Razor views are processed during the “view rendering” phase of the pipeline.
- The Request is routed through the pipeline.
- If the request matches a route tied to a Razor Page or MVC action, Razor executes the view associated with the route.
- The Razor engine compiles the .cshtml file into HTML and returns the response to the client’s browser.
Dynamic Compilation:
Razor views are typically compiled on the server at runtime. When a request is made, ASP.NET Core compiles the Razor pages and views into executable code, processes the C# logic, and outputs the final HTML. This compilation step happens quickly, which allows Razor to provide dynamic content efficiently.

What Are the Basic Workflow of Razor?

The basic workflow of Razor in an ASP.NET Core application typically follows these steps:

Request:
The process starts when the user sends a request to the server. This could be a request for a web page or data via an HTTP method such as GET or POST.
Routing:
The request is routed by ASP.NET Core’s routing system, which determines which controller or Razor Page is responsible for handling the request.
Controller/Handler Execution:
- In an MVC application, the controller retrieves any necessary data from the model (e.g., a database or service) and passes it to the Razor view.
- In a Razor Pages application, the page handler (a method in the Page Model) retrieves the necessary data.
View Rendering:
The Razor view (.cshtml file) processes any C# code embedded within the HTML using Razor syntax. It evaluates expressions, runs logic, and outputs dynamic content, such as user-specific data, product details, or current time.
HTML Response:
The final HTML, generated by Razor, is returned as the response. This HTML is then sent to the client’s browser, where it is rendered for the user.
Client Interaction:
The client interacts with the page, submitting forms, clicking links, or making additional requests. This interaction may trigger additional routing, rendering, or logic, continuing the cycle.

Step-by-Step Getting Started Guide for Razor

Here’s a comprehensive guide on how to get started with Razor in an ASP.NET Core application:

Step 1: Set Up the Project

Use Visual Studio or the .NET CLI to create a new ASP.NET Core MVC or Razor Pages project.

For MVC:

dotnet new mvc -n RazorMvcApp

For Razor Pages:

dotnet new webapp -n RazorPagesApp

Step 2: Create a Razor View

For MVC, add a new Razor View to the Views folder. For example, create Index.cshtml under Views/Home.

@{
    ViewData["Title"] = "Home Page";
}

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

Step 3: Set Up the Controller (MVC)

In the Controllers folder, open the HomeController.cs file and set up the Index action to return the view.

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}

Step 4: Add Data from the Model

You can pass dynamic data from the controller to the view. For example, in HomeController, pass a model with a list of products:

public IActionResult Index()
{
    var products = new List<string> { "Product A", "Product B", "Product C" };
    return View(products);
}

In the Index.cshtml file, display the data:

<ul>
    @foreach (var product in Model)
    {
        <li>@product</li>
    }
</ul>

Step 5: Run the Application

Use Visual Studio or the .NET CLI to run your application and view the dynamically rendered Razor page.

dotnet run