What's New for Blazor, ASP.NET Core in Latest .NET 7 Preview

Blazor sports a new WebAssembly loading page and sees improvements to data binding and virtualization in the latest .NET 7 preview.

In that Preview 7, which just shipped yesterday, the dev team showed some love on several fronts for ASP.NET Core's Blazor component, which allows for coding web projects in C# instead of mainly using JavaScript.

For example, the Blazor WebAssembly project template in Visual Studio has a new UI construct that shows the progress of loading an app. The loading screen animation is implemented with two new CSS custom properties -- acting as variables -- that are now part of Blazor WebAssembly, the client-side component of Blazor. They are used to show the percentage of app files loaded and the percentage of app files loaded rounded to the nearest whole number.

"Using these new CSS variables, you can create a custom loading UI that matches the styling of your own Blazor WebAssembly apps," said Microsoft's Daniel Roth in an Aug. 9 announcement post.

New Blazor Loading Page in Animated Action
[Click on image for larger, animated GIF view.] New Blazor Loading Page in Animated Action (source: Microsoft).

Blazor data binding between UI elements or component parameters with .NET objects has also been improved with a new @bind:after modifier that lets a developer execute some async code after a binding event completes.

Two other new modifiers, @bind:get and @bind:set, ease the process of setting up bindings between component parameters and an underlying UI element. "Components can support two-way data binding by defining a pair of parameters for the value and for a callback that is called when the value changes," Roth said.

Also, the dev team tweaked Blazor's Virtualize component, which is used to limit UI rendering to only the currently visible parts, which can be helpful when an app must render a long list of items of which only a subset must be visible at any given time. It uses a spacer element to define the vertical height of the scroll region, being enclosed in a div element by default. Now, for cases in which the parent element doesn't allow child div elements, a new new SpacerElement parameter can be used to configure the spacer element used by Virtualize.

Finally, developers can now pass state when navigating in Blazor apps using the NavigationManager, which enables simple communication between different pages.

Other ASP.NET Core highlights in .NET 7 Preview 7 -- with links for more information -- include:

  • Updated Angular and React templates: see here
  • Improved gRPC JSON transcoding performance and memory usage when serializing messages: see here
  • Authentication will use single scheme as DefaultScheme: see here
  • IFormFile/IFormFileCollection support for authenticated requests in minimal APIs: see here
  • New problem details service for generating consistent problem details responses in an app: see here
  • Diagnostics middleware updates: see here
  • New HttpResults interfaces: see here

About the Author

David Ramel is an editor and writer for Converge360.

comments powered by Disqus


Subscribe on YouTube