Форма Blazor на стороне клиента отправляется дважды - PullRequest
2 голосов
/ 03 августа 2020

В приложении Blazor на стороне клиента у меня есть форма, которая отправляется. В onValidSubmit формы я вызываю асинхронный c вызов на сервер для публикации данных. Когда сообщение возвращается, я приказываю закрыть модальное окно. Однако модальное окно не закрывается, пока я снова не нажму кнопку отправки. Если я удалю сообщение asyn c, модальное окно закроется при первой отправке. Кто-нибудь знает, что здесь может происходить?

страница с формой

<ModalWindow  @bind-ShowWindow="ShowAddwindow">
    <Content>
        <EditForm Model="@Orig" OnValidSubmit="@AddOrig">
            <DataAnnotationsValidator />
            <ValidationSummary />
            <ServerSideValidator />

            <InputText @bind-Value="Orig.Name" id="origName" />
            <button type="submit" class="btn btn-primary">Add</button>
        </EditForm>
    </Content>
</ModalWindow>

private async void AddOrig()
{
    if(!string.IsNullOrEmpty(Orig.Name))
    {
        ResponseContent<bool> result = await httpUtil.PostRequest<bool>("postData", Orig);

        switch(result.Status)
        {
            case System.Net.HttpStatusCode.Unauthorized:
                
                break;

            case System.Net.HttpStatusCode.BadRequest:

                serverSideValidator.DisplayErrors(result.Errors);

                break;

            default:
                ShowAddwindow = false;
                Orig = new Organization();
                break;
        }


    }
}

Modal.razor

<div class="modal" style="display: @_displayType;">

<!-- Modal content -->
<div class="modal-content">
    <span class="close" @onclick="Close">&times;</span>
    <div>@Content</div>
</div>
@code {
    private bool _showWindow;
    [Parameter]
    public bool ShowWindow
    {
        get => _showWindow;
        set
        {
            _showWindow = value;
            _displayType = value ? "block" : "none";
        }
    }

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

...
}

Ответы [ 2 ]

1 голос
/ 03 августа 2020

Всегда избегайте async void:

private async Task AddOrig()
{
   ...
}

С async void (повторное) рендеринг происходит, когда вы ждете вызова HttpClient. Вы можете исправить это с помощью дополнительного StateHasChanged (), но здесь нет причин для asyn c void.

1 голос
/ 03 августа 2020

Этот код: private async void AddOrig()

Должен быть private async Task AddOrig()

Если вы не используете Task в качестве возвращаемого объекта, среда выполнения не может узнать, когда ваш вызов asyn c завершился , результатом которого является отсутствие рендеринга (поскольку метод StateHasChanged не вызывается автоматически), что означает, что ваш модальный элемент все еще виден

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...