Exploring Your First Razor Page Application

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.

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.

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:

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
var app = builder.Build();
app.MapRazorPages();
app.Run();

1. CreateBuilder: This line initializes a new web application.
   C#

   var builder = WebApplication.CreateBuilder(args);

2. AddRazorPages: This adds Razor Pages services to the dependency injection (DI) container.
   C#

   builder.Services.AddRazorPages();

3. Build: This compiles the builder into a functional app.
   C#

   var app = builder.Build();

4. MapRazorPages: This maps Razor Pages endpoints to the app, allowing it to serve these pages.
   C#

   app.MapRazorPages();

5. Run: This runs the application.
   C#

   app.Run();

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

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:

@page
@model IndexModel
<!DOCTYPE html>
<html>
<head>
    <title>My Razor Page</title>
</head>
<body>
    <h1>Hello, @Model.Message</h1>
</body>
</html>

1. @page: This directive declares the file as a Razor Page.
2. @model IndexModel: This binds the Razor Page to the PageModel class, which we'll create next.
3. 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.

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

using Microsoft.AspNetCore.Mvc.RazorPages;

public class IndexModel : PageModel
{
    public string Message { get; private set; } = "World";

    public void OnGet()
    {
        // Page load logic here
    }
}

1. IndexModel Class: This class inherits PageModel and holds the logic for our Razor Page.
2. Message Property: This property holds the message we want to display on the page.
3. 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.

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

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

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!