Tutorial:Asp.Net Core Razor Pages

Asp.Net Core Razor Pages

What are Asp.Net Core Razor Pages in asp.net core?

Asp razor pages are page focused framework for building a dynamic data-driven application. These razor pages are built on top of asp.net core framework so it is cross-platform.

The asp.net core razor pages are the recommended framework for building cross-platform server-side Html. It uses the C# programming language.

As razor pages cross-platform support you can develop anywhere and can be published on Unix, Mac, and Linux also.

Asp.Net Core Razor Pages who will use?

It is for beginner level developers to enterprize level applications also. It is mainly page centric development model, which means it offerenig some familiar experience to a developer who already works PHP, classic asp and JSP developers, asp.net webform developers. It is also very easy to learn for beginners.

Asp.Net Core Razor Pages Project Selection:

  1. Use Visual Studio 2019 Community edition – https://visualstudio.microsoft.com/vs/community/

To install use this link and download setup and install on your machine.

After opening this use below image to select the asp.net core project.

Asp.Net Core Web Application - 1
Asp.Net Core Web Application – 1

Asp.Net Core Web Application - 2
Asp.Net Core Web Application – 2

Asp.Net Core Web Application - 3
Asp.Net Core Web Application – 3

This template is to create an asp.net application using Razor pages. For this, do not select an authentication method.

Asp.Net Core Web Application - 4
Asp.Net Core Web Application – 4

The primary difference between MVC project structure and Razor pages structure is that in Razor pages we don’t have Model-View-Controller folders like regular MVC application.

First Run of the project looks like below

Asp.Net Core Web Application-run project - 1
Asp.Net Core Web Application-run project – 1

The arrow we marked, when you click on this link highlighted pages are served.

Razor page has page extension cshtml and the first cs is for C# as a programming language and for Html is Html.

Razor Pages are a combination of 2 files. It will show.

  1. A page with .cshtml extension- this file means display template
  2. Second file is .cshtml.cs file which is code file

razor page structure
razor page structure

A file with .cshtml extension

If you see this file it is not very different from asp.net core view file but there is one difference which makes this page different is @page directive at starting of this page.

This @page directive tells that it is razor page.

cshtml in razor page
cshtml in razor page

After this directive, we have a @model directive as the name implies IndexModel is model for that page.

page model in razor page
page model in razor page

This IndexModel is corresponding page model class which resides in .cshtml.cs file. The name of the class is the same name as given in the razor page index.

model binding in razor pages
model binding in razor pages

Now we can see the IndexModel cs file, below is auto-generated code for this file in which logging service is injected in a class by using dependency injection(constructor injection). Also in this class other features of MVC like model binding, model validation also supported.

using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Extensions.Logging;

namespace asprazorpage.Pages
{
    public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;

        public IndexModel(ILogger<IndexModel> logger)
        {
            _logger = logger;
        }

        public void OnGet()
        {

        }
    }
}

logging service dependency injection
logging service dependency injection

In the above code or image, you can see the OnGet method. This OnGet method is called when we issued a Get request to that page OnGet Method is called. Means OnGet method handles https get requests.

How to use property declared in cs file in cshtml page in asp razor pages?

See below image we create a public property in IndexModel class and by using @Model.Message you can access this. In this Message is our property name and by using @Model you are able to access in .cshtml page also.

Property of model class bind to cshtml view in razor pages
Property of model class bind to cshtml view in razor pages

Key Points To Remember About Asp.Net Core Razor Pages

  1. In MVC we have model-view-controller and in razor pages, we only have 2 component one is .cshtml which display template and another is page model class. The page model class working as both controller and model. To elaborate this we have the public void OnGet() method which is worked as controller action and property in that classwork as a model.
  2. This is new technology, which is used to build a page focus web application quickly.
  3. Asp razor pages are lightweight, flexible and by using this you can build websites more quickly because it provides full control over Html to Developer.
  4. In the primary point of view, asp razor pages are similar to asp.net webforms.
  5. Microsoft suggests that for building API use MVC and for web UI use razor pages.

Sagar Jaybhay, from Maharashtra, India, is currently a Senior Software Developer. He has continuously grown in the roles that he has held in the more than seven years he has been with this company. Sagar Jaybhay is an excellent team member and prides himself on his work contributions to his team and company as a whole.

Related posts