Creating a generic button component in Blazor Server App

Question

I'm trying to make a generic custom button component. I have the following codes:

StyledButtton.razor (Child Component):

    <div @onclick="@(() => onClick.InvokeAsync())" class="styled-btn" style="width: @Width; height: @Height;
                    border-radius: @BorderRadius;">
        <i class="@IconClass" style="font-size: @IconSize; color: @IconColor"></i>
    </div>

<style>
.styled-btn {
    display: flex;
    align-items: center;
    background-color: #fff;
    justify-content: center;
    margin: 0 5px;
    box-shadow: 0px 0px 2px 1px rgb(0 0 0 / 30%);
}

    .styled-btn:hover {
        box-shadow: 0px 0px 6px 3px rgb(0 0 0 / 20%);
        transition: all 0.3s ease;
    }

    .styled-btn:active {
        background-color: #ffd800;
        transition: all 0.1s ease;
    }
</style>
    
    
@code {
    [Parameter]
    public string Width { get; set; }
    [Parameter]
    public string Height { get; set; }
    [Parameter]
    public string BorderRadius { get; set; }
    [Parameter]
    public string IconColor { get; set; }
    [Parameter]
    public string IconClass { get; set; }
    [Parameter]
    public string IconSize { get; set; }
    [Parameter]
    public EventCallback onClick { get; set; }
}

I use this button component in the following code:

Equipment.razor (Parent Component):

<TitleBar>
    <StyledButton BorderRadius="10px" Width="40px" Height="40px" IconColor="Black" IconSize="20px" IconClass="fa-solid fa-power-off" onclick="@ToggleSelectionMode"></StyledButton>
</StyledButton>
</TitleBar>

@code {
    public Syncfusion.Blazor.Grids.SelectionType SelectionType { get; set; } = Syncfusion.Blazor.Grids.SelectionType.Single;

    void ToggleSelectionMode()
    {
        if (SelectionType == Syncfusion.Blazor.Grids.SelectionType.Single)
        {
            SelectionType = Syncfusion.Blazor.Grids.SelectionType.Multiple;
        }
        else
        {
            SelectionType = Syncfusion.Blazor.Grids.SelectionType.Single;
        }
    }
}

I want to create a generic button that has onClick event handler and I can use it in different scenarios. When I run the code, the following error is shown:

An unhandled exception occurred while processing the request. InvalidCastException: Unable to cast object of type 'System.Action' to type 'Microsoft.AspNetCore.Components.EventCallback'. Microsoft.AspNetCore.Components.Reflection.PropertySetter.CallPropertySetter<TTarget, TValue>(Action<TTarget, TValue> setter, object target, object value)

InvalidOperationException: Unable to set property 'onclick' on object of type 'ArtaNG_UI.Shared.SharedComponents.StyledButton'. The error was: Unable to cast object of type 'System.Action' to type 'Microsoft.AspNetCore.Components.EventCallback'.

How can I solve this problem?

Kiran Joshi · Accepted Answer · 2023-02-20 06:23:56Z

2

You just need some correction with Eventcallback and onclick event.

ButtonBase.cs

[Parameter] public string ButtonName {get;set;}

[Parameter] public EventCallback<MouseEventArgs> OnButtonClick {get;set;}
. 
.  
.  
and so on

Button.razor

<Button @onclick="@OnButtonClick"> @ButtonName </Button>

AnotherComp.razor

<Button ButtonName="Name" OnButtonClick="@(()=> Foo())"></Button>

You have to import your button component in _Import.razor file to access it globally.

I hope it will help you.

answered Feb 20, 2023 at 6:23

Kiran Joshi

1,8763 gold badges15 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Creating a generic button component in Blazor Server App

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related