Custom Blazor Elements No Longer Experimental in .NET 7 Preview 6

Custom Blazor elements graduated from the experimental stage to become part of .NET 7 in the just-released sixth preview of the framework, due to debut in November.

Blazor, part of the ASP.NET Core web-dev framework that's in turn part of the umbrella .NET 7 framework, comes in client-side and server-side components that allow for browser-based apps primarily written in C# instead of JavaScript.

Blazor custom elements, meanwhile, are built with a NuGet package (Microsoft.AspNetCore.Components.CustomElements) that lets developers use standard HTML interfaces to implement custom HTML elements.

The ability to create custom Blazor elements was introduced in September of last year in the .NET 6 Release Candidate 1.

Once created, these custom elements -- a custom counter, for example -- can also be used in other single-page application (SPA) web frameworks such as React and Angular. A sample project, aptly titled Blazor Custom Elements, shows how to do just that, providing examples about how to work with those frameworks and the client-side Blazor WebAssembly component as well as Blazor Server.

To create a custom element using Blazor, developers must first register a Blazor root component as a custom element:


After which the custom element can be used with Blazor or any other web framework:

<my-counter increment-amount="10"></my-counter>

Other Blazor-related features in .NET 7 Preview 6 include empty Blazor project templates, according to a July 12 blog post authored by Daniel Roth, principal program manager for ASP.NET.

"Blazor has two new project templates for starting from a blank slate," Roth said. "The new 'Blazor Server App Empty' and 'Blazor WebAssembly App Empty' project templates are just like their non-empty counterparts but without any extra demo code. These empty templates have only a very basic home page, and we've also Bootstrap so you can start with whatever CSS framework you prefer."

The new templates are available from within Visual Studio after the .NET 7 SDK has been installed. As shown in the graphic below, the descriptions for them read:

  • Blazor Server App Empty: An empty project template for creating a Blazor server app that runs server-side inside an ASP.NET Core app and handles user interactions over a SignalR connection. This template does not have any content in it.
  • Blazor WebAssembly App Empty: An empty project template for creating a Blazor app that runs on WebAssembly and is optionally hosted by an ASP.NET Core app. This template does not have any content in it.

Empty Blazor Project Templates
[Click on image for larger view.] Empty Blazor Project Templates (source: Microsoft).

And finally, there's yet another Blazor highlight in Roth's ASP.NET-centric post, an experimental QuickGrid component. It's designed to quickly and efficiently display data in tabular form. "QuickGrid provides a simple and convenient data grid component for the most common needs as well as a reference architecture and performance baseline for anyone building Blazor data grid components," Roth said.

Although still experimental and not committed to be a part of .NET 7, the open source component is available for use, about which Microsoft is soliciting feedback.

"QuickGrid is highly optimized and uses advanced techniques to achieve optimal rendering performance," Roth said. "The QuickGrid demo site is built using Blazor WebAssembly and is hosted on GitHub Pages. The site loads fast thanks to static prerendering using jsakamoto's BlazorWasmPrerendering.Build project.

"It's not a goal to add all the features to QuickGrid that full-blown commercial grids tend to have, for example hierarchical rows, drag-to-reorder columns, or Excel-like range selections. If you need those, continue using commercial grids or other open-source options."

Other highlights of the ASP.NET Preview 6 update include:

Roth invited developers to provide feedback on the above on GitHub.

About the Author

David Ramel is an editor and writer for Converge360.

comments powered by Disqus


  • Creating Reactive Applications in .NET

    In modern applications, data is being retrieved in asynchronous, real-time streams, as traditional pull requests where the clients asks for data from the server are becoming a thing of the past.

  • AI for GitHub Collaboration? Maybe Not So Much

    No doubt GitHub Copilot has been a boon for developers, but AI might not be the best tool for collaboration, according to developers weighing in on a recent social media post from the GitHub team.

  • Visual Studio 2022 Getting VS Code 'Command Palette' Equivalent

    As any Visual Studio Code user knows, the editor's command palette is a powerful tool for getting things done quickly, without having to navigate through menus and dialogs. Now, we learn how an equivalent is coming for Microsoft's flagship Visual Studio IDE, invoked by the same familiar Ctrl+Shift+P keyboard shortcut.

  • .NET 9 Preview 3: 'I've Been Waiting 9 Years for This API!'

    Microsoft's third preview of .NET 9 sees a lot of minor tweaks and fixes with no earth-shaking new functionality, but little things can be important to individual developers.

  • Data Anomaly Detection Using a Neural Autoencoder with C#

    Dr. James McCaffrey of Microsoft Research tackles the process of examining a set of source data to find data items that are different in some way from the majority of the source items.

Subscribe on YouTube