ASP.NET Razor Syntax Cheat Sheet

Razor Syntax allows you to embed code (C#) into page views through the use of a few keywords (such as “@”), and then have the C# code be processed and converted at runtime to HTML. In other words, rather than coding static HTML syntax in the page view, a user can code in the view in C# and have the Razor engine convert the C# code into HTML at runtime, creating a dynamically generated HTML web page.

@page
@model IndexModel
<h2>Welcome</h2>
 
<ul>
  @for (int i = 0; i < 3; i++)
  {
    <li>@i</li>
  }
</ul>

In a Razor view page (.cshtml), the @page directive indicates that the file is a Razor Page.

In order for the page to be treated as a Razor Page, and have ASP.NET parse the view syntax with the Razor engine, the directive @page should be added at the top of the file.

There can be empty space before the @page directive, but there cannot be any other characters, even an empty code block.

@page
@model IndexModel
 
<h1>Welcome to my Razor Page</h1>
<p>Title: @Model.Title</p>

The page model class, i.e. the data and methods that hold the functionality associated with a view page, is made available to the view page via the @model directive.

By specifying the model in the view page, Razor exposes a Model property for accessing the model passed to the view page. We can then access properties and functions from that model by using the keyword Model or render its property values on the browser by prefixing the property names with @Model, e.g. @Model.PropertyName.

@page
@model PersonModel
 
// Rendering the value of FirstName in PersonModel
<p>@Model.FirstName</p>
 
<ul>
 // Accessing the value of FavoriteFoods in PersonModel
 @foreach (var food in Model.FavoriteFoods)
 {
  <li>@food</li>
 }
</ul>

Razor pages use the @ symbol to transition from HTML to C#. C# expressions are evaluated and then rendered in the HTML output. You can use Razor syntax under the following conditions:

• Anything immediately following the @ is assumed to be C# code.
• Code blocks must appear within @{ ... } brackets.
• A single line of code that uses spaces should be surrounded by parentheses ( ).

@page
@model PersonModel
 
// Using the `@` symbol:
<h1>My name is @Model.FirstName and I am @Model.Age years old </h1>
 
// Using a code block:
@{
 var greet = "Hey threre!";
 var name = "John";
 <h1>@greet I'm @name!</h1>
}
 
// Using parentheses:
<p>Last week this time: @(DateTime.Now - TimeSpan.FromDays(7))</p>

In Razor Pages, you can use the ViewData property to pass data from a Page Model to its corresponding view page, as well as share it with the layout, and any partial views.

ViewData is a dictionary that can contain key-value pairs where each key must be a string. The values can be accessed in the view page using the @ symbol.

A huge benefit of using ViewData comes when working with layout pages. We can easily pass information from each individual view page such as the title, into the layout by storing it in the ViewData dictionary in a view page:

@{ ViewData["Title"] = "Homepage" }

We can then access it in the layout like so: ViewData["Title"]. This way, we don’t need to hardcode certain information on each individual view page.

// Page Model: Index.cshtml.cs
public class IndexModel : PageModel
{
 public void OnGet()
 {
  ViewData["Message"] = "Welcome to my page!";
  ViewData["Date"] = DateTime.Now();
 }
}
 
// View Page: Index.cshtml
@page
@model IndexModel
 
<h1>@ViewData["Message"]</h1>
<h2>Today is: @ViewData["Date"]</h2>