DEV Community

loading...
Cover image for Blazor in depth — Create Blazor component without Lifecycle methods

Blazor in depth — Create Blazor component without Lifecycle methods

madhust profile image Madhu Sudhanan P ・2 min read

It has been long time since I have managed to write a blog post. As I got up with a very challenging Blazor project in workplace, I got no time to share my thought with the community. Glad to be back!!.

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 Razor component item.

public class Rating
{
}
Enter fullscreen mode Exit fullscreen mode

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

public class Rating : IComponent
{
}
Enter fullscreen mode Exit fullscreen mode

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 no 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;
     }
}
Enter fullscreen mode Exit fullscreen mode

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();
            }
        }
    }
Enter fullscreen mode Exit fullscreen mode

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

The output looks like below.
Alt Text

Closing

I hope you have learned one of many ways of creating Blazor components. In this post, I am neither recommending this as a 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 !!

Discussion (1)

pic
Editor guide
Collapse
23min profile image
Peter Bruinsma

Does this enable you to bind events like OnClick in runtime mode? I'm using SVG and in a element the OnClick needs to be resolved during compile time.