Blazor - Execute a parent component's method when a child component onclick event occurs

Question

I need that onclick event occurring in the child component, execute ShowMessage method in parent component passing message string as parameter. The following code is not working:

child.razor:

    <input type="text" @bind-value="@message" @onclick="OnClickCallback"/>

    <button @onclick="ChangePassword">Parent button</button>

@code {
    private string message;
    
    [Parameter]
    private string Message {get; set;}

    [Parameter]
    public EventCallback<MouseEventArgs> OnClickCallback {get; set;}

    [Parameter]
    public EventCallback<string> OnClick { get; set; }

    private async Task ChangePassword()
    {
        await OnClick.InvokeAsync(message);
    }
    
}

parent.razor:

@page "/parent"

<Child @bind-Message="message" OnClickCallback="@ShowMessage"></Child>

<p>@message</p>

@code {
    private string message;

    private void ShowMessage(MouseEventArgs args, string e)
    {
        message = e;
    }
}

Error: cannot convert from 'method group' to 'EventCallback' on OnClickCallback="@ShowMessage"

Balneal

why is not working? have you tried debugging it? where does not work according to the debugging? – Hervey

@Hervey - I added the error message. Tks. – Balneal

@BrianParker - I'm not quite sure if I got it. Where do I need to put it? – Balneal

Answer 1

You'll need to define two parameter properties, one to contain the message passed from the parent component, and the second, to hold the callback to the parent's ShowMessage method that will be called when you click on the "Parent button" button

Child.razor

 <input type="text" @bind="@message" />

    <button @onclick="ChangePassword">Parent button</button>

@code {
    private string message;
    
    [Parameter]
    public string Message {get; set;}
       
    [Parameter]
    public EventCallback<string> OnClickCallback {get; set;}

    
    private async Task ChangePassword()
    {
        await OnClickCallback.InvokeAsync(message);
    }
    

Parent.razor

 @page "/parent"
    
    <Child Message="message" OnClickCallback="@ShowMessage"/>
<p>@message</p>

@code {
    private string message;

   private void ShowMessage(string _message)
    {
        message = _message;
    }
}

Circum

Answer 2

ChatSendBox.razor

<form @onsubmit="Click">
    <div class="input-group">
        <input @ref="input" @bind-value="@Value" disabled="@IsDisabled" type="text" class="form-control" placeholder="@Placeholder" aria-label="@Placeholder" aria-describedby="button-addon">
        <div class="input-group-append">
            <button disabled="@IsDisabled" class="btn btn-primary" type="submit" id="button-addon" >@Label</button>
        </div>
    </div>
</form>

ChatSendBox.razor.cs

public partial class ChatSendBox
{
    [Parameter]
    public string Value { get; set; }

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

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

    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }

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

    [Parameter]
    public bool IsDisabled { get; set; }

    public async Task Click()
    {
        await ValueChanged.InvokeAsync(Value);
        OnClick?.Invoke();
    }

    public ValueTask FocusAsync() => input.FocusAsync();

    public void Disable()
    {
        IsDisabled = true;
        InvokeAsync(StateHasChanged);
    }

    public void Enable()
    {
        IsDisabled = false;
        InvokeAsync(StateHasChanged);
    }

    private ElementReference input;
}

ParentComponent.razor

<ChatSendBox Label="Send"
             Placeholder="Input message"
             @bind-Value=@message
             OnClick="OnClick"
             @ref=chatSendBox />
<h3>@message</h3>

ParentComponent.razor.cs

public partial class ParentComponent
{
    [Inject]
    IJSRuntime JsRuntime { get; set; }

    string message;
    ChatSendBox chatSendBox;
    void OnClick()
    {
        JsRuntime.InvokeAsync<object>("alert", new[] { message });
        message = "";
        chatSendBox.FocusAsync();
    }
}

Note: I use a form to allow the user to use "Enter" for send.

Repository

Yearbook

Answer 3

Guyz, this is the correct code from Microsoft site. https://learn.microsoft.com/en-us/aspnet/core/blazor/components/event-handling?view=aspnetcore-7.0

A common scenario with nested components executes a parent component's method when a child component event occurs. An onclick event occurring in the child component is a common use case. To expose events across components, use an EventCallback. A parent component can assign a callback method to a child component's EventCallback.

The following Child component demonstrates how a button's onclick handler is set up to receive an EventCallback delegate from the sample's ParentComponent. The EventCallback is typed with MouseEventArgs, which is appropriate for an onclick event from a peripheral device.

Child.razor:

<p>
    <button @onclick="OnClickCallback">
        Trigger a Parent component method
    </button>
</p>

@code {
    [Parameter]
    public string? Title { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}

Parent.razor:

@page "/parent"

<h1>Parent-child example</h1>

<Child Title="Panel Title from Parent" OnClickCallback="@ShowMessage">
    Content of the child component is supplied by the parent component.
</Child>

<p>@message</p>

@code {
    private string? message;

    private void ShowMessage(MouseEventArgs e)
    {
        message = $"Blaze a new trail with Blazor! ({e.ScreenX}:{e.ScreenY})";
    }
}

Virginia