Razor Pages in ASP.NET Core

In this blog, we are going to discuss Razor pages with Asp.net Core. We are going to use the LTS version of Framework - .Net 5 for this article.?

We will create the first Hello world program using Razor pages. To create this program we require the prerequisites below before we start.

?Prerequisites

• Basic knowledge Asp. Core
• C#
• Html
• CSS

We are going to use, Visual Studio 2019 community and .Net 5.0 – Framework.

Razor Pages is the latest, simple web application programming model. It separates much of the ceremony of ASP.NET MVC by accepting a file-based routing approach.

The advantages of Razor pages are as follows:

·????????It supports cross-platform, therefore it can be deployed on Windows, Unix, and Mac operating systems.

·????????Lightweight and flexible framework so it can suitable for any application you want to build.

·????????We can work with C# programming language with Razor markup.

·????????It is very easy to learn.

·????????More arranged with code behind the page like asp.net web forms.

Now let’s create a new project with ASP.NET Core Web App template?like the below image:

After selecting NEXT provide the project name location and solution name.

Created Razor project solution make a question n mind, that how it is different from MCA project. In MVC ?we have the Model, View, and Create folder but in Razor pages, we have the Pages folder.

The pages folder has a Shared folder has shared files “common layout” and “validationScriptPartial” files which we can use in all other razor pages. Notice that the shared file starts with _.

As our programming language is C#, Razor Page has an extension that would be .cshtml. Now click on small tree node of .cshtml file, we can see other files which have extension .cshtml.cs file similar to aspx and aspx.cs in asp.net.

Let's click on Index.cshtml first,

@pag
@model IndexModel
@{
??? ViewData["Title"] = "Home page";
}
?
<div class="text-center">
??? <h1 class="display-4">Welcome</h1>
</div>e        

This seems like the View page, which has @page at the top. @page says it is Asp.net core Razor pages and not MVC or other pages. in the next line, we have an HTML mark. Let’s check .Cshtml.cs file.

using Microsoft.AspNetCore.Mvc
using Microsoft.AspNetCore.Mvc.RazorPages;
?
namespace RazorPages.Pages
{
??? public class IndexModel : PageModel
??? {
??????? private readonly ILogger<IndexModel> _logger;
?
??????? public IndexModel(ILogger<IndexModel> logger)
??????? {
??????????? _logger = logger;
??????? }
?
??????? public void OnGet()
??????? {
?
??????? }
??? }
};        

The index model class is inherited from the PageModel base class. We have IndexModel constructor which has ILogger to use inbuild logging functionality.

Razor pages support most of the features in MVC. Now let's pass the “Hello World ” text from Pagemole to View. Open .cshtml.cs file and write the below code.

using Microsoft.AspNetCore.Mvc.Razorges;
namespace RazorPages.Pages
{
??? public class IndexModel : PageModel
??? {
??????? private readonly ILogger<IndexModel> _logger;
??????? public string Message { get; set; }
??????? public IndexModel(ILogger<IndexModel> logger)
??????? {
??????????? _logger = logger;
??????? }
??????? public void OnGet()
??????? {
??????????? Message = "Hello World!! ";
??????? }
??????? public void OnPost()
??????? {
?
??????? }
??? }
}
        

Here we have added a new property named message and added a message in OnGet(). Next, we have to see how to get the value of the Message property in .cshml file.

@pag
@model IndexModel
@{
??? ViewData["Title"] = "Home page";
}
?
<div class="text-center">
??? <h1 class="display-4">@Model.Message</h1>
</div>e        

We use the Model. Message to get value from Model. Let's execute this page and reach the output