如何在Blazor中单击后立即禁用/隐藏按钮? [英] How to disable/hide a button as soon as clicked in Blazor?

问题描述

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

We are noticing that in our Blazor server-side application, users are able to click a button more than once unintentionally. How can I prevent this using options available in Blazor framework?

只要将按钮的文本更改为正在处理..."，只要他们点击按钮就可以满足我们的要求，但是我不确定如何实现.点击事件的处理程序需要花费几秒钟的时间.

Anything as simple as changing the text of the button to "processing..." as soon as they click the button will suffice our requirements but I am not sure how to achieve this. Handler for click event takes few seconds to process.

有指针吗?

推荐答案

您可能会遇到以下两个问题之一，或同时出现以下两个问题:

You likely have one of two problems or both:

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

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

For a long running task you can try the following solution. I have not tested it, mileage may vary.

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

}

这篇关于如何在Blazor中单击后立即禁用/隐藏按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！