Combining Blazor and Razor Pages in one ASP.NET Core 3 app

Translation of the article was prepared on the eve of the start of the course “C # ASP.NET Core Developer”


In this article, I’ll show you how you can add Blazor-based pages to an existing Razor Pages app.

Foreword

Blazor goes gold should happen in two weeks… Many things in the project are still subject to rather drastic changes, and the latest Preview 9th made the interaction between Razor Pages and Blazor components much more difficult: now it is impossible to pass parameters from Razor page to Blazor component using Html.RenderComponentAsync… This may change in the future, but it is likely that in .NET Core 3.0 it will appear with this limitation.

If you still want to enhance your existing Razor Pages app with Blazor magic, one solution is to completely create your pages in Blazor. In this article, I’ll show you how you can add Blazor Pages to an existing Razor Pages application, where parts of the application are built using Razor Pages and others using Blazor Pages. For both types of pages, use the same layout.

Step one: support for Blazor

So, we have an existing Razor Pages application that has been converted to .NET Core 3.

First, you need to add Blazor support to your app. This support will allow you to render Blazor components from a Razor page. Official documentation walks you through the process completely, but here is a summary.

Startup.cs:

We need to add Services.AddServerSideBlazor in ConfigureServices and endpoints.MapBlazorHub in Configure:

_Layout.cshtml:

The Blazor JS Library is required for server-side Blazor connectivity. It can be added to _Layout.cshtml:

?

_Imports.razor:

We also need a new file named _Imports.razor… It should be added to the Pages folder:

_Imports.razor used to set up using statements for your Blazor components. You can start with the following:

?

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

And that is all… Our app now supports Blazor. We can verify this by copying the classic Counter component into our application.

?

@page "/counter"
 

Counter

Current count: @currentCount

@code { int currentCount = 0; void IncrementCount() { currentCount++; } }

And edit Privacy.cshtmlto include the Counter component:

?
@page
@model PrivacyModel
@{
    ViewData["Title"] = "Privacy Policy";
}

@ViewData["Title"]

Use this page to detail your site's privacy policy.

@(await Html.RenderComponentAsync(RenderMode.Server))

Now, when we launch the application, a working Counter should appear on our page:

In the next part of this article, I’ll show you how you can modify your Razor Pages app so that instead of just adding components to existing pages, you can create complete Blazor pages.

Step two: support for Blazor Pages

Our Blazor component defines the route “/counter”:

But going through it doesn’t work:

Our goal is to get routing to Blazor pages to work. And we want Blazor pages to use the same layout as Razor pages. To do this, we’ll need a few things starting with router (Router)

App.razor:

Create a new file App.razor in folder

Pages

:

The Router component is defined in App.razor:

?

@using Microsoft.AspNetCore.Components.Routing
 

    
        
    
    
        

Page not found

Sorry, but there's nothing here!

Router automatically scans all Blazor components using the page directive and adds routes to them.

_Host.cshtml:

We also need a page to host our Blazor pages. You can name it whatever you want, but Blazor templates default to _Host.cshtml, which will suit us completely (however, like any other). IN _Host.cshtml we can define a layout, which in our case will be the same as the Razor pages.

_Host.cshtml contains a call Html.RenderComponentAsync:

?

@page "/blazor"
 
@{
    Layout = "_Layout";
}
 

    @(await Html.RenderComponentAsync(RenderMode.Server))

Startup.cs:

And finally, a small addition to the method Configure Startup.cs… Earlier we added MapBlazorHub, and now we need to add a call MapFallbackToPagepointing to new _Host.cshtml:

And that is all! Now we just need to test our setup. Add the Blazor Page Counter (Counter) to your layout by editing Pages/Shared/_Layout.cshtml:

When we launch the application, we see a working Blazor page in our Razor Pages application:

And we didn’t break support for adding Blazor components to Razor Pages:

Notes

A couple of things to note:

  • Blazor routes only work when they point to the root. If “/ counter” is changed, for example, to “/products/counter”, the page will not be able to load the required blazor.server.js… We’ll get a 404 instead. It should be possible to change the script tag so that it can load the required script regardless of location, but that seems to have changed from pre-8 to pre-9 and I couldn’t get it to work. Here is a 404 screenshot showing the problem:
  • If you manage to load the script, you will probably run into the same problems with Blazor hub: scripts try to find hub in / products / blazor instead of blazor. To work around this, you can manually initiate a connection between the server and browser:

?

 

Sample code

Sample code for this project is available on GitHub


Want to know more about our course? That way


Read more:

  • Battle of C # JSON serializers for .NET Core 3


Similar Posts

Leave a Reply