Blazor WebAssembly is an amazing option for making web apps using the WebAssembly standard. Since it was released, new features have been added to every new .NET version.
In this article, we will review the new improvements in .NET 6 and how to use them.
.NET 6 is faster!!!
The performance in .NET 6 was improved and since Blazor is an extension of ASP.NET, Blazor is faster in .NET 6.
![New features in Blazor with .NET 6]()
New template updated
We have a template updated including the following improvements:
- Implicit use by default
- Top-level statements by default
- Bootstrap 5.1 no dependencies on jQuery
- CSS isolated by default
Random port
Every new project is going to use a new random port
![New features in Blazor with .NET 6]()
Hot reaload
Blazor WebAssembyl supports hot reload, a new feature in Visual Studio 2022. You can see the new changes performed in real-time.
NOTE: You need to execute the project without debbuging for Blazor WebAssembly.
![New features in Blazor with .NET 6]()
Error boundary
Using error boundary you can catch error easily and return a message including more details to the user.
<div class="main">
<div class="content px-4">
<ErrorBoundary>
@Body
</ErrorBoundary>
</div>
</div>
PageTitle y HeadContent
We can change the page title and the head content for each control easily.
<PageTitle>Index</PageTitle>
<HeadContent>
<meta name="description" content=".NET CONF"/>
</HeadContent>
Required parameter
We have a new attribute to mark an attribute as required in a component.
[Parameter]
[EditorRequired]
public string Title { get; set; }
[Parameter, EditorRequired]
public string Title { get; set; }
Parameter from Query
We have a new attribute to supply a parameter from the query string easily
https://localhost:7087/counter?MyCount=22
[SupplyParameterFromQuery]
public int MyCount{ get; set; }
Render components from JavaScript
The interop between Javascript was improved and now we can call Blazor components from JS.
let container = document.getElementById('counter');
await Blazor.rootComponents.add(container , 'counter', { currenCount : 10 });
Registry component in Blazor:
builder.RootComponents.RegisterForJavaScript<Counter>(identifier: "counter");
Focus an element on navigation
We can set the focus on specific element after navigating
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
Generate Angular and React components (Experimental features)
With this feature, we can create components in blazor that could be converted into components for React and Angular.
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.RegisterForAngular<MyComponent>(); // Register for Angular
builder.RootComponents.RegisterForReact<MyComponent>(); // Register for React
Check out the repo to execute this demo.
You can review all these new features and improvements on the official site where there is more information.