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:
C#1var builder = WebApplication.CreateBuilder(args); 2builder.Services.AddRazorPages(); 3var app = builder.Build(); 4app.MapRazorPages(); 5app.Run();
C#1var builder = WebApplication.CreateBuilder(args);
C#1builder.Services.AddRazorPages();
C#1var app = builder.Build();
C#1app.MapRazorPages();
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.
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, XML1@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>
@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:
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}
PageModel
and holds the logic for our Razor Page.Now, let's see how data binding works. We’ve already seen it briefly in Index.cshtml
:
HTML, XML1<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:
ASP.NET Core
Program.cs
filePageModel
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!