Custom component (Blazor)link

This guide shows how to create and use a custom Blazor component using Radzen HTML component. For better integration with Radzen design-time, set/bind component properties, events, etc. please visit CustomComponent article.

Create the componentlink

1. Add a new .razor file in the server/Shared directory of your Radzen application e.g. CustomComponent.razor.

2. Implement the component. For this example it will be a button with one [Parameter] property Title and event Click.

<button type="button" @onclick="@((args) => OnClick(args))">
    @if (!string.IsNullOrEmpty(Title))
    {
        <span class="ui-button-text">@Title</span>
    }
</button>

@code {
    [Parameter]
    public string Title { get; set; }

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

    void OnClick(MouseEventArgs args)
    {
        Click.InvokeAsync(args);
    }
}

Use the custom componentlink

1. Create new page MainPage.

2. Drag and drop a Html component from the Radzen toolbox.

3. Set the Content property to <CustomComponent Title="Test" Click="@CustomComponentClick" />.

4. Open the MainPage.razor.cs file that Radzen has generated for your page to add the CustomComponentClick event handler. Radzen generates that file only once and will not overwrite it.Add the event handler implementation.

using System;
using System.Linq;
using System.Collections.Generic;
using System.Threading.Tasks;
using Radzen;
using Radzen.Blazor;
using Microsoft.AspNetCore.Components.Web;

namespace SampleBlazor.Pages
{
    public partial class MainPageComponent
    {
        protected void CustomComponentClick(MouseEventArgs args)
        {
            Console.WriteLine("Custom component clicked!");
        }
    }
}

5. Run the application.