Learn how to use Razor syntax in order to build dynamic web pages with ASP.NET Core's framework: Razor Pages!

Razor Pages Syntax I


All C# expressions are preceded with the character "**@**". For example: 

```html
<h1>@DateTime.Now.ToShortDateString()</h1>
```


If your C# code needs spaces, then it must be wrapped in parentheses:

```html
<p>Last week this time: @(DateTime.Now - TimeSpan.FromDays(7))</p>
```



We can use code blocks: 
```csharp
@{ // C# code }
```
 if our code exceeds one line or we want to declare variables.


```html
@{
  int num1 = 6;
  int num2 = 4;
  int result = num1 + num2;
}

<h3> The result of @num1 + @num2 is: @result</h3>
```

Result:


```html
<h3> The result of 6 + 4 is: 10</h3>
```

Writing C# in a Razor Page

Great job! We learned a lot in this lesson. We were able to re-create certain HTML markup using Razor syntax and saw how Razor Pages can be useful by reducing repetitive code. 

Let’s summarize what we’ve learned so far:

- Razor is a markup syntax for embedding server-based code into webpages. It consists of Razor markup, C#, and HTML. Files containing Razor generally have a .cshtml file extension.

- In order to use the Razor Pages project type in ASP.NET, each Razor page (file ending in .cshtml) must start with the `@page` directive.

- In ASP.NET Razor syntax, C# code is denoted with an "at" symbol: @.
 - If the code is a single expression, no spaces, no additional syntax is needed. The expression immediately follows the @.
 - If the code is a single line with spaces, it should be surrounded by parentheses, ( ).
 -If the code is multiple lines or contains a mix of C# and HTML, it should be surrounded by curly braces, { }


- In ASP.NET Razor syntax, an if control structure is written with a code block, where the first line contains `@if` and a set of conditions. Any following else-if and else conditions do not need @ symbols.

- In ASP.NET Razor syntax, a `@for` control structure is written with a code block, where the first line contains `@for` and a set of conditions.

- In ASP.NET Razor syntax, a `@foreach` control structure is written with a code block, where the first line contains `@foreach` and a set of conditions.

- In ASP.NET Razor syntax, a `@while` control structure is written with a code block, where the first line contains `@while` and a condition.

In the following lesson, we’ll explore the page model and its relation to the view files we’ve been using throughout this lesson. 


Review

Wouldn’t it be great if you could get started creating a web application by just running a few commands? Well, that’s possible now with Razor Pages!! 


When it comes to building web applications with ASP.NET we’re usually able to take two approaches: we can take an [MVC (Model-View-Controller) approach](https://www.codecademy.com/articles/mvc), or more recently, use _Razor Pages_. Whether one approach is better than the other really depends on what you’re building and its complexity, but let’s look at some reasons why we should use Razor Pages.

Compared to Razor Pages, the MVC pattern uses a more complex folder structure and requires a deeper understanding of more web framework concepts in order to get started.

With Razor Pages, we don’t have to worry about Controllers, Actions, and Views the same way we would in an MVC app. Now, we use what we call _Pages_ and _PageModels_. Everything related to a specific "Page" is in one place and PageModels takes care of the processing logic for the said page (We will go more in-depth into these later in the course). This makes applications very cohesive and requires fewer additional concepts to learn. Throughout this course, we will be referring to _Pages_ as "view pages" and they will have a _cshtml_ extension to their filename (i.e. **Home.cshtml**). _PageModels_ will be referred to as a "model page" and will have a _cshtml.cs_ extension to their filename (i.e. **Home.cshtml.cs**).

Razor Pages also has a much more organized file structure; instead of having a whole chain of events in different files when working with MVC, we now simply have a Razor View file, where we can write C# code together with HTML, and a code-behind file (the PageModel) to handle the logic of what the user interacts with.  

What this essentially means is that now, there is a direct link between the URL of a web page and the physical file location of that page on the server.

The URL `https://LearnRazorPages.com/Home/Welcome`

will use the **Welcome.cshtml** file located in the **/Home** folder of the root **/Pages** folder. 

![RazorPagesURL](https://content.codecademy.com/courses/asp-dot-net/razor-syntax-url.png)

![RazorPageDirectory](https://content.codecademy.com/courses/asp-dot-net/razor-syntax-file-explorer.png)

In essence, Razor is a view templating engine that’s currently supported in ASP.NET. With Razor, we’re able to create dynamic web pages and write C# and HTML together using Razor syntax. 

Introduction to Razor Pages

Let’s not forget about loops! 

There are a number of different types of loops in C# that can be written in Razor syntax. Let’s say we have a list of names we’ll be looping over:

```csharp
@{
  List<string> names = new List<string>()
  {
    "Scott Allen",
    "James Dorf",
    "Tim Alston",
    "Jane Rashid",
    "John Doe"
  };
}
```

We can iterate over the names with a `for` loop, which is useful when we need to keep track of how far in the looping process we are:

```
<ul>
  @for (int i = 0; i < names.Count; i++)
  {
    <li>@names[i]</li>
  }
</ul>
```


Resulting HTML from the above example:
```html
<ul>
  <li>Scott Allen</li>
  <li>James Dorf</li>
  <li>Tim Alston</li>
  <li>Jane Rashid</li>
  <li>John Doe</li>
</ul>
```

Similarly, we can use a `foreach` loop:

```
<ul>
  @foreach(string name in names)
  {
    <li>@name</li>
  }
</ul>
```

Resulting HTML from the above example:
```html
<ul>
  <li>Scott Allen</li>
  <li>James Dorf</li>
  <li>Tim Alston</li>
  <li>Jane Rashid</li>
  <li>John Doe</li>
</ul>
```

Lastly, we can iterate over the names with a `while` loop:
```
<ul>
  @{ 
    int counter = 0;
  }
  @while(counter < names.Count)
  {
    <li>@names[counter++]</li>
  }
</ul>
```

Resulting HTML from the above example:
```html
<ul>
  <li>Scott Allen</li>
  <li>James Dorf</li>
  <li>Tim Alston</li>
  <li>Jane Rashid</li>
  <li>John Doe</li>
</ul>
```

Working with Loops

Similar to if statements, `switch` cases operate the same way &mdash; by prefixing the keyword with the “@“ sign:

```html
@{ int number = 2 }

@switch (number)
{
  case 1: <h1>The value is 1!</h1>
  break;
  case 2: <h1>The value is 2!</h1>
  break;
  default: ...
}
```

In the code above we're evaluating an expression, `number`, and simply comparing the values to each case. If a value matches the expression, then the associated code block will be executed. 

In this case, since the variable `number` is equal to 2, then the following HTML would be executed: 

```html
<h1>The value is 2!</h1>
```

Conditionals in Razor Pages: Switch Statements

So how does a view page in a Razor app work? In order for a file to behave as a Razor view page, the first line in the file must be `@page`. The `@page` directive indicates that the file is a Razor Page and the ASP.NET compiler will treat it as such. This means that we can now write C# code in our view page and HTML markup. 

When a user navigates to a web page, the web browser submits a "request" to the web server to return the contents of the web page so that it can display it to the user. That request is handled by Razor Pages, and specifically, the Razor engine that looks at the view file (.cshtml) of the specific page the user wishes to see and produces the HTML content based on the code implemented in that view.

In order for the Razor engine to interpret code as C# instead of HTML, we must prepend the keyword with the "**@**" symbol, otherwise, it will read the code as HTML. We’ll look at a few different ways we can write C# in our view page in the next exercise. 

Structure of a Razor View Page

You can use the if statement in your Razor code pretty much the same way you would in regular C# code &mdash; just prefix the keyword with the "**@**" sign:

```html
@{
  int value = 4;
}

@if (value % 2 == 0)
{
  <p> The value is even!</p> 
}
```

When writing if/else statements, we don’t need to prepend the `else if` or `else` lines with an "**@**" sign:

```html
@if (value % 2 == 0)
{
  <p>The value was even.</p>
}
else if (value >= 1337)
{
  <p>The value is large.</p>
}
else
{
  <p>The value is odd and small.</p>
}
```