Razor Components - Parameter Overloading

[vertonghenb]

Currently there is no way to overload [Parameter]'s in Razor Components. For example if you have an OnClick parameter, it has to be an Action<UIMouseEvent> or Func<Task>. This creates 2 parameters on a <MyButton/> component, if you want a async delegate and a sync delegate. Else you'll have to write stuff like

OnClick=@(async (e) => await DoSomething())

The issue

If you look at the Child Component MyButton we have 2 parameters to handle an action OnClick or OnClickAsync. Isn't it possible to combine these 2 parameters into 1?

Parent Component

<h1>Parent Component</h1>
<MyButton OnClickAsync="@DoSomething">My Button</MyButton>
@functions {
    async Task DoSomething()
    {
        await Task.Delay(250);
        StateHasChanged();
    }
}

Child Component (The button itself)

<button class="btn btn-success" onclick="@HandleOnClick">
    @ChildContent
</button>

@functions{
    [Parameter] protected RenderFragment ChildContent { get; set; }
    [Parameter] protected Action<UIMouseEventArgs> OnClick { get; set; }
    [Parameter] protected Func<Task> OnClickAsync { get; set; }

    private async Task HandleOnClick(UIMouseEventArgs args)
    {
        if (OnClick != null && OnClickAsync != null)
            throw new Exception("Only 1 handler can be set.");

        if(OnClick != null)
            OnClick.Invoke(args);

        if (OnClickAsync != null)
            await OnClickAsync.Invoke();
    }
}

Basically it would clean up the calling code to

<MyButton OnClick="@DoSomething">My Button</MyButton>

coming from:

<MyButton OnClickAsync=@(async (e) => await DoSomething())>My Button</MyButton>

• DoSomething() being a Action<UIMouseEvent> or Func<Task> .

[mkArtakMSFT]

Thanks for contacting us, @vertonghenb.
What you're trying to do can be achieved using Event Callbacks, which you can read more about at #6351

[vertonghenb]

@mkArtakMSFT Correct, Thanks for adding these!