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

Question

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

只要他们单击按钮，将按钮的文本更改为“处理中...”就可以满足我们的要求，但我不知道如何实现这一点。点击事件的处理程序需要几秒钟来处理。

任何指针？

Answer 1

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

1. 延迟是一个问题。确保您在托管应用程序时启用了 Web 套接字。该设置取决于主机，例如：Azure App Servers 在设置下有一个用于 Web Sockets 的简单开/关旋钮。请参阅此博客文章中的最后一步 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);
    }

}

Answer 2

这最适合异步处理程序方法，因为

async Task DispatchTask()
{
    IsTaskRunning = true;

    await DoLongWork();

    IsTaskRunning = false;
    // StateHasChanged();  // called automatically
}

这是来自@EdCharbeneau 的回答，但请注意它现在是async task 方法。

但这仅在 DoLongWork() 真正异步时才有效。这意味着它必须在早期进行一些实际的异步 I/O。您不能总是说，可等待的方法可能（有时）完全或大部分同步执行。当这种情况发生时，您的 GUI 不会更新。

假设 DoWork() 方法看起来更像

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

那么这仍然会禁用按钮：

async Task DispatchTask()
{
    IsTaskRunning = true;
    await Task.Delay(1);  // allow the GUI to catch up

    await DoLongWork();   // fake async

    IsTaskRunning = false;        
}

Answer 3

通用解决方案怎么样？微调按钮

可以很容易地编辑它以使用标准按钮。 Generate a SVG animation here.

（Radzen 和 Loading.io 都是免费的）

<RadzenButton Text="@(IsProcessing ? null : Text)" Image="@(IsProcessing ? Spinner : null)" Disabled="@IsProcessing" @attributes="@AdditionalAttributes" />

@code {
    [Parameter]
    public string Text { get; set; } = string.Empty;

    [Parameter]
    public string Spinner { get; set; } = "/images/spinner-button.svg";

    [Parameter(CaptureUnmatchedValues = true)]
    public IDictionary<string, object>? AdditionalAttributes { get; set; }

    public bool IsProcessing { get; private set; }

    [Parameter]
    public EventCallback OnSubmit { get; set; }

    public async Task FormSubmitAsync()
    {
        if (IsProcessing) { return; }

        IsProcessing = true;
        try
        {
            await OnSubmit.InvokeAsync(null);
        }
        finally
        {
            IsProcessing = false;
        }
    }
}

这样使用

<EditForm OnValidSubmit="@SubmitAsync">
    <SpinnerButton @ref="ButtonRef" style="width:150px" Text="Login" 
        ButtonType="@((Radzen.ButtonType)ButtonType.Submit)" 
        ButtonStyle="@((Radzen.ButtonStyle)ButtonStyle.Primary)"
        OnSubmit="LogInAsync" />
</EditForm>

@code {
    public SpinnerButton? ButtonRef { get; set; }
    public async Task SubmitAsync() => await ButtonRef!.FormSubmitAsync().ConfigureAwait(false);

    public async Task LogInAsync()
    {
        // Get stuff done!
    }
}

Answer 4

private Dictionary<string, string> control = new Dictionary<string, string>();

function click(){
    lock (control)
        {
            if (!control.ContainsKey("click"))
            {
            control.Add("click", "executing");
            }
            else
            {
            if (control["click"] == "executing")
            {
                //Double click detected
                return;
            }
            else
            {
                control["click"] = "executing";
            }
            }
        }


//Do usual stuffs here


    lock (control)
    {
        control["click"] = "";
    }

}