Top Blazor features in .NET 7 we're most excited about

There are new exciting features in Blazor .NET 7. Below are some of the features that I am sure will make life a lot easier for us.  

Follow along either by clicking through the app or looking at the code.

‍

New Binding Modifiers

New data binding get/set/after modifiers are added. The pair parameters (@bind:get and @bind:set) binds both ways. To execute asynchronous logic after binding occurred we can use the @bind:after modifier.   

The @bind:after cannot be used together with @bind:set modifier.

‍

Code snippet:

‍

‍

Navigation Manager

The Navigation Manager can now trigger a prompt when any changes on the screen are made and not saved.  

There are two types of navigation, external and internal. External navigation is when the user leaves the app by clicking on the browser's back button or closing the window. Internal navigation is when the user navigates away from the page inside the app.

NavigationLock component has two parameters: 

‍

ConfirmExternalNavigation 

This property handles external navigation, for example, clicking on another tab, closing the window or clicking on the back button etc.. It is a boolean value, and when it is true, a prompt will appear when the user navigates away from the window. The picture below shows a Chrome confirmation window: 

‍

OnBeforeInternalNavigation 

This property sets a callback when the user navigates away from within the app. It receives the LocationChangingContext, which is the browser's current location. Logic can be added to the JS confirm dialog, for example, by changing the text on the confirmation screen. To prevent the user from navigating away, we can use the PreventNavigation method in LocationChangingContext.

The picture below shows JS confirm dialog, with a personalized message:

Code snippet:

‍

‍

New Empty Template

The Blazor Server/WebAssembly App Empty template creates a template without styling and example code.  Using the empty template means we no longer have to clean up template code & styling. This will speed up developing our brand new awesome Blazor apps with a couple minutes. 

‍

‍

Updated Loading Screen

Microsoft updated the loading screen in the Blazor code template. It now indicates the progress of the app loading. It is an SVG image with CSS styling. The code example is part of the updated Blazor WebAssembly App / Blazor Server App template:

‍

This is a snippet of the changed code in index.html:

‍

It was super exciting testing out the new features. There are a couple of the new features that would have simplified some of my recent projects. I am excited about this tech stack and look forward to what Microsoft has planned for this space.   

‍

References

https://devblogs.microsoft.com/dotnet/asp-net-core-updates-in-dotnet-7-rc-1/
https://devblogs.microsoft.com/dotnet/asp-net-core-updates-in-dotnet-7-rc-2/