Uncaught ReferenceError: OnClickCallback is not defined ASP.NET Blazor Client

Question

I am trying to call property for an event looking at MSDN and some stackoverflow posts for modal window(from here). But, I am getting an error in browser console saying Uncaught ReferenceError: OnClickCallback is not defined. I'm working with Blazor Client.

My component

<div class="modal @ModalClass" tabindex="-1" role="dialog" style="display:@ModalDisplay">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">@Title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" @onclick="() => Close()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>@ChildContent</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="OnClickCallback">Continue</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal" @onclick="() => Close()">Close</button>
            </div>
        </div>
    </div>
</div>

@if (ShowBackdrop)
{
    <div class="modal-backdrop fade show"></div>
}

@code {

    public Guid Guid = Guid.NewGuid();
    public string ModalDisplay = "none;";
    public string ModalClass = "";
    public bool ShowBackdrop = false;

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

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

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

    public void Open()
    {
        ModalDisplay = "block;";
        ModalClass = "Show";
        ShowBackdrop = true;
        StateHasChanged();
    }

    public void Close()
    {
        ModalDisplay = "none";
        ModalClass = "";
        ShowBackdrop = false;
        StateHasChanged();
    }

}

Title and ChildContent works perfectly. But the OnClickCallback event is throwing error.

My parent component where I'm trying to pass the event.

<BlazorApp1.Components.ModalComponent @ref="Modal" Title="Warning" OnClickCallback="@AddNewEducation">
    <p>Do you wish to continue?</p>
</BlazorApp1.Components.ModalComponent>

@Code

private async Task AddNewEducation(MouseEventArgs e)
    {
        message = await Http.PostAsJsonAsync("api/Education", educationData);

        if (message.IsSuccessStatusCode)
        {
            educationData.Description = string.Empty;
            errorMessage = "Data saved successfully";
            await ReloadData();
        }
        else
        {
            errorMessage = "Data saving failed";
        }

    }

I have gone through the official documentation and nothing worked.

Do anyone know whats the mistake in my code?

score 2 · Accepted Answer · answered Jun 18 '20 at 19:26

When you do something like this:

OnClickCallback="@AddNewEducation"

You tell the compiler that OnClickCallback attribute represents an EventCallBack 'delegate' in the child component, and you want the AddNewEducation method to be called when the delegate is triggered. This is fine. And this:

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

is also fine. Now, what you need is code to trigger the OnClickCallback 'delegate'. The only code using this delegate that I can see is:

<button type="button" class="btn btn-primary" 
                              onclick="OnClickCallback">Continue</button>

This code render an Html button element whose onclick attribute is assigned with a string value "OnClickCallback". I guess, however, that you meant: trigger the delegate when I click on the button, right ?

There are two ways to do that. Here's one:

<button type="button" class="btn btn-primary" 
                     @onclick="@((args) => 
                         OnClickCallback.Invoke(args))">Continue</button>

Note: @onclick compiler attribute directive instruct the compiler to create a click event handler in the form of a lambda expression that invoke the OnClickCallback delegate (encapsulating the method AddNewEducation defined on the parent, and passing it the MouseEventArgs parameter.

Hope this helps...

I tried this. But the compiler is throwing error "Cannot convert lambda expression to type 'object' because it is not a delegate type" — smilu, Jun 19 '20 at 05:09
ignore my previous comment. it worked. Thanks a lot. I had a mistake in my code. I had written "onclick" instead of "@onclick". Thats why i was getting the error "Cannot convert lambda expression to type" — smilu, Jun 19 '20 at 05:21

Uncaught ReferenceError: OnClickCallback is not defined ASP.NET Blazor Client

1 Answers1