CODEWITHSUNDEEP
c#asp.netasp.net-coreasp.net-web-apiblazor
smilu
smilu

Reputation: 899

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

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?

Upvotes: 2

Views: 1396

Answers (1)

enet
enet

Reputation: 45626

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...

Upvotes: 2

Related Questions