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. : { RenderHandle _renderHandle; IComponent.Attach(RenderHandle renderHandle)
     {
        _renderHandle = renderHandle;
     }
} public class Rating IComponent private void 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. : { RenderHandle _renderHandle;        

        [ ] Value { ; ; } IComponent.Attach(RenderHandle renderHandle)
        {
            _renderHandle = renderHandle;
        }

        Task IComponent.SetParametersAsync(ParameterView parameters)
        { ( entry parameters)
            { (entry.Name)
                { = ( )entry.Value; ;
                }
            }
            _renderHandle.Render(RenderDelegate); Task.CompletedTask;
        } { max = Math.Min(Value, ); seq = ; ( i = ; i < max; i++)
            {
                builder.OpenElement(seq++, );
                builder.AddAttribute(seq++, , );
                builder.AddContent(seq++, );
                builder.CloseElement();
            }
        }
    } public class Rating IComponent private Parameter public int get set void foreach var in switch ( ):
                        Value case nameof Value int break return ( ) private void RenderDelegate RenderTreeBuilder builder int 5 int 1 for var 0 "span" "style" "color:#f49813;font-size:30px" "★" 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 https://dev.to/madhust/blazor-in-depth-create-blazor-component-without-lifecycle-methods-2786

 JavaScript Interop and ASP.NET Core Blazor

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How to Create a Blazor Component Without Lifecycle Methods

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

JavaScript Interop and ASP.NET Core Blazor

C# 8.0 Indices and Ranges

5 Tips to Improve Your Productivity in C# 8.0

C# 8.0 Nullable Reference Types Are Here

How to Code a Blog With ASP.NET Core and C#

JavaScript Interop and ASP.NET Core Blazor

C# 8.0 Indices and Ranges

5 Tips to Improve Your Productivity in C# 8.0

C# 8.0 Nullable Reference Types Are Here

How to Code a Blog With ASP.NET Core and C#

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps