Passing method to component

13
votes

I have been trying to work out how if its possible and how to pass a method from the main page into a component in Blazor.

I have a simple razor page, which contains a component with a button. I want to pass the onclick method from the razor page to the button in the component

Note: I do not need this method to return anything void is fine. I just need to be able to call a method from the main page in a button on the component. I only added int here as a guess since it was complaining about T

Page

@page "/test"
@using Testing.Client.Model;
@using System.Threading;

<TestMethodPassing ExternalMethod="@btnClick"></TestMethodPassing>

@code {

    public Action<int> btnClick(){ return 1;}

}

Model for component

public class TestingMethodPassingModel : ComponentBase
{
    [Parameter]
    protected Action<int> ExternalMethod { get; set; }
}

component

@inherits TestingMethodPassingModel;
@using testing.Client.Model;
@using System.Threading;


<button class="btn btn-primary" @onclick="@ExternalMethod" autofocus>External button</button>


@code {


    }

Errors

The above code gives me the following error

Gives me No overload for 'btnClick' matches delegate 'Action'

I tried doing type T as well and that failed as Blazor cant for some reason find the reference for type T

Update Note

Working example pieced together from the answers. PassingMethodToComponent

3
c#.net-coreblazor
I don´t know razor so well, but I´m pretty sure an onclick-delegate doesn´t expect an int-argument. – HimBromBeere
I've created your example and it's giving CS1503 Argument 2: cannot convert from 'System.Action<int>' to 'Microsoft.AspNetCore.Components.EventCallback error. And CS0428 Cannot convert method group 'btnClick' to non-delegate type 'object'. Did you intend to invoke the method?. – SᴇM
Your code doesn't really show how/where you want to use the return value. – Henk Holterman
Also return 1; will not compile either - CS0029 Cannot implicitly convert type 'int' to 'System.Action<int>'. – SᴇM
I didn't really attend anything at this point i have been trying to make it work. I dont really need the method to return anything i just need to be able to pass it. Someone on Gitter said to use T and it didnt work so i was grasping at straws assuming it needed a return var. Your right Onclick doesnt need return var – DaImTo

3 Answers

21
votes

Here is an example of passing a method from a parent to a child and the child invoking it. As you don't require a return value I'm just using Action rather than Action<T>.

There are many ways you can make this code more compact, but I've gone for a more verbose example to hopefully show what's happening a bit better.

Parent Component:

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<Child ParentMethod="@SayHello" />

@code {

    private void SayHello()
    {
        Console.WriteLine("Hello!");
    }

}

Child Component:

<h3>Child</h3>

<button @onclick="@InvokeParentMethod">Click Me!</button>

@code {

[Parameter] public Action ParentMethod { get; set; }

private void InvokeParentMethod()
{
    ParentMethod?.Invoke();
}

}
8
votes

This is because the Click event of btnClick isn't of the type Action<int> but actually EventCallback<TIn>. So change you'll need to change a few things around.

change ExternalMethod to

[Parameter]
protected EventCallback<int> ExternalMethod {get; set;}

and change the btnClick to

public void btnClick(int param) { /* code */ }
// and then set the razor to
<TestMethodPassing ExternalMethod="@btnClick"></TestMethodPassing>

// Or do it with a lambda in the razor

<TestMethodPassing ExternalMethod="@((param) => {/* code */ })"></TestMethodPassing>

There is a GitHub issue tracking the new Event Handling and Binding here

4
votes

This should work:

Page:

<TestMethodPassing ExternalMethod="@btnClick"></TestMethodPassing>
<label>@something</label>

@code {

    string something = "1";

    void btnClick()
    {
        something = "11";
    }
}

TestingMethodPassingModel:

[Parameter]
protected Action ExternalMethod { get; set; }

Component:

<button class="btn btn-primary" @onclick="@ExternalMethod" autofocus>External button</button>

For your example (with Action<int>):

Page:

<TestMethodPassing ExternalMethod="@btnClick"></TestMethodPassing>

@code {

    void btnClick(int arg)
    {

    }
}

TestingMethodPassingModel:

[Parameter]
protected Action<int> ExternalMethod { get; set; }

Component:

<button class="btn btn-primary" @onclick="@ClickHandler" autofocus>External button</button>

@code {
    void ClickHandler()
    {
        ExternalMethod.Invoke(10);
    }
}