Creating Custom Components in Blazor

Introduction

Blazor is an open-source web framework developed by Microsoft that allows developers to build interactive web applications using C# and .NET. Blazor uses a component-based architecture to create reusable and modular UI elements. Custom components are an essential part of building complex and reusable web applications. In this article, we will explore how to create custom components in Blazor using examples.

Prerequisites

Before we begin, ensure you have the following set up on your development environment:

• Visual Studio 2022.
• Basic knowledge of C# and HTML.

Understanding Components in Blazor

Components in Blazor are similar to user controls in other web frameworks. They are self-contained pieces of code that contain both markup and logic. Components can be composed and nested to create complex UI elements. In Blazor, components can be created using Razor syntax or using C# code. There are two types of components in Blazor:

• Razor Components: These are defined using Razor syntax (.razor files) and allow for a mix of HTML and C# code.
• Code-Behind Components: These are defined using C# classes and are more suitable for more complex logic or when you want to separate the UI and C# code.

In this article, we'll focus on creating custom Razor components.

Step 1. Create a New Blazor Project

Let's start by creating a new Blazor project. Open Visual Studio and follow these steps:

• Click on "Create a new project."
• In the "Create a new project" dialog, search for "Blazor WebAssembly App," select the "Blazor WebAssembly App" template and click on "Next".
• Choose a name and location for your project, and click "Next".
• Choose the ".NET 7.0" option from the framework and click "Create" to generate the project.

Step 2. Add a Custom Component

In this example, we'll create a simple custom component that displays a welcome message with the ability to customize the name.

• Right-click on the "Pages" folder in your Blazor project, and select "Add" > "New Folder." Name the folder "Components."
• Right-click on the newly created "Components" folder, and select "Add" > "New Item."
• In the "Add New Item" dialog, search for "Razor Component" and select the "Razor Component" template.
• Name the component "WelcomeMessage.razor" and click "Add."

Step 3. Define the Custom Component

Now, let's define the content of our custom component. Open the "WelcomeMessage.razor" file and replace its content with the following code.

@code {
    [Parameter] public string Name { get; set; } = "Guest";
}
<h3>Welcome, @Name!</h3>

In this code, we have a simple Razor component with a parameter named "Name." The parameter represents the name of the user to display in the welcome message. We've set a default value of "Guest" in case the name is not provided.

Step 4. Using the Custom Component

Now that we have our custom component defined let's use it in one of our existing Blazor pages. Open the "Index.razor" file located in the "Pages" folder and add the following line at the top of the file to import the "WelcomeMessage" component.

@page "/"

@using YourAppName.Components

Next, add the following code within the existing <div> tag in the "Index.razor" file:

<WelcomeMessage Name="Amit Mohanty" />

This line of code will render the "WelcomeMessage" component with the name "Amit Mohanty".

Step 5. Build and Run the Application

With the custom component in place, we can now build and run the application to see it in action.

• Press Ctrl + F5 or click the "Start Debugging" button in Visual Studio to build and run the application.
• Once the application loads in your browser, you should see the welcome message, "Welcome, Amit Mohanty!" If you don't see the name, check if you've correctly implemented the custom component.

How to Create Reusable Components?

One of the main benefits of using custom components in Blazor is the ability to create reusable UI elements. To create a reusable component, you can define it in a separate file and import it into other components as needed. Here's an example of a reusable component that displays a button.

Create a new component named as SubmitButton and add the below code.

<button class="@ButtonClass" @onclick="OnClick">@ButtonText</button>

@code {
    [Parameter]
    public string ButtonText { get; set; } = "Button";

    [Parameter]
    public string ButtonClass { get; set; } = "btn-primary";

    [Parameter]
    public EventCallback<MouseEventArgs> OnClick { get; set; }
}

This component takes three parameters: the button text, the button class, and a callback that is triggered when the button is clicked. The default values for the button text and class are set in the component, but they can be overridden when the component is used.

To use this component in your application, you can add the following code to a Razor page.

<SubmitButton ButtonText="Click Me" ButtonClass="btn-success" OnClick="HandleClick" />
@code {
    private async Task HandleClick(MouseEventArgs args)
    {
        // Handle the button click event
    }
}

This will render a button with the text "Click Me" and the class "btn-success". When the button is clicked, the HandleClick method will be called.

Conclusion

Custom components are a powerful feature of Blazor that allow developers to create reusable and modular UI elements. By creating custom components, developers can build complex web applications more efficiently and with greater flexibility. In this article, we explored how to create custom components in Blazor using examples. We hope this article has been helpful in understanding how to create custom components in Blazor.