Blazor EventCallback with Multiple Params - how to respond to event in parent host control

Question

I have a blazor component with an EventCallBack parameter that utilized the new struct format allowing multiple arguments

[Parameter] public EventCallback<(EmployeeShiftDay, DateTime, DateTime)> NewDayScrolledIntoView { get; set; }

eventcallback is invoked in child normally as such

await NewDayScrolledIntoView.InvokeAsync(p1, p2, p3);

In my host page I have the corresponding method to handle the invoke

private void NewDayInView(EmployeeShiftDay dayInView, DateTime weekStart, DateTime weekEnd)
{
   ...
}

How do I add the markup for this EventCallBack in the host component - I need of course 3 params not just one

<ShiftCardScroller NewDayScrolledIntoView="@((args) => NewDayInView(args))" ></ShiftCardScroller>

temporary solution is to reference the component in the parent host with @ref and access public properties in the child but would prefer to send via EventCallBack args — Laurence73, Dec 07 '20 at 15:40
You shouldn't do that like that. Now it's only a warning. In the future an error. — enet, Dec 07 '20 at 21:00
agreed a bad way to do it - have implemented like you and @Brian Parker suggested thanks! — Laurence73, Dec 08 '20 at 15:16

score 32 · Accepted Answer · answered Dec 07 '20 at 22:57

32

You are invoking it deconstructed:

await NewDayScrolledIntoView.InvokeAsync((p1, p2, p3));

When the event is received deconstruct it then:

<ShiftCardScroller NewDayScrolledIntoView="@((args)=> NewDayInView(args.Item1,args.Item2,args.Item3))" />

answered Dec 07 '20 at 22:57

Brian Parker

11,946
2
31
41

7

Did the same, now I get this error in parent component: CS0119 'EventCallback' is a type, which is not valid in the given context – Sharif Yazdian Oct 03 '22 at 22:21
I am using the TUPEL syntax consistently, unlike OP, for declaration, invokation and handler, yet the component parameter gives the error: CS0119 'EventCallback' is a type, which is not valid in the given context multiple times and also CS0119 'int' is a type, which is not valid in the given context – somedotnetguy Oct 07 '22 at 10:33
Using tuples did not work for me. @Khabir solution worked fine. – GerardF Jan 25 '23 at 16:16

score 7 · Answer 2 · answered Aug 07 '21 at 18:55

You can use custom Args Type as below:

public class EventCallbackArgs
{
    public bool Confirm { get; set; }
    public Guid Id { get; set; }
    public string Name { get; set; }
}

This is a sample blazor code

<button type="button" class="btn btn-danger" @onclick="() => OnConfirmationChange(true)">
    Delete
</button>

On Delete button click, OnConfirmationChange is called, inside the code of OnConfirmationChange, you can prepare EventCallbackArgs and invoke ConfirmationChanged

[Parameter]
public EventCallback<EventCallbackArgs> ConfirmationChanged { get; set; }
public EventCallbackArgs args { get; set; }

protected async Task OnConfirmationChange(bool deleteCofirmed)
{
    ShowConfirmation = false;
    args = new EventCallbackArgs { Id = id, Name = name };
    args.Confirm = deleteCofirmed;
    await ConfirmationChanged.InvokeAsync(args);
}

Jeff dWeller · Answer 3 · 2021-11-16T21:23:35.690

6

For me @Brian Parker's solution did not work a slightly modification needed:

(same)

await NewDayScrolledIntoView.InvokeAsync((p1, p2, p3));

Tuple casting:

<ShiftCardScroller NewDayScrolledIntoView="@((args)=> NewDayInView(((EmployeeShiftDay,DateTime,DateTime))args))" />

Method takes one argument. The type is consistent with the previously casted type:

private void NewDayInView((EmployeeShiftDay,DateTime,DateTime)args)
{
   ...
}

Sometimes restarting the Visual studio is needed to get rid of the unrelevant error messages.

edited Nov 16 '21 at 21:23

answered Aug 23 '21 at 16:24

Jeff dWeller

73
1
5

Please explain your modification, how it works and for which cases it is needed and why. – Yunnosch Aug 23 '21 at 16:30
Is it appropiate now or should I make it more verbose? – Jeff dWeller Aug 23 '21 at 16:38
I think more verbose would be better, also using phrases like "because", "in order to" and "thereby", "otherwise"... Consider having a look at [answer]. – Yunnosch Aug 23 '21 at 21:12
sadly this does not workf for me as well. with .NET 6 and current VS version, it seems TUPELS dont work here ?! even simply getting the args param (and doing nothing with it) does not work on step 3, when assigning the handler to the child component in the parent markup. surprissingly, even with the red squiggly lines the project COMPILES AND RUNS but the component behaves faulty. gonna try using a custom type then... – somedotnetguy Oct 07 '22 at 10:54
this actually worked to solve the issue with CS0119 'EventCallback' is a type.. I needed to adapt to my own situation. Then it worked fine. thanks ! – Allie Dec 30 '22 at 10:40

score -1 · Answer 4 · answered Dec 07 '20 at 15:42

-1

you should pass only the name of the Method to the child componant

<ShiftCardScroller NewDayScrolledIntoView="@NewDayInView" ></ShiftCardScroller>

and in the child componant you could invoke the callback with the the parameters that you want

NewDayScrolledIntoView.invokeAsync(Param1,Param1,Param3)

answered Dec 07 '20 at 15:42

yasseros

841
9
16

Thanks for comment but that is not allowed - am already invoking as you mentioned but the host control wont accept "method group" as EventCallBack - its looking for 3 arguments – Laurence73 Dec 07 '20 at 15:48
@Laurence73 apparently this is not possible check this link : https://github.com/dotnet/aspnetcore/issues/23182 – yasseros Dec 07 '20 at 15:58
according to this later post it is! it just doesnt show how to add the component markup! frustrating https://github.com/dotnet/aspnetcore/issues/23603 – Laurence73 Dec 07 '20 at 16:05
I can also just pass back a custom single object with 3 properties too...but defeats the purpose of multiple param ability – Laurence73 Dec 07 '20 at 16:08

Blazor EventCallback with Multiple Params - how to respond to event in parent host control

4 Answers4

Linked