Question

在客户端blazor应用程序中，我有一个提交的表单。在表单的onValidSubmit中，我向服务器发出异步调用以发布数据。帖子回来时，我告诉模式窗口关闭。但是，直到再次单击“提交”按钮，模态窗口才会关闭。如果我删除了异步发布，则模式窗口在第一次提交时关闭。有人知道这里会发生什么吗？

具有表单的页面

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

...
}

Answer 1

此代码：private async void AddOrig()

应该为private async Task AddOrig()

如果您不使用Task作为返回对象，则运行时将无法知道异步调用何时完成，其结果是不呈现（因为不会自动调用StateHasChanged方法），这意味着您的模态仍然可见

Answer 2

始终避免使用async void：

private async Task AddOrig()
{
   ...
}

使用async void，当您等待HttpClient调用时，将发生（重新）渲染。您可以使用一个额外的StateHasChanged（）进行修复，但是这里没有理由要使异步无效。

客户端Blazor表单提交两次

2 个答案: