New Features In Blazor With .NET 6

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 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

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. 

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.