Blazor updates demo for .NET 6 using Visual Studio 2022

Try out Blazor updates for .NET 6, where we try out four new features.

Blazor new features

Using Visual Studio 2022 preview, you can see how the following features work for Blazor in .NET 6:

Preserving prerendering state

.NET 5 had the ability to load a Blazor WebAssembly application to the server before being presented to the client. One of the benefits of prerendering is to make it easier for search engines to crawl an application.

However, it didn't have any ability to store data. This was a particular problem if there was an API call when the application was initialised. It would have to make the same API call twice.

.NET 6 has fixed this through the use of the PersistentComponentState.

Querystring component parameters

There is now the ability to read a Razor component parameter through a querystring parameter. This is thanks to the [SupplyParameterFromQuery] attribute.

In addition, it also allows us to specify the querystring parameter name to map the property to.

Modify page title from a Razor component

With .NET 6, we can add a page title to a Razor component. And it's dynamic as well.

Using the <PageTitle> tag, we display the number of notes being shown on the screen. This updates automatically when a note is added.

Error boundaries

If we want to catch an exception for a particular element of a page, such as a call to a child Razor component, we can do this through the <ErrorBoundary> tag.

This allows us to customise the error for a particular element of the page.

Software

This is the software that will need to be installed onto your machine.

• Visual Studio 2022 Preview 6 or above. It will work with the free community version.
• .NET 6.0 SDK RC 2 or above. Visual Studio 2022 should already have the .NET SDK installed.

Get the application working

These are the steps to get the application working.

• Fill out the code example form. We will send you an email where you can download the code example.

You are now ready to go.

Open the project in Visual Studio

Open up RoundTheCode.BlazorDotNet6.sln in Visual Studio 2022.

Start the project in Visual Studio. As we are prerendering the Blazor WebAssembly application, it should be the RoundTheCode.BlazorDotNet6.Host project that is set as the startup project.

Hit https://localhost:4500, to test out the Blazor .NET 6 updates.

More information

Watch our video where we go ahead and implement these four new Blazor features for .NET 6.

Please note that since this video was recorded, ComponentApplicationState has been changed to PersistentComponentState in .NET 6 RC2. This has been updated in the article and the code example, but not the video.

In addition, we describe these changes in detail with our article "Blazor updates for .NET 6 using Visual Studio 2022".