Introduction
Blazor is a new framework built by Microsoft for creating interactive client-side web UI with .NET codebase. We can write both client-side and server-side code in C#.NET itself. I have already written five articles about Blazor server on C# Corner. Please refer to below articles for more basics about Blazor framework.
Components are implemented in Razor component files (. razor) using a combination of C# and HTML mark-up. A component in Blazor is formally referred to as a Razor component.
We can create a child component and reuse in another component. We will share data between these components very easily. We will create a custom textbox as child component. This custom textbox will show the current character count in the textbox and will restrict the total number of characters, if needed. I will explain all the actions step by step.
Create Blazor application in Visual Studio 2019
Choose Blazor template from Visual Studio 2019 and create Blazor application.
We can create a new razor component inside “Pages” folder.
You can notice that, a new “Parent Component” link is appeared in the menu. You can click that link to see the parent component.
We have defined two custom textbox components inside the parent component. For the first textbox, we have given 20-character limit and for second component, no character limit is given. So that, you can enter unlimited characters in second textbox. The total characters count is also visible in the screen.
Conclusion
In this post, we have created a reusable child component in Blazor and easily used in another parent component. We have shared the data from parent component to child component and vice versa also.