Useful Visual Studio Extensions for Working with Blazor

Blazor is a free and open-source web framework. Released by Microsoft in 2018, it enables the development of interactive and reusable web UIs using the C# programming language instead of JavaScript.

Using Blazor VSCode Extensions, you can build applications from start to finish using the C# programming language. Blazor VSCode Extensions facilitate code reusability and modularity because UI components are implemented using only C#, HTML, and CSS.

Client software using Blazor VSCode Extensions executes 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.

In this article, we explore some of the best of Blazor’s VSCode Extensions. Blazor’s VSCode Extensions make building applications less stressful and more efficient. We also explore some Blazor Components that you can easily use while building applications.

Blazor Snippets

Blazor Snippets provides common code snippets for building apps in Blazor using 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 for VS Code is known for its elegance and ease of use. Crated 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 1.5k 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 Blazor Snippet Pack in 2019 using VSCode Snippet Generator. It has over 4.2k 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 ASP.NET Core application using keybindings, a context menu, or command palette.

It was officially released in April 2019 by Adrian Wilczyński and has an impressive number of downloads — over 93k. 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 select PageModel
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 a lot 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 App Components

It’s important to recall that Blazor apps are built using components. A component can be defined as a self-contained chunk of user interface (UI), such as a page, dialog, or a 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.

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

GrapeCity UI components are reusable, work on all platforms, and support .NET 5, .NET Core 3.1, and Blazor WebAssembly 3.2. Their collection of demonstrations lets you see each integration in action.

Some of the GrapeCity 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. AutoComplete: Allows you to implement text prediction
4. Calendar: Lets you display multiple adjacent months in a single calendar view
5. CheckBox: Enables classic checkbox control for Blazor
6. ComboBox: Lets you display a list of items in a drop-down menu
7. DataPager: Provides paging for C1FlexGrid and C1ListView
8. DateTime Editors: Allows you to display, edit and validate date and time information
9. ListView: Provides users with a list of items for selection
10. MaskedTextBox: Enables you to validate and format user input with a mask using the C1MaskedTextBox component
11. NumericBox: Enables you to display and edit numeric values in your Blazor server and client applications
12. TextBox: Gives you standard textbox input control that you can program in C#
13. Tooltip: Enables you to display simple text or any HTML content in a lightweight tooltip
14. Window: Allows you to display modal and modeless windows that can be resized, dragged, and closed with C1Window

Summary

Blazor is a powerful framework with cool free tools available to enhance your applications and streamline your development process.

Using GrapeCIty UI controls in Blazor applications significantly shortens the development time of any project. Make applications more robust, responsive, and scalable with GrapeCity UI controls. Check out other web development content on the GrapeCity blog.

Try GrapeCity Blazor UI controls for web apps in your next Blazor application. Our 30-day free startup package is enough to get you started, as you explore how GrapeCity can enhance your next Blazor application.