AddNewComponentInBlazor.exe

Console tool to add a new Blazor component with .razor file for markup and .razor.cs file for code.

Plan is to add this to the context menu in Visual Studio 2019 as a scaffolder, however, at this time I am having problems finding ways to do this. So, currently this is implemented as a .NET 5.0 console application.

For more details, please read Organizing and Naming Components in Blazor on my blog.

What does it do

Once run, the tool creates a .razor component and a .razor.cs class with the same name in the given folder. It also creates the .razor.css file, as Blazor now allows CSS isolation per component. The .razor.cs class name has the "Base" suffix and extends Microsoft.AspNetCore.Components.ComponentBase. The .razor component automaticall has the @inherits directive so it is connected with the class where the code is. The .razor.css file is empty. All files are UTF8.

Example:

AddNewComponentInBlazor MyComponent

will create two files:

MyComponent.razor

@inherits MyComponentBase
<h3>MyComponent</h3>

MyComponent.razor.cs

using Microsoft.AspNetCore.Components;


namespace Namespace.Generated.Based.On.Folder.Structure
{
	public class MyComponentBase : ComponentBase
	{
		
	}
}

MyComponent.razor.css

Namespace is generated by searching through folders level by level up until a .csproj file is found. Once it is found, the .csproj filename is the base of the namespace and the subfolders are divided by ..

How to set up

1. Download the source code.
2. Use Visual Studio 2019 to publish the console application to an .exe file
3. Add the folder where the published .exe is to system path

How to use

In the terminal place yourself in the folder where you want the files to be added. Type the following command.

AddNewComponentInBlazor <FileName>

The files that will get created are <FileName>.razor, <FileName>.razor.cs and <FileName.razor.css. The class name from which the code behind will be inherited will be <FileName>Base.