Understand ASP.NET Core Razor Pages Application

Understand ASP.NET Core Razor Pages Application

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

<li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-page="/Users">Users</a>

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

namespace FirstCoreWebApplication.Models
    public class Users
        public int Id { get; set; }
        public string FirstName { get; set; } = "";
        public string LastName { get; set; } = "";

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

using FirstCoreWebApplication.Models;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

var app = builder.Build();

Step 5: Create a Model Class
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.

using FirstCoreWebApplication.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace FirstCoreWebApplication.Pages
    public class UsersModel : PageModel
        //Create a variable to hold list of Users
        public List<Users> UserList { get; set; }

        //Constructor Taking List<Users> as a Parameter
        public UsersModel(List<Users> ListOfUsers)
            UserList = new List<Users>();
            UserList.Add(new Users() { Id = 1, FirstName = "Deepak", LastName = "Talwar" });
            UserList.Add(new Users() { Id = 2, FirstName = "Rajesh", LastName = "Kumar" });
            UserList.Add(new Users() { Id = 3, FirstName = "Sanjay", LastName = "Nanda" });

        //Bindable property called which also should support Get
        [BindProperty(SupportsGet = true)]
        public int Id { get; set; }

        //Get Property
        public void OnGet(int Id)
            if (Id == 0)
                this.Id = 1;

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

@model FirstCoreWebApplication.Pages.UsersModel
    ViewData["Title"] = "Users";
                <label>Id: @Model.UserList.FirstOrDefault(x => x.Id == Model.Id)?.Id</label>
                <label>Name: @Model.UserList.FirstOrDefault(x => x.Id == Model.Id)?.FirstName</label>
                <label>Name: @Model.UserList.FirstOrDefault(x => x.Id == Model.Id)?.LastName</label>

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

Related Post

About Us

Community of IT Professionals

A Complete IT knowledgebase for any kind of Software Language, Development, Programming, Coding, Designing, Networking, Hardware and Digital Marketing.