Microsoft created the open-source Blazor web framework, which enables programmers to create interactive online apps with C# and.NET. Blazor builds modular and reusable user interface components using a component-based architecture. Building intricate and reusable web apps requires the use of custom components. We will use examples to demonstrate how to develop custom components in Blazor in this article.
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="Peter" />
This line of code will render the "WelcomeMessage" component with the name "Peter".
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, Peter!" 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.
European Best, cheap and reliable ASP.NET hosting with instant activation. HostForLIFE.eu is #1 Recommended Windows and ASP.NET hosting in European Continent. With 99.99% Uptime Guaranteed of Relibility, Stability and Performace. HostForLIFE.eu security team is constantly monitoring the entire network for unusual behaviour. We deliver hosting solution including Shared hosting, Cloud hosting, Reseller hosting, Dedicated Servers, and IT as Service for companies of all size.
