I’ve been looking at Blazor components for some time and I was looking for a way to integrate them into my existing ASP.NET Core 3.1 Web applications. It’s very easy!


In the layout file _Layout.cshtml add this <base> tag to the <head> element:

<base href="~/" />

Also in the layout file _Layout.cshtml add this <script> tag before the closing <body> tag:

<script src="_framework/blazor.server.js"></script>

Add an _Imports.razor Blazor component to your Pages folder:

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop

// Change row below to use your namespace
@using MyNamespace          

In Startup.cs file register the Blazor Service, map the Blazor Hub endpoint and a fallback:

public void ConfigureServices(IServiceCollection services)

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

    app.UseEndpoints(endpoints =>

Add an App.razor Razor component to your Pages folder:

@using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
        <h1>Page not found</h1>

Add a _Host.cshtml Razor file to your Pages folder:

@page "/blazor"
    Layout = "_Layout";
    <component type="typeof(App)" render-mode="Server" />

Adding Blazor components

For my example I’m creating a Time component to show current date and time. Create a Time.razor Blazor component in your Pages folder:

@page "/time"


@code {
    private DateTime time;

    protected override void OnInitialized()
        time = DateTime.Now;

To add this Blazor component into your existing Index.cshtml file just add:

    @(await Html.RenderComponentAsync<IntegratingBlazor.Pages.Time>(RenderMode.Server))

Blazor component in Razor page

Or open this Blazor component in a new page just by browsing to the /time url. Blazor component in new page

Let me know you if you have any problem with your code!