Uncaught ReferenceError: OnClickCallback не определен ASP. NET Клиент Blazor - PullRequest
Новая
       40

Uncaught ReferenceError: OnClickCallback не определен ASP. NET Клиент Blazor

0 голосов
/ 18 июня 2020

Я пытаюсь вызвать свойство для события, просматривающего MSDN, и некоторые сообщения stackoverflow для модального окна ( отсюда ). Но я получаю сообщение об ошибке в консоли браузера Uncaught ReferenceError: OnClickCallback is not defined. Я работаю с Blazor Client.

Мой компонент 

<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 и ChildContent работает отлично. Но событие OnClickCallback вызывает ошибку.

Мой родительский компонент, в котором я пытаюсь передать событие. 

<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";
        }

    }

Я просмотрел официальную документацию, но ничего не помогло.

Кто-нибудь знает, в чем ошибка в моем коде?

1 Ответ

1 голос
/ 18 июня 2020

Когда вы делаете что-то вроде этого: 

OnClickCallback="@AddNewEducation"

Вы сообщаете компилятору, что атрибут OnClickCallback представляет «делегат» EventCallBack в дочернем компоненте, и вы хотите, чтобы метод AddNewEducation вызывался, когда делегат срабатывает. Это отлично. И это: 

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

тоже нормально. Теперь вам нужен код для запуска «делегата» OnClickCallback. Единственный код, использующий этого делегата, который я вижу: 

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

Этот код отображает элемент кнопки Html, атрибуту onclick которого присвоено строковое значение «OnClickCallback». Однако я предполагаю, что вы имели в виду: запускать делегата, когда я нажимаю на кнопку, верно?

Есть два способа сделать это. Вот один: 

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

Примечание: директива атрибута компилятора @onclick инструктирует компилятор создать обработчик события щелчка в форме лямбда-выражения, которое вызывает делегат OnClickCallback (инкапсулируя метод AddNewEducation, определенный для родительского элемента, и передав ему параметр MouseEventArgs.

Надеюсь, это поможет ...

...