如何在 Blazor 中单击后立即禁用/隐藏按钮？

Question

我们注意到，在我们的 Blazor 服务器端应用程序中，用户可以无意中多次单击按钮。如何使用 Blazor 框架中可用的选项防止这种情况发生？

只要他们点击按钮，就可以将按钮的文本更改为“正在处理...”这样简单的事情就可以满足我们的要求，但我不确定如何实现这一点。单击事件的处理程序需要几秒钟的时间来处理。

任何指针？

Answer 1

<button class="btn" disabled="@isTaskRunning" @onclick="DispatchTask">Click me</button>

这与处理程序方法配合使用效果最好async Task，如下所示

async Task DispatchTask()   // avoid async void
{
    isTaskRunning = true;
    await Task.Delay(1);    // don't rely on DoLongWork() executing async
    await DoLongWork();

    isTaskRunning = false;
    // StateHasChanged();  // only needed in an async void
}

假设 DoWork() 方法如下所示

async Task DoLongWork()
{
    Thread.Sleep(6000);   // synchronous
}

然后它会同步执行，尽管async. 补救措施Task.Delay(1)就是这样。

Answer 2

您可能有以下两个问题之一或两者兼而有之：

1. 延迟是一个问题。确保您在启用 Web 套接字的情况下托管您的应用程序。该设置取决于主机，例如：Azure 应用服务器在设置下有一个用于 Web 套接字的简单开/关旋钮。请参阅此博客文章中的最后一步http://blazorhelpwebsite.com/Blog/tabid/61/EntryId/4349/Deploying-A-Server-Side-Blazor-Application-To-Azure.aspx
2. 您有一项长时间运行的任务。

对于长时间运行的任务，您可以尝试以下解决方案。我没有测试过，里程可能会有所不同。

<button disabled=@IsTaskRunning @onclick="DispatchTask">Submit</button>

@code {

    bool IsTaskRunning = false;

    async void DispatchTask()
    {
        IsTaskRunning = true;

        await DoLongWork();

        IsTaskRunning = false;
        StateHasChanged();
    }

    Task DoLongWork()
    {
        return Task.Delay(6000);
    }

}