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

Platform: Blazor| Category: Components

To disable a button in Blazor after it is clicked, set the disabled property to true for the button element by binding the property. In the sample, the disabled property of a button element is set to true on button click.

<button class="btn btn-primary" disabled=@IsTaskRunning @onclick="Clicked" > @ButtonName</button>

@code {

    bool IsTaskRunning = false;
    string ButtonName = "Click Me";
    async void Clicked()
    {
        IsTaskRunning = true;
        ButtonName = "Disabled";
        await OnButtonClick();

        //IsTaskRunning = false; use this to enable the button after the button click function executed
        StateHasChanged();
    }

    Task OnButtonClick()
    {
        //here user can perform buton click function
        return Task.Delay(6000);
    }

}

Share with

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.