客户端 Blazor 表单提交两次答案

【问题标题】：Client Side Blazor form submit twice客户端 Blazor 表单提交两次
【发布时间】：2020-11-23 11:35:18
【问题描述】：

在客户端 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; }

...
}

【问题讨论】：

第一次提交时switch 中的default 是否会被命中？
默认情况确实会受到打击。
可能在任务结束后 UI 没有刷新。尝试在方法AddOrig的末尾添加StateHasChanged();。

标签： c# forms blazor

【解决方案1】：

此代码：private async void AddOrig()

应该是private async Task AddOrig()

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

【讨论】：

【解决方案2】：

始终避免async void：

private async Task AddOrig()
{
   ...
}

使用async void 时，会在您等待 HttpClient 调用时进行（重新）渲染。你可以用一个额外的 StateHasChanged() 来修复它，但这里没有理由 async void。

【讨论】：