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

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

This works best with an async Task handler method, as

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
}

Suppose the DoWork() method looks like

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

Then it executes synchronously, despite the async. The Task.Delay(1) remedies that.

Answer 2

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

}

Answer 3

How about a generic solution? SpinnerButton

It could easily be edited to use a standard button. Generate a SVG animation here.

(both Radzen and Loading.io are free)

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

Use like this

<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"] = "";
    }

}