Combining Blazor and Razor Pages in one ASP.NET Core 3 app
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.cshtml
to 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 MapFallbackToPage
pointing 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 requiredblazor.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