What is Razor Syntax?

At first, the name razor syntax can sound off-putting, but it is not a hard concept to understand. You will find that using razor syntax in web development is another effective and efficient way to document your code.

What Is Razor Syntax

Razor syntax is a method that you use in Visual Studio to integrate backend code such as the C# programming language directly within the HTML code used to display web pages in the web browser.

We prefix an @ symbol in the front of a line of backend code to indicate it as razor syntax. And for multiple lines of code, you will use '@{ }' where the code is inserted between the curly braces.

How Does Razor Syntax Work

You’ll write razor syntax in a CSHTML file or razor file, which corresponds to a view file where both C# and HTML code are alongside each other.

When you run a program in Visual Studio and inspect the web page, you will see the result of razor syntax as backend code manipulating the front end. You should see just HTML and no C# code because it has been transformed into corresponding HTML.

For example, I used razor syntax alongside HTML code to embed C# within my blog application. Below is an example from the start of an abbreviated Create.cshtml file which handles the view for creating a new blog category.

@using CEBlog.Services  
@inject IImageService imageService  
@model IEnumerable<'CEBlog.Models.Blog'>  
@{  
    ViewData["Title"] = "Index";  
    Layout = "~/Views/Shared/_LayoutForAdmin.cshtml";  
}

Index  
  
    Create New  
  
…

The first couple of lines show an @ symbol in from of C# code which introduces a namespace, a service, a model, and display variable.

In the following example, you will also see a @foreach statement which will render to HTML code, thereby reducing duplication of code and saving time in the application for you the developer.

...  
      
      
        @foreach (var blog in Model)  
        {  
              
                  
                    @Html.DisplayFor(modelItem => blog.Name)  
                  
                  
                    @Html.DisplayFor(modelItem => blog.Description)  
                  
                  
                    @Html.DisplayFor(modelItem => blog.Created)  
                  
                  
                    @Html.DisplayFor(modelItem => blog.Updated)  
                  
                  
                      
                   
                  
                    Edit |  
                    Details |  
                    Delete  
                  
              
        }

Benefits of Razor Syntax

Simplified HTML generation: you can embed C# code directly into HTML, making it easier to generate dynamic content.
Easy integration of C# code: the @ symbol enables the transition between HTML and C# code, allowing you to write server-side logic within a view file.
Streamlined and efficient coding experience: No need to explicitly denote server blocks within the HTML code

Tip: To comment code using razor syntax, use @* *@. The comment is inserted between the asterisks. Comments in this format will not be visible in the rendered output.

Conclusion - Razor Syntax

There you go! We went over razor syntax, how it works, and its benefits. You should now be able to confidently implement razor syntax in the views of your projects to speed up your workflow and be more efficient.

If you like this content, please don’t hesitate to leave a comment in the comment section below. Also, feel free to subscribe to this blog so that you can get updates to this blog whenever new content is added.

What is Razor Syntax?