Blazor Components

Blazor provides you with the ability to easily create components and component libraries. In fact, the Blazor framework is component-based. This means every Blazor Page or Blazor Tag you develop is a component. A Blazor component usually consists of the following parts: C#, CSS and HTML/Blazor template. These different parts get compiled and bundled as a .NET class by the Blazor toolchain. There are several ways to develop and program Blazor components. They are Inline, Code Behind and Class Only component.

Inline Component

Inline Component is where HTML markup (View) and C# programming codes (Logic) are structured in the same file. This is the most common way of developing a component and is the default provided by the Visual Studio IDE. The following illustrates an Inline Component. As described previously, the Blazor toolchain converts the HTML markup into C# programming codes and combine them with the programming codes specified in @functions into a .NET class.

InlineComponent.razor

@page "/"
<h3>Inline Component</h3>

<button @onclick=Print>Click Here</button>

@functions {
    //C# Programming Codes
}

Code Behind Component

Code Behind Component is where the HTML markup (View) and C# programming codes (Logic) is separated into different files. The following illustrates a Code Behind Component.

Note - Partial Classes that works the same way in XAML/ASP will be available in the future. This will make the View and Code separation even cleaner.

CodeBehindBase.cs

public class CodeBehindBase: ComponentBase
{
	public const string Title = "Code Behind Component";
}

CodeBehind.cshtml

<h3>@Title</h3>

Class Only Component

Class Only Component is where the HTML markup (View) are written in an API manner together with the C# codes in a class. The following illustrates a Class Only Component.

ClassOnly.cs

public class ClassOnly : ComponentBase
{
	public const string Title = "Class Only Component";
	protected override void BuildRenderTree(RenderTreeBuilder builder)
	{
		builder.OpenElement(1,"h3")
		builder.OpenElement(2,Title);
		builder.CloseElement();
	}
}

Creating a Blazor Component Library

A Blazor project can be structured in a manner where the components are developed separately and made available as a component library (nuget). This enables the HTML, CSS and C# parts of the component to be segregated from the main project. The steps below show how to create a component library and how to use the component tag in the main Blazor project.

Using the dotnet CLI, create a new Blazor project

Create a new Blazor Component Library

Add a reference from the BlazorProject to BlazorComponent Library. Go to the BlazorProject folder, edit the BlazorProject.csproj and add in the following:

<Project...> 
.
.
.
<ItemGroup>
    <ProjectReference Include="..\BlazorComponentLibrary\BlazorComponentLibrary.csproj" />
</ItemGroup>
</Project>

Edit Index.razor in the Pages folder of the BlazorProject

@using BlazorComponentLibrary

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.
<Component1></Component1>
<SurveyPrompt Title="How is Blazor working for you?" />

@using enables us to use the BlazorComponentLibrary. <Component1> is the tag where we declare to use our component

Run the BlazorProject

You should see the following line on the web page indicating the successful use of our Blazor component:

This Blazor component is defined in the MyBlazorLibrary package.