Blazor에서 장기 실행 API 호출 중에 스피너를 표시하는 방법은 무엇입니까?

Blazor에서 API 호출 중 대기 또는 스피너 표시

Blazor를 사용하면 대기 커서 또는 스피너 이미지와 같은 시각적 단서를 사용하여 장기 실행 API 호출 중에 사용자에게 피드백을 표시할 수 있습니다.

문제:

Blazor 애플리케이션에서 CSS를 사용하여 다음을 수행하려고 했습니다. API 호출 중에 회전하는 커서를 표시합니다. 그러나 호출이 완료될 때까지 페이지 콘텐츠가 새로 고쳐지지 않았습니다.

해결 방법:

옵션 1: Task.Delay(1) 사용

• 비동기식 메서드를 생성합니다.
• await Task.Delay(1) 또는 wait를 사용합니다. 작업.수율(); API 호출이 완료되기 전에 UI를 강제로 업데이트합니다.

private async Task AsyncLongFunc()    // this is an async task
{
    spinning=true;
    await Task.Delay(1);      // flushing changes. The trick!!
    LongFunc();               // non-async code
    currentCount++;
    spinning=false;
    await Task.Delay(1);      // changes are flushed again    
}

옵션 2: Task.Run() 사용(WebAssembly용 아님)

• LongOperation() 메서드가 비동기가 아닌 경우 이를 작업에 포함하고 다음을 사용하여 기다립니다. Task.Run().

async Task AsyncLongOperation()    // this is an async task
{
    spinning=true;
    await Task.Run(()=> LongOperation());  //<--here!
    currentCount++;
    spinning=false;
}

효과

서버측 사전 렌더링 참고 사항:

Blazor Server 앱에서는 사전 렌더링으로 인해 스피너가 표시되지 않습니다. 표시하려면 OnAfterRender에서 긴 작업을 수행하세요.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {           
        await Task.Run(()=> LongOperation());//<--or Task.Delay(0) without Task.Run
        StateHasChanged();
    }
}

더 많은 예제와 정보는 BlazorPro.Spinkit과 같은 오픈 소스 프로젝트를 참조하세요.

위 내용은 Blazor에서 장기 실행 API 호출 중에 스피너를 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!