Blazor component with custom EventCallback doesn't work

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.

Ignore it. It's an Intellisense fail, not a problem with your code. — Bennyboy1973
– Bennyboy1973, Commented Jun 8, 2021 at 21:15
Hover over the Onclose method where you bind it to "@OnCloseDialog", the intellisense popup will tell you what it's expecting. If it says <System.Boolean> anywhere, you need to clean and rebuild per niel W's answer. I'm 90% sure that's your fix. If it says something like <*****.ModalDialogResponse>, the problem likes somewhere else. — Nik FP
– Nik FP, Commented Jun 8, 2021 at 21:25
Have a look at this particulary the modal 4 demo. github.com/BrianLParker/HowToModal — Brian Parker
– Brian Parker, Commented Jun 9, 2021 at 0:40
Added comment: there are several error messages that VS gives me: ones like yours, and also one about "Authentication" not being part of namespace XYZ. But the site runs nicely, so I ignore those errors. Right now, I have about 6 errors that show all the time in VS, on fully functional pages. — Bennyboy1973
– Bennyboy1973, Commented Jun 9, 2021 at 1:01

Neil W · Accepted Answer · 2021-06-08 19:39:10Z

0

I have a recollection of Blazor not liking it when you change the signature of a callback (e.g. 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; }

answered Jun 8, 2021 at 19:39

Neil W

9,4555 gold badges37 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Enrico Over a year ago

Rebuild doesn't help I tried a lot of times. btw, is it possible to change the signature? Your code is working. Thank you

Neil W Over a year ago

Yes, in principle, changing the signature should not be a problem. It just seems that Blazor dev environment gets in a bit of a twist of you change you've already bound the callback before. It seems to set up some plumbing in the background that doesn't unwind properly at first when you change the signature. One of the above options, normally sorts it out for me.

GuidoG Over a year ago

where do you put the line with the parameter ?

Neil W Over a year ago

If you mean the OnClose parameter, then that is part of the ModalDialog, not the parent component hosting the ModalDialog.

Collectives™ on Stack Overflow

Blazor component with custom EventCallback doesn't work

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related