Blazor

Blazor Bites - Creating Components

Blazor Bites Series


Post valid for: Blazor 0.6.0
Please remember that Blazor is an experimental project and is going to be changing regularly. IT IS NOT PRODUCTION READY.


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. Obviously Blazor is extremely new and is still experimental so there are no best practices on how to create components. But as of today there are 3 ways to create components with Blazor.

  • Inline
  • Code behind
  • Class only

One thing to be clear on first. Regardless of which method you choose to build your components, components all end up as classes. Check out the obj\Debug\netstandard2.0\Pages directory in a default Blazor project to see what these classes look like.

Inline Component

This is the simplest and most common component in Blazor and is what you will find bundled with the starter project. It is just a regular Razor View file which the Blazor compiler turns into a C# class at build time.

When using the inline style you can add your view markup and logic all in the same file. Logic is separated by using a Razor functions block.

<!-- HelloWorld.cshtml -->

<h1>@Title</h1>

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

Code behind Component

With this style of component view markup and logic can be separated into separate files. In the current version of Blazor (0.2.0) 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 BlazorComponent. As this class provides all base functionality for components in Blazor.

// HelloWorldBase.cs

public class HelloWorldBase : BlazorComponent
{
    public const string Title = "Hello World - Code Behind";
}
<!-- HelloWorld.cshtml -->

<h1>@Title</h1>

One gotcha with this feature is that the base class specified cannot have the same name as the razor view. In its current state Blazor can't handle partial classes, it can only handle inheritance. 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. There is a proposal to implement partial classes which could make the code behind style much cleaner, but this is still under review.

Class Only Component

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 is just cutting out the middle man.

// HelloWorld.cs

public class HelloWorld : BlazorComponent
{
    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 BlazorComponent 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>

Wrapping up

In this post I've covered the 3 styles for defining components in Blazor. I've kept the examples simple but I will be adding more posts going into much more detail and more advanced topics over the coming weeks.

Things are moving fast with the project so I will make sure I keep these posts up to date with the current APIs and best practices as they emerge.