Creating Components

Like all modern front end frameworks Blazor has components at its core. Blazor uses a combination of C#, Razor and HTML to create components. There are 4 styles for components in Blazor.

  • Inline
  • Code behind with base class
  • Code behind with partial class
  • Class only

One thing to note, regardless of which method you choose to build your components, components all end up as classes. If you’re interested to see what these classes look like you can view them in the obj\Debug\netstandard2.1\Razor directory of any Blazor project.

Inline

This is the simplest way to create a component in Blazor and is what you will find bundled with the starter project. It is just a single .razor file which the Blazor compiler turns into a C# class at build time.

When using an inline style you add your view markup and logic all in the same file. Logic is separated by using a Razor codeblock as shown in the example below.

<!-- HelloWorld.razor -->

<h1>@Title</h1>

@code {
    const string Title = "Hello World - Inline";
}

Code behind with base class

With this style of component view markup and logic are separated into different files. This is achieved using the @inherits directive.

Using the @inherits directive instructs Blazor to derive the class generated from the razor view, from the class specified with the directive. The code behind class specified with the directive must itself be derived from ComponentBase. This class provides all base functionality for components in Blazor.

A convention has become widely used when naming the base class file. Which is shown in the example below. The convention is to name the base class file the same as the view file but with .cs appended. Visual Studio will then nest the files in the Solution Explorer which help keep things tidy and help emphasise the relationship between the files.

// HelloWorld.razor.cs

public class HelloWorldBase : ComponentBase
{
    public const string Title = "Hello World - Code Behind";
}

<!-- HelloWorld.razor -->

<h1>@Title</h1>

One thing to remember with this style is that the base class cannot have the same name as the view. As all razor views get compiled down to classes, if both the razor view and base class were named the same it would cause a compile time error.

Code behind with partial class

Partial classes have been supported for a long time now with Blazor components, although this was not always the case. If you want to separate your code block from your markup but you’re not keen on the base class approach, then this is the option for you.

The setup is very similar to the previous base class approach except the code-behind class can have the same name, it just needs to be marked with the partial keyword.

// HelloWorld.razor.cs

public partial class HelloWorld : ComponentBase
{
    public const string Title = "Hello World - Code Behind";
}

<!-- HelloWorld.razor -->

<h1>@Title</h1>

Class only

The final style for building components in Blazor is to only use a class. Ultimately all components end up as a classes anyway. So using this style could be seen as cutting out the middle man.

However, I would strongly recommend against this style for reasons I cover in this post.

// HelloWorld.cs

public class HelloWorld : ComponentBase
{
    public const string Title = "Hello World - Class Only";

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.OpenElement(1, "h1");
        builder.AddContent(2, Title);
        builder.CloseElement();
    }
}

As I stated before, the ComponentBase class contains all the base functionality for components. One of the methods it contains is BuildRenderTree() which I have overridden in the code above. I have then used the RenderTreeBuilder instance to programmatically define my components view. At runtime the component will output the following html.

<h1>Hello World - Class Only</h1>

Summary

In this post, I’ve covered 3 styles for defining components in Blazor. The first was to create components using just a single .razor file. The second was to use a code behind style with a base class containing the logic and a .razor view containing the markup. The third was to manually build the component using just a C# class.