带有自定义 EventCallback 的 Blazor 组件不起作用

Question

I'm creating a very simple Blazor component for my Blazor WebAssembly. The component is a modal dialog. When the user click on a Cancel button the EventCallBack return false , true for the Ok . Here the code.

<div class="modal fade show" id="myModal" 
     style="display:block; background-color: rgba(10,10,10,.8);" 
     aria-modal="true" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">@Title</h4>
                <button type="button" class="close" 
                        @onclick="@ModalCancel">&times;</button>
            </div>
            <div class="modal-body">
                <p>@Text</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" 
                        @onclick="@ModalCancel">Cancel</button>
                <button type="button" class="btn btn-primary" 
                        @onclick=@ModalOk>OK</button>
            </div>
        </div>
    </div>
</div>

@code {
    [Parameter] public long Id { get; set; }
    [Parameter] public string Title { get; set; }
    [Parameter] public string Text { get; set; }
    [Parameter] public ModalDialogType DialogType { get; set; }
    [Parameter] public EventCallback<bool> OnClose { get; set; }

    private Task ModalCancel()
    {
        //return OnClose.InvokeAsync(new ModalDialogResponse()
        //{
        //  Id = Id,
        //  IsOk = false
        //});
        return OnClose.InvokeAsync(false);
    }

    private Task ModalOk()
    {
        //return OnClose.InvokeAsync(new ModalDialogResponse()
        //{
        //  Id = Id,
        //  IsOk = true
        //});
        return OnClose.InvokeAsync(true);
    }
}

Now, when the main page receives the EventCallback , what is the Id? Then, I thought to add a parameter for the Id and the callback returns a custom response

public class ModalDialogResponse
{
    public long Id { get; set; }
    public bool IsOk { get; set; }
}

If I declare in the component

[Parameter] public EventCallback<ModalDialogResponse> OnClose { get; set; }

and then in the main page I call the modal dialog like

<ModalDialog Title="My title" Text="Here the message"
             Id="@ItemId"
             OnClose="@OnCloneDialogClose"
             DialogType="ModalDialogType.YesNo" />

and then

private async Task OnCloneDialogClose(ModalDialogResponse response)
{
}

Visual Studio gives me an error

CS1503 Argument 2: cannot convert from 'method group' to 'EventCallback'

I can't understand what it is wrong.

Answer 1

I have a recollection of Blazor not liking it when you change the signature of a callback (eg from bool to ModalDialogResponse). I often see a similar error. But, a full rebuild normally sorts it out.

You could also try commenting out your <ModalDialog... />, rebuilding and then put it back and try again.

Or, deleting the obj and bin directories and rebuilding.

Finally, if you're looking for the Id, rather than pass it back up, as you already have it in the parent component, you could use:

<ModalDialog Title="My title" Text="Here the message"
             Id="@ItemId"
             OnClose=@((isOk) => OnCloneDialogClose(isOk, @ItemId))
             DialogType="ModalDialogType.YesNo" />

private async Task OnCloneDialogClose(bool isOk, long id)
{
}

and keep the EventCall back declaration as:

[Parameter] public EventCallback<bool> OnClose { get; set; }