Introduction to Razor Pages

Related learning

  • Course

    Learn ASP.NET

    Learn how to build fast, secure, and maintainable web apps with ASP.NET and the Razor Pages architecture.
    • With Certificate
    • Intermediate.
      17 hours
  • Skill path

    Build Web Apps with ASP.NET

    Jumpstart your career with this skill path, first by learning the C# language, then building web apps with ASP.NET Core and the Razor Pages.
    • Includes 7 Courses
    • With Certificate
    • Intermediate.
      41 hours

Razor Syntax

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>

The @page Directive

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>

Razor Markup

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:

  1. Anything immediately following the @ is assumed to be C# code.

  2. Code blocks must appear within @{ ... } brackets.

  3. 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>

Razor Conditionals

Conditionals in Razor code can be written pretty much the same way you would in regular C# code. The only exception is to prefix the keyword if with the @ symbol. Afterward, any else or else if conditions doesn’t need to be preprended with the @ symbol.

// if-else if-else statment:
@{ var time = 9; }


@if (time < 10) 
{
  <p>Good morning, the time is: @time</p>
} 
else if (time < 20) 
{
  <p>Good day, the time is: @time</p>
}
else 
{
  <p>Good evening, the time is: @time</p>
}

Razor Switch Statements

In Razor Pages, a switch statement begins with the @ symbol followed by the keyword switch. The condition is then written in parentheses and finally the switch cases are written within curly brackets, {}.

@{ string day = "Monday"; }
@switch (day)
{
  case "Saturday":
    <p>Today is Saturday</p>
    break;
  case "Sunday":
    <p>Today is Sunday</p>
    break;
  default:
    <p>Today is @day... Looking forward to the weekend</p>
    break;
}

Razor For Loops

In Razor Pages, a for loop is prepended by the @ symbol followed by a set of conditions wrapped in parentheses. The @ symbol must be used when referring to C# code. 

@{
  List<string> avengers = new List<string>()
  {
    "Spiderman",
    "Iron Man",
    "Hulk",
    "Thor",
  };
}




<h1>The Avengers Are:</h1>


@for (int i = 0; i < @avengers.Count; i++)
{
  <p>@avengers[i]</p>
}

Razor Foreach Loops

In Razor Pages, a foreach loop is prepended by the @ symbol followed by a set of conditions wrapped in parentheses. Within the conditions, we can create a variable that will be used when rendering its value on the browser. 

@{
  List<string> avengers = new List<string>()
  {
    "Spiderman",
    "Iron Man",
    "Hulk",
    "Thor",
  };
}




<h1>The Avengers Are:</h1>


@foreach (var avenger in avengers)
{
    <p>@avenger</p>
}

Razor While Loops

A while loop repeats the execution of a sequence of statements as long as a set of conditions is true, once the condition becomes false we break out of the loop.

When writing a while loop, we must prepend the keyword while with the @ symbol and write the condition within parentheses. 

@{ int i = 0; }


@while (i < 5)
{
  <p>@i</p>
  i++;
}

Learn more on Codecademy

  • Course

    Learn ASP.NET

    Learn how to build fast, secure, and maintainable web apps with ASP.NET and the Razor Pages architecture.
    • With Certificate
    • Intermediate.
      17 hours
  • Skill path

    Build Web Apps with ASP.NET

    Jumpstart your career with this skill path, first by learning the C# language, then building web apps with ASP.NET Core and the Razor Pages.
    • Includes 7 Courses
    • With Certificate
    • Intermediate.
      41 hours
Next