Introduction To ASP.NET Core Razor Pages

Introduction

 

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

 

We will create the first Hello world program using Razor pages.

 

This article can be used by beginners, intermediate and professional developers.

 

Below are the prerequisites before we start with this article.

 

Prerequisites

1. Basic knowledge Asp. Core
2. C#
3. Html
4. CSS

Installation

 

We are going to use,

1. Visual Studio 2019 community – Free download available on here.
2. .Net 5.0 – Framework can be download from here.

What are Razor Pages?

 

Razor pages are simple and introduce a page-focused framework that is used to create cross-platform, data-driven, server-side web pages with clean separation of concerns.

 

Advantages of Razor Pages

 

A few very important advantages of Razor pages,

1. It supports cross-platform, hence it can be deployed on Windows, Unix, and Mac operating systems.
2. It is easy to learn.
3. Lightweight and flexible framework so it can fit with any application you want to build.
4. Can work with C# programming language with Razor markup.
5. More organized with code behind page like asp.net web forms.

Let us create our first razor page project,

 

How to create a Razor project using Visual Studio 2019?

 

Open Visual Studio 2019.

 

 

Click on Create a new Project link.

 

 

Select the “Asp.Net Core Web App” template to create an Asp.net Core Web application and then click on the Next button.

 

 

In the above screen, we will provide:

• Project name - Name of Project.
• Location – Location of project where we want to store our project
• Solution name – Name of the solution

In our case, Project and Solution would be “Razor Pages”. Click on Next to proceed further.

 

 

In the above screen, we can select Target Framework. I am selecting .Net 5.0. I do not want any authentication type right now hence select none.

 

Also I do not want to use Docker for this demo project.

 

Click on Create button to create a new Razor Project.

 

 

Razor Project solution created on the above screen.

 

Now the question comes to mind:

 

What’s the difference you can see in the Asp.net Core MVC and Razor pages solution?

 

The main difference I can see, in MVC we have Model, View, and Create folder but in Razor pages, we have Pages Folder.

 

Let’s click on the Pages folder,

 

 

Pages folder has Shared folder that has shared files “common layout” and “validationScriptPartial” files which can be used by all other razor pages. Notice that shared file starts with _.

 

As our programming language is C#, Razor Page has an extension that would be .cshtml. In case our programming language is VB then the extension would be .vbhtml.

 

Now click on small tree node of .cshtml file, you can see another file which has extension .cshtml.cs file similar to aspx and aspx.cs in asp.net.

 

Let's click on both files and see what it has. First, click on Index.cshtml, 

 

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

This seems to be the UI (View page) which has @page at top. @page says it is Asp.net core Razor pages and not MVC or other pages.

 

The second line has @model. Our case model is IndexModel.

 

Class Name + Model = Model for .cshtml file that’s formula. In our case

 

Index + Model = IndexModel.

 

Then in the next line, we have an HTML mark.

 

Please note that we can use C# Code with Razor Syntax + HTML mark up in cshtml file.

 

Now double click on .Cshtml.cs file,

 

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Extensions.Logging;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

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

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

        public void OnGet()
        {
        }

    }
}

Index model class is inherited from the PageModel base class. We have IndexModel constructor which has ILogger to use inbuild logging functionality. We can also use inbuild dependency injection here.

 

Let see what PageModel class has. Select PageModel and click on F12.

 

 

We can see that this class has many functionalities which have in MVC like 

 

View Data, ModelState,RouteData,TempData,Url,ModelBining, PartialView, TryValidModel etc.

 

It means that Razor pages support most of the features in MVC.

 

Now let's make changes to pass the “Hello World ” message from Pagemole to View.

 

Click on .cshtml.cs file and write the below code

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Extensions.Logging;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

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!! This is my First Project";
        }
        public void OnPost()
        {

        }

    }
}

Here I have added a new property called message and add a message in OnGet().

 

You notice that we have,

1. OnGet() – Method for HTTP Get request
2. OnPost() – For HHTP Post request.

Now we will see how to get the value of the Message property in .cshml file.

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">@Model.Message</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

We have used the Model. Message to get value from Model.

 

Let's execute this page and see the output,

 

This is the first article of series. Hope you enjoy this article and learn something from it.