Razor Class Library - Create Reusable UI In ASP.NET Core

Introduction to Razor page

Razor Pages is a new feature introduced with ASP.NET Core 2.0. They are much like MVC pages and have most of the features of MVC but they are more focused UI implementation. It is based on the page-centric development model like ASP.NET web pages & web forms. It contains all the feature of ASP.NET core and is suitable for all kind of applications.

@page
<h1> Hello, Reader!</h1>
<h2> This is Razor Pages Demo </h2>

The preceding code is an example of Razor pages. It mostly looks like a Razor view file except for @page directive. The @page directive makes the file into MVC action. It means that it handles requests directly (without the use of a controller).

Razor page comes with a code-behind file that inherits from PageModel class. Mostly code-behind files have similar names as Razor pages. This file may have a handler method like OnGet and OnPost. The OnGet handler method is used to initialize the state needed for the page and OnPost is used to handle page submit events. The Async method for the handler method is also available.

Razor Class Library project

ASP.NET Core 2.1 introduces Razor Class Library (RCL) project. It is a library that contains pages, views, view component, controllers, data models. It can be reused. It is an easy way to share web applications code with UI elements across the multiple projects. We can also package it into a NuGet package.

How to create Razor Class Library projects

We can create a Razor Class Library project by using either Visual Studio or using .NET Core CLI. With Visual Studio, the RCL template is available.

We can also create a project using CLI with help of "dotnet new razorclasslib" command.

dotnet new razorclasslib -o RazorClassLibrary

Now, we can add Razor pages to the RCL projects. This template by default creates the "Areas" folder.

To demonstrate the concept, I have replaced the following markup in "RazorClassLibrary\Areas\MyFeature\Pages\Page1.cshtml"

@page
@model RazorClassLibrary.MyFeature.Pages.Page1Model
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Page1</title>
</head>
<body>
<h2>
View is Render from Class Lib project
</h2>
</body>
</html>

Share UI element with multiple projects

To share UI elements that are created in RCL (Razor Class Library), we need to reference the RCL project to the project in which we want to use the UI element.

To demonstrate the concept, I have created "ASP.NET Core Web Application" project and add the reference of RCL project.

To verify, our page load from Razor Class Library browser the URL "/MyFeature/Page1".

Also, we can share a Razor view between multiple projects using Razor Class Library project. To demonstrate, I have created Razor view text.cshtml under "Pages\shared" folder in Razor Class Library project and this page has the following markup.

test.cshtml

@model RazorClassLibrary.Model.TestModel
<h3>
This is test page from Razor Class Library.
</h3>
<br />
<h4>Hello @Model.Name!!! </h4>

Using the following code, I can render this Razor view as partial view.

<partial name="test" model=@ViewData["testMode"]>

Override Pages (View / Partial View)

When a View, Partial View, or Razor page is found in both web applications (local application) as well as Razor Class Library, the local file will have the first precedence. For example, If I add Razor Page to "WebApplication1\Areas\MyFeature\Pages\Page2.cshtml" and "RazorClassLibrary\Areas\MyFeature\Pages\Page2.cshtml", Web application will take precedence over Page2 in the Razor Class Library.

Summary

RCL (Razor Class Library) is the best way to share web application components and UI artifacts. It enables us to share components between projects even if they are not in the same solution. We can also create NuGet packages for this library. It is always possible to override view, partial view, and other components.

You can view or download the source code from the GitHub link here.