222 reads

How to Create a Blazor Component Without Lifecycle Methods

by Madhu Sudhanan PNovember 4th, 2020

Too Long; Didn't Read

In this blog post, I am going to share how I created a Blazor component without life-cycle methods and razor file syntax. I found this approach after going through various components used in Blazor source code. The Rating component is a class only component so I am not creating a Razor component item. I hope you have learned one of many ways of creating Blazor components, but I am neither recommending this as the best approach nor insisting to use this approach for performance benefits. The final rating component will look like below below.

featured image - How to Create a Blazor Component Without Lifecycle Methods

In this blog post, I am going to share how I created a Blazor component without life-cycle methods and razor file syntax. We could also say this as class only component approach but without life-cycle methods. Many of them might knew this way of component rendering, but I felt like sharing this would help other folks who doesn’t know. I found this approach after going through various components used in Blazor source code.To demonstrate this approach, we are going to create a simple Rating component.I am creating a class named Rating.cs. As mentioned previously this is a class only component so I am not creating a Razor component item.

public class Rating
{
}

First step in this approach is to implement Rating class with IComponent interface.

public class Rating : IComponent
{
}

Now the Rating class must implement below two methods of IComponent interface.

Attach — Attach the RenderHandle instance to the rating component.
SetParametersAsync — Set the component parameters. Yes I lied before, we need this life cycle method. But I promise, this is the only one needed I will not add any more.

In the Attach method, we need to get and store the RenderHandle instance for later usage. Now the code will look like below.

public class Rating : IComponent
{
     private RenderHandle _renderHandle;     

     void IComponent.Attach(RenderHandle renderHandle)
     {
        _renderHandle = renderHandle;
     }
}

Now we need to handle the SetParametersAsync method, this method should take care of below two important responsibilities.

Get component parameters from ParameterView and set in the corresponding component property. Here Rating component uses Value property.
Invoke Render method of the RenderHandle with the RenderFragment delegate.

Now the final rating component will look like below.

    public class Rating : IComponent
    {
        private RenderHandle _renderHandle;        

        [Parameter]
        public int Value { get; set; }        

        void IComponent.Attach(RenderHandle renderHandle)
        {
            _renderHandle = renderHandle;
        }

        Task IComponent.SetParametersAsync(ParameterView parameters)
        {
            foreach(var entry in parameters)
            {
                switch (entry.Name)
                {
                    case nameof(Value):
                        Value = (int)entry.Value;
                        break;
                }
            }
            _renderHandle.Render(RenderDelegate);                         
            return Task.CompletedTask;
        }        

        private void RenderDelegate(RenderTreeBuilder builder)
        {
            int max = Math.Min(Value, 5);
            int seq = 1;
            for (var i = 0; i < max; i++)
            {
                builder.OpenElement(seq++, "span");
                builder.AddAttribute(seq++, 
                          "style", "color:#f49813;font-size:30px");
                builder.AddContent(seq++, "★");
                builder.CloseElement();
            }
        }
    }

Now the Rating component can be used in our application simply like below.

The output looks like below.

Closing

I hope you have learned one of many ways of creating Blazor components. In this post, I am neither recommending this as the best approach nor insisting to use this approach for performance benefits. I found this approach as a simple and clean way of creating simple Blazor components.Leave comments or share this post if you found this helpful. Happy coding!!

Also published at //dev.to/madhust/blazor-in-depth-create-blazor-component-without-lifecycle-methods-2786

L O A D I N G
. . . comments & more!