Razor Pages In ASP.NET Core

Razor Pages is a new feature of ASP.NET Core MVC. We can use this approach when there are some page-focused scenarios.

Creating Razor Pages in ASP.NET Core

For creating this project, you should have .NET Core installed and Visual Studio 2015 or later.

In Visual Studio, select File -> New -> Project.

Now, create new ASP.NET Core Web Application and name it as RazoPagesDemo.



Click OK and select the latest ASP.NET Core in the drop-down. Then, select ASP.NET Core 2.0 and select Web Application in the next window.



Click OK. Visual Studio will create a project.

 

In the Solution Explorer, you can see there is a folder named pages and all the views are present in that folder.



Now, run the project. You will see a basic Razor page template in the browser.

Project Structure

• wwwroot
  This folder contains all client-side files like CSS and JavaScript that are static.
  
  
• Pages
  This folder contains all the Razor pages of the project.
  
  
• appsettings.json
  This is the configuration file.
  
  
• bower.json
  It is used for client side package management.
  
  
• Program.cs
  It hosts the web app.
  
  
• Startup.cs
  It configures the application’s services and request pipelines.  

How Razor Pages works

First, let us create our own test Razor page.

Right click on the Pages folder and add a new Razor page.



It will create a new Razor page named test.cshtml. Expand the View; you will see a cs file with the same name.

This cs file is called code-behind file.



Copy the following code in your test page.

@page
@model testModel
@using Microsoft.AspNetCore.Mvc.RazorPages
@functions {
    public class testModel : PageModel
    {
        public string Message { get; private set; } = "In test page model: ";
        public void OnGet()
        {
            Message += $" Current Time  { DateTime.Now.ToString() }";
        }
    }
}
<h2>In page sample</h2>
<p>
    @Model.Message
</p>

Save the file and "Run" your project. It will run on some port. Navigate to this test page.

http://localhost:x/test.

You will see the following screen in the browser.


Now, if you see the code of the Razor page, it seems like Razor View file. But the difference is that it has a @Page directive that makes the file an MVC action. It handles the request directly without going to the Controller. @Page must be the first directive in any Razor Page. @function directive can be used for binding the model with the page. But the same thing can be done by using the code behind file.

 

Now, let us move our @function directive code to code-behind file. Open the code-behind file and copy the code in cs file.

using Microsoft.AspNetCore.Mvc.RazorPages;
using System;

namespace RazorPages.Pages
{
    public class testModel : PageModel
    {
        public string Message { get; private set; } = "In test page model: ";
        public void OnGet()
        {
            Message += $" Code Behind Current Time  { DateTime.Now.ToString() }";
        }
    }
}

Now, your test Razor Page will look like this.

@page
@model testModel
@using Microsoft.AspNetCore.Mvc.RazorPages
<h2>In page sample</h2>
<p>
    @Model.Message
</p>

Save all the files and Run the project again. The following output will be shown in the browser.


When we run the project, it will look for the named Razor page in the Pages folder. By default, it will show the index page.