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).
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-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:
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