[Blazor] Button Double Click 방지

Button 클릭시 로직을 처리하는 경우 로딩창을 이용해 Button 의 Double Click 을 방지합니다.

하지만 사용자가 빠르게 Double Click 를 하는 경우 로딩창이 뜨기전에 이벤트가 발생해

이벤트가 두번 타는 경우가 있습니다.

아래는 이를 방지 하기 위한 방법입니다.

Counter.razor

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<button class="btn btn-primary" disabled="@isBusy" @onclick="IncrementCountIsBusy">Click IsBusy (@currentCount)</button>

@code {

    private bool isBusy = false;

    [Parameter]
    public int Increment { get; set; } = 1;

    private int currentCount = 0;

    public async Task IncrementCountIsBusy()
    {
        if(isBusy)
        {
            return;
        }

        isBusy = true;

        try
        {
            await Task.Delay(2000);
            currentCount += Increment;
        }
        finally
        {
            isBusy = false;
        }
    }
}

결과
아래 그림처럼 버튼 클릭시 버튼이 비활성화 되면서 추가 클릭이벤트를 방지하게됩니다.

[Source]
https://github.com/kei-soft/Blazor.AppTest/blob/master/Blazor.AppTest/Pages/Counter.razor

GitHub - kei-soft/Blazor.AppTest

 

참고
https://github.com/dotnet/aspnetcore/issues/23416