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. Topics covered include:

• Blazor Extensions
• Blazor Snippets
• Blazory
• Microsoft's VSCode Blazor Debugging Extension
• Blazor Snippet Pack
• Razor / Blazor CSS IntelliSense
• ASP.NET Core Switcher
• Blazor Addons
• Blazor Minimal Project Template
• Blazor CRUD Template
• Blazor UI Components
• Electron.NET for Building Desktop Apps with Blazor
• 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.

Blazor Snippets

Blazor Snippets provides common code snippets for building apps in Blazor using Visual Studio or VS Code. This extension increases productivity, letting you spend less time writing boilerplate code and more time writing main application codes.

Blazor’s Snippets was officially released by Scott Sauber in November 2018. So far, this extension is one of the most downloaded Blazor extensions on the Visual Studio Marketplace, with over 15,000 downloads.

For more information about Blazor Snippets, including how to contribute to its development, check out the official GitHub repository.

Blazory

The Blazory extension is known for its elegance and ease of use. Created by Bart Van Hoey, this tool is designed to speed up your Blazor development process by providing you with useful Blazor code snippets.

Officially released on July 27, 2020, the Blazory extension is stable and also in active development. For more details regarding its release cycle and how to contribute to this project, check out the official GitHub repository.

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 115k downloads on the Visual Studio Marketplace. It has a vibrant development team listed on its official GitHub repository.

Blazor Snippet Pack

Blazor Snippet Pack includes an amazing Blazor generation feature. It is easy to use and beautifully designed with developer productivity at heart.

Adrian Wilczyński created the Blazor Snippet Pack in 2019 using the VSCode Snippet Generator. It has over 153k downloads and an active GitHub repository.

Razor / Blazor CSS IntelliSense

Razor / Blazor CSS IntelliSense is a fork of HTML CSS Class Completion, developed and released by Kevin Chatham in February 2021. This extension is a drop-in replacement for HTML CSS Class Completion and has out-of-the-box Razor and Blazor support.

Note that it cannot work together with the HTML CSS Class Completion extension. Therefore, you must uninstall the HTML CSS Class Completion extension before using this extension.

Razor / Blazor CSS IntelliSense Visual Studio Code extension provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element.

This extension:

1. Gives you auto-completion for CSS class definitions that can be found in your workspace (defined in CSS files or in the file types listed in the Supported Language Modes section).
2. Supports external stylesheets referenced through link elements in HTML files.
3. Includes a command to manually re-cache the class definitions used in the autocompletion.
4. Allows users to override which folders and files should be considered or excluded from the caching process.

It’s also very user-friendly and easy to customize to your preference. Access more information about this very active extension via GitHub.

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 250k. 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 Addons

With over 1.1k downloads, the Blazor Addons extension helps improve the workflow for Blazor. Officially released in May 2020 by tHop, this extension lets you quickly create component classes and partial classes in your Blazor projects on VS code. Check out its official GitHub repository.

Blazor Minimal Project Template

The Blazor Minimal Project Template works effectively in Visual Studio 2017 and 2019, providing users with a project template for a .Net Standard project with a minimal implementation of client-side Blazor (a web UI framework based on C#, Razor, and HTML that runs in the browser using WebAssembly). Access via code on its GitHub repository.

Blazor CRUD Template

Published by Faisal Pathan in December 2019, the Blazor CRUD Template works very effectively in Visual Studio 2019.

This extension provisions templates that include CRUD (Create, Read, Update, and Delete) operations and server-side pagination using Blazor, Dapper, and Entity Framework Core 3.1. You can access release details and contribution guides on the 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. DataFilter: A separate, side-bar filtering control that lets users quickly apply multiple filters to a data view, such as FlexGrid or ListView.
4. Inputs: Fill the toolbox gap with essential input controls such as AutoComplete, CheckBox, ComboBox, Masked TextBox, NumericBox, and more.
5. Calendar: This lets you display multiple adjacent months in a single calendar view.
6. ListView: Provides users with a list of items for selection.
7. TreeView: Display data-bound items in a hierarchical tree with node expansion.
8. Tooltip: This enables you to display simple text or any HTML content in a lightweight tooltip.
9. 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.

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!