Exploring Your First Razor Page Application

Lesson 1

Introduction to Razor Pages

Welcome to the first lesson of our "Introduction to Razor Pages" course. In this course, we'll delve into building the very first web application using Razor Pages in ASP.NET Core. Razor Pages provide a simpler way to build web apps compared to the traditional MVC pattern, which makes it an excellent choice for beginners.

First, let’s get a quick overview of what Razor Pages are and why we use them.

Razor Pages are part of the ASP.NET Core framework. They focus on page-based scenarios, making it easier to organize the structure of your web applications. Razor Pages come with built-in support for page routing, making it straightforward to manage how users navigate your app.

In this lesson, you'll learn how to set up your first Razor Page application and understand how it works.

Understanding Razor Pages Project Structure

Let's look at the project's folder structure. The Pages folder contains all your Razor Pages (.cshtml files) and their related code-behind files (.cshtml.cs) - cshtml files correspond to the HTML code the will be rendered, and cshtml.cs files provide a C#-based logic that supports these cshtml files. The project also includes a Program.cs file, which serves as the entry point for the application.

Understanding the Program.cs File

The Program.cs file is essential as it configures and runs your application. Let's look at the core components and understand each part.

Here’s a simplified version of the Program.cs file we will work with:

C#
1var builder = WebApplication.CreateBuilder(args);
2builder.Services.AddRazorPages();
3var app = builder.Build();
4app.MapRazorPages();
5app.Run();

CreateBuilder: This line initializes a new web application.

C#
1var builder = WebApplication.CreateBuilder(args);

AddRazorPages: This adds Razor Pages services to the dependency injection (DI) container.
```
C#
1builder.Services.AddRazorPages();
```
Build: This compiles the builder into a functional app.
```
C#
1var app = builder.Build();
```
MapRazorPages: This maps Razor Pages endpoints to the app, allowing it to serve these pages.
```
C#
1app.MapRazorPages();
```
Run: This runs the application.
```
C#
1app.Run();
```

When you run the application, you will also see the preview of your app (/ endpoint) in the preview tab of your CodeSignal IDE.

Creating and Modifying a Razor Page

Next, let's create our own Razor Page. We’ll start with Pages/Index.cshtml.

Go to the Pages directory and open the file named Index.cshtml. Here is what you see there:

HTML, XML
1@page
2@model IndexModel
3<!DOCTYPE html>
4<html>
5<head>
6    <title>My Razor Page</title>
7</head>
8<body>
9    <h1>Hello, @Model.Message</h1>
10</body>
11</html>

@page: This directive declares the file as a Razor Page.
@model IndexModel: This binds the Razor Page to the PageModel class, which we'll create next.
HTML Content: The HTML structure of the page with Razor syntax (@Model.Message) to display dynamic content.

Let's now create the code-behind file to support this Razor Page.

Implementing Server-Side Logic

In the Pages folder, open the file named Index.cshtml.cs. It contains the following code:

C#
1using Microsoft.AspNetCore.Mvc.RazorPages;
2
3public class IndexModel : PageModel
4{
5    public string Message { get; private set; } = "World";
6
7    public void OnGet()
8    {
9        // Page load logic here
10    }
11}

IndexModel Class: This class inherits PageModel and holds the logic for our Razor Page.
Message Property: This property holds the message we want to display on the page.
OnGet Method: This method runs when the page is accessed. Currently, it doesn't perform any additional logic, but it’s a place for you to add custom functionality in the future.

Binding Data and Displaying It

Now, let's see how data binding works. We’ve already seen it briefly in Index.cshtml:

HTML, XML
1<h1>Hello, @Model.Message</h1>

@Model.Message: This Razor syntax binds the Message property from the IndexModel class to the HTML content. When the page loads, it will display "Hello, World."

Lesson Summary

In this lesson, we covered:

An introduction to Razor Pages and ASP.NET Core
Creating a new Razor Pages project
Understanding and configuring the Program.cs file
Creating and modifying a Razor Page
Implementing server-side logic with PageModel
Binding data and displaying it dynamically

You now have the foundational knowledge to start building web applications with Razor Pages. In the upcoming practice exercises, you will reinforce these concepts by working through various examples and scenarios. Keep practicing, and let’s move forward to mastering Razor Pages!

Enjoy this lesson? Now it's time to practice with Cosmo!

Practice is how you turn knowledge into actual skills.