Blazor WASM 中的意外 UI 绑定行为

Question

我在 Blazor WASM 和 Blazor 服务器之间的 UI 绑定行为中遇到了意外（且莫名其妙）的差异。鉴于以下 razor 组件，在 Blazor Server 和 Blazor WASM 中，“发送”按钮在请求期间被正确禁用：

<MudButton Disabled="isProcessing" OnClick="Submit">Send</MudButton>

@code {
    private bool isProcessing;

    private async Task Submit()
    {
        isProcessing = true;
        var contacts = await Mediator.Send(getContacts);
        isProcessing = false;
    }    
}

在向提交方法添加第二个等待调用 (IsValidAsync()) 后，按钮现在在 Blazor WASM 中的请求期间保持启用，我认为这是错误的。在 Blazor Server 中，它仍然按预期被禁用：

private async Task Submit()
{
    if (await validator.IsValidAsync())
    {
        isProcessing = true;
        var contacts = await Mediator.Send(getContacts);
        isProcessing = false;
    }
}

这种绑定在 Blazor WASM 中不起作用是否有明确的原因？或者这是 Blazor 中的一个明显错误？

Answer 1

规则是您可以免费获得 2 个隐含的 StatehasChanged() 调用，1 个在事件处理程序之前和 1 个之后。

因此，您在第一次等待时会获得“免费更新”，但是当您的代码中有更多步骤（需要输出）时，您需要提供帮助：

private async Task Submit()
{
   if (await validator.IsValidAsync())  // consumes the first StateHasChanged
   {
      isProcessing = true;

      StateHasChanged();    // request an update

      var contacts = await Mediator.Send(getContacts); // update UI in background
      isProcessing = false;     
   }
   // one implied StateHasChanged for free again
}

这个模式应该用在 Server 和 Wasm 上。原始代码在服务器上为您工作的原因尚不清楚。这可能是 IsValidAsync() 的侥幸，具有非异步代码路径。

Answer 2

我很惊讶它的行为方式不同，但 Server 和 WASM 之间存在显着差异，这可以解释发生了什么。我对 MudBlazor 不是很熟悉，所以我不确定 MudBlazor 内部是如何工作的。

不同之处在于浏览器对于所有操作只有一个线程。服务器与服务器实例上可用的一样多，几乎所有情况都不止一个。

试试：

private async Task Submit()
{
    isProcessing = true;
    if (await validator.IsValidAsync())
    {
        var contacts = await Mediator.Send(getContacts);
    }
    isProcessing = false;
}

或

private async Task Submit()
{
    if (await validator.IsValidAsync())
    {
        isProcessing = true;
        await InvokeAsync(StateHasChanged);
        var contacts = await Mediator.Send(getContacts);
        isProcessing = false;
    }
}

事件处理程序基本上是这样做的：

var task = Submit();
StateHasChanged();
if (!task.IsCompleted || !task.IsCanceled)
{
  await task;
  StateHasChanged();
}

您可以在ComponentBase 中看到这种模式。它说如果任务成功，那么我们更新 UI，等待它完成，然后再次更新 UI。如果它没有产生，那么我们会在它完成后更新 UI。我的服务器代码和 WASM 代码的行为相同 - 确定您的代码有何不同。

您的代码在if (await validator.IsValidAsync()) 中产生，因此第一个StateHasChanged 在设置isProcessing 之前被调用。