Creating Component In Blazor

Introduction

 

Just like modern client frameworks (such as  Angular), Blazor has components at the core part. It uses the combination of Razor, HTML and C# code as a component. A component is the base element of the Blazor application, i.e., every page is considered as a component in Blazor. There are multiple ways to create components in Blazor.

 

Create Blazor component using Inline method

 

This is a very simple and common method to create components in Blazor. In this method, HTML and code behind are kept on the same page. Most of the demo projects are using this method to demonstrate the concepts. The HTML part of the component contains Razor syntax as well as HTML tags and the code behind section contains the actual logic. In short, in this method, we can add view markup and logic in the same page. The logic is separated by using function block.

 

Example

<h2>@Title</h2>

@functions {
    const string Title = "Component created by using inline method";
}

In function block, we can define all the properties that are used in view markup and the methods are bound with control as event.

 

Create Blazor component with Code behind

 

In this method of creating a component, view markup and C# code logic are in separate files. In the current version of Blazor (0.2.0), this is achieved by using @inherits directive. This directive tells the Blazor compiler to derive the class generated from the Razor view from class specified with this directive. The class specified with @inherits directive must be inherited from BlazorComponent class and it provides all base functionality for the component.

 

Code behind class

using Microsoft.AspNetCore.Blazor.Components;

namespace BlazorDemoApp
{
    public class CodebehindClass : BlazorComponent
    {
        public string Title { get; set; } = "Component created by using Code behind method";
    }
}

View File 

@page "/codebehind"

@inherits CodebehindClass

<h2>@Title</h2>

Please note that Blazor compiler generates class for all the view pages with the same class name as the page name, so here, a specified base class cannot have the same name as Razor View, otherwise, it would cause a compile-time error.

 

Class Only Component

 

As we know, all the component in Blazor ends up as a class. Event Blazor compiler generates the class for Razor View. So, we can also create the component using C# code. Here, a class must be inherited from BlazorComponent class.

 

In BuildRenderTree method, we can generate page layout using C# code. We can do everything with the page layout that we did in Razor View.

 

Example

using BlazorDemoApp.Shared;
using Microsoft.AspNetCore.Blazor.Components;
using Microsoft.AspNetCore.Blazor.Layouts;
using Microsoft.AspNetCore.Blazor.RenderTree;

namespace BlazorDemoApp.Pages
{
    [Route("/classonly")]
    [Layout(typeof(MainLayout))]
    public class ClassOnlyComponent : BlazorComponent
    {
        public string Title { get; set; } = "Component created by using Class only method";
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            builder.OpenElement(1, "h2");
            builder.AddContent(2, Title);
            builder.CloseElement();
        }
    }
}

Summary

 

Component is a core item of Blazor just like modern client frameworks (such as Angular). Here, I have described three methods for creating a component in Blazor. Many more methods may get added in the upcoming releases. Currently, Blazor is an experimental project and it is not in production yet.

 

You can view or download the source code from the GitHub link here.