Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Blazor EventCallback with Multiple Parameters - Child and Parent component

$
0
0

I have been strugling with passing more than one parameter from child component to parent via EventCaalback.So here is my working solution:

Child component:

(ListItem_DC is my object which I want to pass to Parent component togetehr with other bool[] parameter)

<button class="my-button" @onclick="@(async () => await OnClickMoveHandler(Item, true, false))" >1 Up</button><button class="my-button" @onclick="@(async () => await OnClickMoveHandler(Item, false, false))" >1 Down</button><button class="my-button" @onclick="@(async () => await OnClickMoveHandler(Item, true, true))" >To top</button><button class="my-button" @onclick="@(async () => await OnClickMoveHandler(Item, false, true))" >To bottom</button>@code {    [Parameter] public ListItem_DC Item { get; set; }    [Parameter] public EventCallback<(ListItem_DC, bool, bool)> OnClickMove {get; set;} protected virtual async Task OnClickMoveHandler(ListItem_DC item, bool directionUp, bool toTheTopOrBottom) {     await OnClickMove.InvokeAsync((item, directionUp, toTheTopOrBottom )); }}

Parent component

...<ChildComponent Item="@context" OnClickMove="MoveItemHandler" />...@code {    private async Task MoveItemHandler((ListItem_DC item, bool directionUp, bool toTheTopOrBottom) args)    {        //do something with parameters        await MoveItem(args.item, args.directionUp, args.toTheTopOrBottom);    }}

I tried these topics:Topic 1Topic 2

But there is no clear example, so i added it here.

The main reason it is working is the way i'm calling from Parent:OnClickMove="MoveItemHandler"

and the definition of called fn in Parent:private async Task MoveItemHandler((ListItem_DC item, bool directionUp, bool toTheTopOrBottom) args)


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>