ASP.NET Core 2.1: Razor UI as Class Library

One of the new features of ASP.NET Core 2.1 is, Razor UI as a class library. It makes easier to build and include Razor based UI in a library and share it across multiple projects. A new Razor SDK will enable building Razor files into a class library project that can then be packaged into a NuGet package. You can package your Razor views and pages (.cshtml files) along with your controllers, page models, and data models. Apps can then include pre-built UI components by referencing these packages and customize the UI by overriding specific views and pages. In this post, we’ll see how to create Razor UI as class library and how to reuse it.

ASP.NET Core 2.1: Razor UI as Class Library

This feature was available when ASP.NET Core 2.1 preview 1 came, but that time it wasn’t straightforward to create Razor UI as a class library. ASP.NET Core 2.1 RC1 is out and now it’s easy to do that as it has Razor class library template. Before we begin, please do the following installation (ignore if already done).

• .NET Core 2.1 RC1 SDK — includes the runtime
• Install Visual Studio 2017 Update 7 or Visual Studio for Mac 7.5. You can also use latest version of Visual Studio 2017 Preview. Visual Studio and Visual Studio “Preview” can be installed side-by-side on the same device. It will have no impact on your current stable VS installation.

Open Visual Studio 2017, hit Ctrl+Shift+N and select the ASP.NET Core Web Application (.NET Core) project type from the templates. When you click Ok, you will get the following prompt. Select ASP.NET Core 2.1 and choose the Razor Class Library template.

You can also create a new Razor class library project from the command-line:

dotnet new razorclasslib -o RazorClassLib1

Following is the default project structure of the Razor Class Library project. It has only one razor page named Page1.cshtml under MyFeature Area. For those who are not aware, Razor pages also support areas.

Let’s see how to reuse this Razor UI Library in another application. To do that, add another Razor page-based application to this solution. Make sure to select “Web Application” from the project template selection dialog to create a Razor page-based application.

The default template has five standard pages: Home, About, Contact, Error, and Privacy. Let’s move the contact pages to the Razor UI class library project. To move that, first create a “Pages” folder in the Razor UI class library project and move the Contact.cshtml page. Make sure to update the namespace properly so that application builds. You’ll also need to move over _ViewImports.cshtml to get the necessary using statements.

Next, add the reference of the Razor UI class library project to the newly created razor page-based application. Once the reference is added, build the application and run the Razor application. You should see the “Contact” link still works fine. Great, isn’t it?

What if you want to override the content of Contact.cshtml. You can override views and pages from a class library in your app by putting the page or view at the same path in your app. Let’s see with an example.

Let’s create a new razor page in the class library project named Demo.cshtml in Area->MyFeature->Pages location with the following code.

@page
@model RazorUIClassLibrary.Areas.MyFeature.Pages.DemoModel
@{
    Layout = "_Layout";
}

<h2>Hello, Demo page from the Razor UI Class Library.</h2>

The class library project structure now looks like:

Now, add the link for Demo page in the main application. To do that, add the following code just after the contact link in _Layout.cshtml present in Pages->Shared folder.

<li><a asp-area="MyFeature" asp-page="Demo">Demo</a></li>

Build and run the app to see “Demo” page is working fine.

Let’s create the same “Area” structure in your application and add razor page named Demo.cshtml with the following code.

@page
@model SampleRazorApplication.Areas.MyFeature.Pages.DemoModel
@{
    Layout = "_Layout";
}

<h2>Hello, Demo page from the application.</h2>

Here, the Demo.cshtml file is present in the class library and in the application having same path structure. Let’s build and run the app to see “Demo” page in action. Application’s Demo.cshtml is served as it is overridden in the app.

Reference Reading:

• ASP.NET Core 2.1.0-preview1: Razor UI in class libraries
• ASP.NET Core 2.1.0-rc1 now available

Summary

Razor pages makes coding page-focused scenarios easier and more productive. It is introduced with the intent of creating page focused scenarios where there is no real logic is involved. Now, Razor UI as a class library is another great feature to make things more productive. To conclude, the post shows how to create Razor UI as a class library, reference it, use it in another application and override the content of the Razor UI class library.

Thank you for reading. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.

PS: If you found this content valuable and want to return the favour, then