Last month I tweeted about a blog post I found interesting:

#Blazor apps are built using #Razor components.

But did you know you can use Razor Components in existing Razor Pages or MVC Views? https://t.co/dTL3e3Md2O#dotnetcore #aspnetcore pic.twitter.com/oi2f3POYEQ

— DalSoft (@DalSoft) January 16, 2020

I thought it was really cool that you could use Razor Components in existing ASP.NET Razor Pages (which is what you build Blazor apps with). I think Razor Pages are one of the easiest ways to develop a web app using ASP.NET Core. Also some things such as authentication are still better served by a ‘traditional web app’ – for example Razor Pages is the default for ASP.NET Identity.

This is why I was glad that this functionality was added to ASP.NET 3.0 Razor Pages and MVC Views, it means a modern alternative to view components and partial views. It also gets you familiar with Razor Components which are the building blocks of a Blazor App.

TL;DR

I have created a nuget package that means in Razor Pages you can use your Razor Components like this:

<hello-world message='$"Hello World {DateTime.Now}"' />

Instead of like this:

<component type="typeof(HelloWorld)" render-mode="Static" param-message='$"Hello World {DateTime.Now}"' />

So let’s briefly recap Matteo’s post, but if you are new to Razor Components his blog post is a great place to start. Then using a tiny package I created I’ll show you a neater way to use Razor Components in your Razor Pages.

Let’s start by creating a Razor Pages web app, using either Visual Studio or the dotnet CLI:

> dotnet new razor

Then add a Razor component using either Visual Studio (Right click on Pages folder and select Add -> New Item, then select Razor Component and name it “MyComponent”) or the dotnet CLI:

> dotnet new razorcomponent --name MyComponent

Add the following code to the Razor Component you just created:

@code {

    [Parameter]
    public string Message { get; set; }
}

<h3>@Message</h3> 

Now you have a Razor Pages project and a Razor Component your ready to use DalSoft.RazorComponents.

Install DalSoft.RazorComponents package via DotNet CLI:


> dotnet add package DalSoft.RazorComponents


Now we need to create a Components mapping class. This is what DalSoft.RazorComponents does it maps your component using a tag library base class.

namespace MyRazorPages.Pages._Components
{
    [HtmlTargetElement(tag:"hello-world", TagStructure = TagStructure.WithoutEndTag)]
    public class TheClassNameIsNotImportant : ComponentTagHelperBase<Components.MyComponent> { }
}

What the class above is doing is using the generic parameter to map your component to my package’s tag library. When your Razor Component is generated a YourProjectName.PathToComponent.ComponentName type is generated for your component, this is what you pass as a generic parameter to ComponentTagHelperBase.

To finish wiring up add your assembly as a registered tag library. We do this by adding @addTagHelper *, MyAssemblyName to _ViewImports.cshtml:

@using MyRazorPages
@namespace MyRazorPages.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, MyRazorPages

So after spending 5 minutes doing this you can now use own tag to render your Razor Component, just as you would in a Blazor app.

Like this:

<hello-world message='$"Hello World {DateTime.Now}"' />

Instead of like this:

<component type="typeof(HelloWorld)" render-mode="Static" param-message='$"Hello World {DateTime.Now}"' />

What’s great is you can use the same process to create Razor components class libraries which allows you to create reusable components.

You can find the full documentation and GitHub repository here.