Updated April 3, 2023
Introduction to ASP.NET Core Razor Pages
ASP.NET Core Razor Pages is the new feature of ASP.NET Core MVC, which launched in ASP.NET Core 2.0. The pages proposed for building the server-side rendered apps in ASP.NET Core and coexist with traditional Web API controllers or MVC controllers. Razor Pages makes the coding page to focus the scenarios most productive and simpler than using views and controllers. The Razor Pages are associated with the C# object, which is called the page model, and it holds the page behavior. In addition, the pages work on only limited semantics of HTML it supports for GET and POST methods.
ASP.NET Core Razor Pages Overviews
- Razor Page framework is a light-weighted and extremely flexible, Server-Side, page-focused framework that allows to build dynamic data-drive web pages with separation of concern. It provides with the entire control over the rendered HTML. Razor Pages are Cross-Platform Server-Side HTML generation. It uses the C# programming language for server-side programming and to learn Razor Templating Syntax for the purpose of embedding C# in HTML mark-up to build dynamic content for browsers.
- Razor pages are the latest ones that simplify the web application programming model; each page file is found under the page directory, which equates to the endpoint. Razor Pages are implementation of MVC pattern and support for separation of concerns. It also supports cross-platform development and is deployed to UNIX, Windows, and Mac Operation Systems.
- The Razor Pages are used by all categories of developers from entry to enterprise level. It supports the page-centric development model; it offers developers of other page-centric frameworks like JSP, PHP, Classic ASP, ASP.NET Web forms, and ASP.NET Web Pages. Moreover, it is easy for beginners to learn and consist of the entire advanced attributes of ASP.NET Core like Dependency Injection and so on.
How to Create a Razor Pages Project?
To create a new ASP.NET Core Application in Visual Studio 2019, just open the Visual Studio and select on Create a new Project as shown.
In this “Create a new Project” dialog, there will be various templates of .NET Core Application, each and every template will create predefined project folders and files depending on application type, just create a web application click on the template ASP.NET Core Web App and click next as shown below.
Once selecting the application template, just give the suitable name and location for the project; after giving the appropriate name, click on the create button as shown below.
Our project solution will be a Razor Pages, so click on next as follows.
In this screen, we need to set the Target Framework, select none and move on. Once creating a new Razor Project, the solution is created with as below shown.
Now examine the thing like what’s the difference between ASP.NET Core MVC and Razor Pages? The answer is in MVC we have View, Model whereas in Razor Pages, it contains with Page Folder; let’s see the following image which includes the Pages Folder.
The Page folder has a Shared Folder, which shares the Common Layout and ValidationScriptPartial files, both used by the Razor Pages; note that the file starts with _.
Look at both files; just click on Index.cshtml.
The Index Model inherited from the PageModel base class; the IndexModel constructor contains the ILogger using the in-built Logging Functionality; we can also make use of in-built dependency Injection.
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 = "WELCOME ! ";
}
public void OnPost()
{
}
}
}There will be a new property called Message and Add Message in OnGet(); we have:
- OnGet() method: It is for HTTP Get Request.
- OnPost() method: It is for HHTP Post Request.
How to get the value of message property in the .cshtml file?
Code:
@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
<div class="text-center">
<h1 class="display-4">@Model.Message</h1>
<p>Article <a href="https://docs.microsoft.com/aspnet/core"> Web Apps with ASP.NET Core</a>.</p>
</div>We make use of the Model.Message for retrieving the value from Model. Execute the project and see the following output.
Output:
ASP.NET Core Razor Pages Model
The essential thing of the Razor Pages PageModel class is to make it available with separation of UI Layer (.cshtml file) and processing logic for pages.
Let’s see the reasons that why we require separation:
- First, it is easy to maintain because it decreases the complexity of the UI Layer.
- Second, it assists automatic Unit Testing.
- It allows extensible flexibility for teams while working on a project; one member can concentrate on View, whereas another member can work on a logical unit.
- It supports for reusable units of code for several purposes, which assist in scalability and maintenance.
While creating the PageModel classes, select with Razor Page (with page model) option when including a new item.
The PageModel class is the combination of ViewModel and Controller. The PageModel class is defined in a separate file that has an extension of the .cs file. There will be a default template for Razor Page (with page model).
Code:
Index.cshtml:
@page
@model IndexModel
@{
}Index.cshtml.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace SampleRazorPages.Pages
{
public class IndexModel : PageModel
{
public void OnGet()
{
}
}
}The PageModel class is available in view file @model directive. PageModel class inherits from Microsoft.AspNetCore.Mvc.RazorPages.PageModel includes various properties that allow you to work on HTTP requests like HttpContext, Response, Request, TempData, ViewData, and ModelState. It includes a range of methods that allow specifying the resulting response with Razor Page, JSON, and string, so on.
Conclusion
Razor Page is a light-weighted and extremely flexible, page focused framework that allows building dynamic data-drive web pages with separation of concern. Moreover, it provides with the entire control over the rendered HTML. For developing the apps, consider the Razor Pages as the default approach. In this article, we saw about the purpose of Razor Pages.
Recommended Articles
We hope that this EDUCBA information on “ASP.NET Core Razor Pages” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
