Useful Visual Studio Extensions for Working with Blazor

Blazor is a free and open-source web framework from Microsoft that enables the development of interactive and reusable web UIs using the C# programming language instead of JavaScript. In this blog, we’ll share some useful extensions that make development with Blazor easier:

• Blazor Extensions
• Microsoft's VSCode Blazor Debugging Extension
• ASP.NET Core Switcher
• Blazor UI Components
• Electron.NET for Building Desktop Apps with Blazor
• C# Dev Kit
• ActiveReports.NET Reporting Solution
• Bootstrap Blazor Project Template
• BlazmExtension
• Blazor ASP.NET Web Forms Template
• Blazor Windows Desktop Templates
• Why Develop with Blazor

About Blazor Extensions

You typically develop a Blazor application in Visual Studio or Visual Studio Code (VS Code) using C# with some occasional HTML, CSS, and JavaScript. Blazor Visual Studio Extensions facilitate code reusability and help improve coding efficiency and workflow by saving time with helpful functions and debugging capabilities. They can also help speed up user interface design.

Microsoft’s VSCode Blazor Debugging Extension

Microsoft’s VSCode Blazor debugging extension is a companion extension for debugging Blazor WebAssembly applications in VS Code. It brings some improvements to the experience of debugging Blazor WebAssembly in VS Code. To use this extension, you must also install a C# extension for Visual Studio Code.

This extension was released in February 2021, and since its release, it has pulled over 157k downloads on the Visual Studio Marketplace. It has a vibrant development team listed on its official GitHub repository.

ASP.NET Core Switcher

ASP.NET Core Switcher enables you to quickly switch between views, controllers, pages, page models, and Blazor components in the ASP.NET Core application using key bindings, a context menu, or a command palette.

It was officially released in April 2019 by Adrian Wilczyński and has an impressive number of downloads — over 348k. Aside from Blazor projects, this extension can be used for Razor and MVC projects. Here are some quick commands on how to switch pages using this extension in Blazor, Razor, and MVC projects.

Blazor

Switch between Component (.razor) and its CodeBehind (.razor.cs) using:

1. Keybindings: Alt + O
2. Editor context menu: Right-click a blank space and select Component; right-click a blank space and select CodeBehind
3. Command palette: Ctrl+Shift+P > Component; Ctrl + Shift + P > CodeBehind

Razor Pages

Switch between Page and its PageModel using:

1. Keybindings: Alt + O
2. Editor context menu: Right-click a blank space and select Page; right-click a blank space and selectPageModel
3. Command palette: Ctrl + Shift + P > Page; Ctrl + Shift + P > PageModel

MVC

Switch between View and Controller using:

1. Keybindings: Alt + O (or Alt + I for backwards compatibility)
2. Editor context menu: Right-click a blank space and select Controller; right-click a blank space and select View
3. Command palette: Ctrl + Shift + P > Controller, Ctrl + Shift + P > View

Create a View for an Action using:

1. Keybindings: Alt + P
2. Editor context menu: Right-click a blank space and select Add View
3. Command palette: Ctrl + Shift + P > Add View

This is an essential extension. It makes debugging in large projects much easier as you can seamlessly navigate from one file to another in just a few clicks.

More information about the future of this extension, its release cycle and how to contribute to the development of this extension can be accessed on their official GitHub repository.

Blazor UI Components

It’s important to recall that Blazor apps are built using UI components. A component can be defined as a self-contained chunk of user interface (UI), such as a page, dialog, or form. It includes HTML markup and the processing logic required to inject data or respond to UI events.

Components are flexible and lightweight. They can be nested, reused, and shared among projects. Components in Blazor were formerly referred to as Razor components.

ComponentOne by MESCIUS has tons of amazing UI components for building fast and modern web applications using Blazor. They use the C# programming language to build native UI controls for Blazor.

ComponentOne UI components are reusable, work on all platforms, and support .NET 8, .NET 6, .NET Core 3.1, and Blazor WebAssembly. Check out the demos to see each control in action.

Ready to get started with ComponentOne? Download Now!

Some of the ComponentOne UI controls for building Blazor applications include:

1. FlexGrid: A fast data grid that enables typical data grid features such as tabular data editing, sorting, filtering, and grouping.
2. FlexChart: A chart component that supports all common 2D chart types like bar, area, line, pie, and scatters.
3. FlexViewer: View and print FlexReports, SSRS reports, and PDFs.
4. DataFilter: A separate, side-bar filtering control that lets users quickly apply multiple filters to a data view, such as FlexGrid or ListView.
5. Inputs: Fill the toolbox gap with essential input controls such as AutoComplete, CheckBox, ComboBox, Masked TextBox, NumericBox, and more.
6. Calendar: This lets you display multiple adjacent months in a single calendar view.
7. ListView: Provides users with a list of items for selection.
8. TreeView: Display data-bound items in a hierarchical tree with node expansion.
9. Tooltip: This enables you to display simple text or any HTML content in a lightweight tooltip.
10. Window: Allows you to display modal and modeless windows that can be resized, dragged, and closed with C1Window.

ComponentOne Blazor Edition

Electron.NET for building Desktop Apps with Blazor

Electron is a framework that supports the development of desktop applications using web technologies such as Blazor, the Chromium rendering engine, and the Node.js runtime. Supported operating systems include Windows, macOS, and Linux. It leverages familiar standards such as HTML, CSS, and JavaScript.

Electron.NET allows .NET developers to invoke native Electron APIs using C# and Blazor. You can read more about it here: Building Blazor Desktop Apps with Electron.NET.

C# Dev Kit

With over 8 million installs, the C# Dev Kit is a must-have for developing Blazor in Visual Studio Code. It fills the gap you’re missing from the full Visual Studio experience by helping you manage your code with a solution explorer and test your code with integrated unit test discovery and execution.

This extension enhances your C# environment by adding powerful tools and utilities that integrate natively with VS Code to help C# developers write, debug, and maintain their code faster with fewer errors. Additionally, you can add the VSCode Blazor WASM Debugging Extension for Blazor WASM.

ActiveReports.NET Reporting Solution

ActiveReports is a feature-packed, complete solution for .NET reporting that provides an intuitive report designer in Visual Studio. You can embed a complete Report Viewer in Blazor applications with built-in file export and printing. Learn how to configure reports in your Blazor application.

Ready to try it out? Download ActiveReports.NET Today!

Bootstrap Blazor Project Template

With over 21k installs, this extension provides project templates for creating Bootstrap Blazor apps that run on the server in an ASP.NET Core app or in the browser on WebAssembly (Wasm). These templates enable you to quickly create a Blazor web app integrated with Bootstrap Blazor using .NET 8.0.

BlazmExtension

A publisher by the name of EngstromJimmy has developed a useful set of extensions that help improve your Blazor workflows. The new BlazmExtension includes over 12 different useful tricks that integrate into Visual Studio.

• Create files faster - Quickly create isolated CSS, JavaScript, and Code Behind files for a specific Razor component using a context menu.
• Razor component actions - Save time by quickly adding namespace imports and creating additional Razor components based on existing ones.
• Code behind - Move code from the code-behind file to the Razor component file.
• Quick Save - A faster alternative to Hot Reload (preview).
• Additional generic features - Rapidly switch between files with your keyboard, quickly find a component, and auto-generate unit testing code.

Blazor ASP.NET Web Forms Template

Blazor lacks UI components out of the box, and this interesting extension brings the classic ASP.NET Web Forms components to Blazor. You can check out a live demo to see the classic Web Forms controls in Blazor, such as the GridView.

Blazor Windows Desktop Templates

This is another interesting extension that enables you to host a Blazor app from within a desktop WinForms or WPF application. It supports the latest Blazor Hybrid project template. Refer to the author’s documentation to learn more. Windows Forms and WPF are proven solid frameworks for creating high-performance Windows desktop client applications and offer a more robust solution than Electron.NET for integrating Blazor onto the desktop.

Why Develop with Blazor

Web apps built with Blazor can execute C# code directly in a browser using WebAssembly. This is possible because Blazor itself is a .NET application running on WebAssembly. It can also run client logic on servers as it uses SignalR. SignalR is a real-time messaging framework that ensures efficient communication with servers.

One of the advanced features of Blazor is its ability to invoke JavaScript functions from .NET methods and .NET methods from JavaScript functions. This ability is called JavaScript interoperability (JS interop). It gives you the flexibility of using the large amount of JavaScript libraries that exist for client-side UIs, while writing your logic in C#.

Blazor was built on and uses open web standards without plugins or code transpilation. It is universally applicable and works flawlessly in all modern web browsers, including those on mobile devices.

Since its initial release in 2018, the Blazor community has grown massively, and so has its number of tools.

Summary

In this article, we explored some of the best of Blazor’s Visual Studio Extensions that make building applications less stressful and more efficient. We also explored some Blazor Components that you can easily use while building applications. Using third-party UI controls, like ComponentOne, in Blazor applications significantly shortens the development time of any project.

Ready to Get Started? Download ComponentOne Today!