Razor Page
Razor Pages are a page-based model built into ASP.NET Core MVC.
Razor Pages are Introduced as part of .NET Core 2.0. It is a server-side rendered, page-based model for building web UI with ASP.NET core.
The Razor pages start with the @page directive.
This directive handle request directly without passing through the controller. The Razor pages may have code behind files, but it is not really a code-behind file. It is a class inherited from PageModel class.
In MVC, parts of your application are broken into folders for controller, model, and view.
The Razor Pages structure in Asp.Net Core doesn’t have separate folders and instead uses a single “Pages” folder as a route folder for all parts.
Instead of a separate controller with actions and each action representing a view, Razor Pages are a compact version MVC style that attaches the controller or view model directly to the page.
Razor pages use Razor syntax.
1. Server-Side Rendering:
Dynamically generates the HTML & CSS on the server side in response to a browser request.
The page arrives at the client side which is ready for display. All the logic and the page generation are handled on the server side.
2. Page-Based Model:
Razor pages contain two files which are “.cshtml” and “.cshtml.cs”. The “.cshtml” file contains the UI code and the “.cshtml.cs” file contains the business logic and the page model.
All the .NET Core features like dependency injection, middleware, and routing is available in the Razor Pages application.
3. Razor Syntax:
It is a simple programming syntax for embedding server-based code in a web page. Razor syntax combines HTML and C# to define the dynamic rendering logic.
We can use C# variables and methods within HTML markup to generate dynamic web content on the server at runtime.
Creating ASP.NET Core Razor Pages Application
In Visual Studio 2022 while creating New Core Application choose following Template
Once the Project is created, we can see the following structure in Solution Explorer
Let us understand the project structure in detail.
wwwroot: It is the project’s web root directory. Like other .NET core projects, wwwroot folder contains all the static files .css, .js, and bootstrap files.
Pages: All the Razor pages should be under the Pages folder or within a sub-directory under the Pages folder. Each Razor page contains two files. “.cshtml” and “.cshtml.cs”. The “.cshtml” file contains HTML markup with C# code using Razor syntax. The “.cshtml.cs” file has the C# code that handles page events.
Shared: Shared folder under the Pages folder contains “_Layout.cshtml”. It is the default layout for the ASP.NET core app. It includes an app header, footer, and navigation.
appsettings.json: Contains configuration data (connection string etc.) like other .NET core projects “_ViewImports.cshtml”, and “_ViewStart.cshtml” are helper pages to get started with Razor Pages.
Lets Create a New Page for Users
Step 1: Add Navigation in _Layout Page
Step 2: Lets Add a New Page to list down Users
Right-click on the Pages folder, select Add and then select Razor Page, Name it as Users
On Next Screen Choose Razore Page - Empty, Click Add button below
On Next Screen give name and click Add button
A New Users Page we can see in Pages folder (having
We can see 3 files:
Users.cshtml for Html,
Users.cshtml.cs for Code Behind
UsersModel a predefined class act as Model for Users Page
Step 3: Create an Users class and add properties (as Entity), inside Model folder
Step 4: Creating Data Source
Instead of Sql Server, right now we are using in-memory collection as the data source.
Add dependency injection of our class in Program.cs file
Dependencies are injected through the constructor. Create a constructor which takes a parameter “List<Users>” within the “UsersModel” class.
Open UsersModel class in Pages under Users.cshtml file. Update following code there to fetch user data.
Step 6: Displaying User Listing
open Users.cshtml.cs class file inside the Pages folder
Add Model inside html file and loop of User Records
Run the application and click Users in top Nav
This show record of first user by default
To See Record of 2nd User just add query paraperter in url
http://localhost:5046/Users?id=2
