How to disable/hide a button as soon as clicked in Blazor?

Question

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.

Any pointers?

Answer 1

You likely have one of two problems or both:

1. Latency is an issue. Make sure you are hosting your application with Web Sockets enabled. The setting is dependent on the host, ex: Azure App Servers has a simple on/off knob for Web Sockets under settings. See the very last step in this blog post http://blazorhelpwebsite.com/Blog/tabid/61/EntryId/4349/Deploying-A-Server-Side-Blazor-Application-To-Azure.aspx
2. You have a long running task.

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

}