API 호출 후 하위 구성 요소에서 기본 .RAZOR 페이지를 새로 고치는 방법은 무엇입니까?

API 호출이 완료된 후 하위 구성 요소에서 기본 .RAZOR 페이지를 트리거/새로 고치는 방법

문제 개요

API 호출이 완료되고 데이터를 사용할 수 있게 되면 기본 .RAZOR 페이지를 새로 고쳐야 합니다. 문제는 데이터가 준비되었음을 나타내고 이에 따라 페이지 새로 고침을 시작하는 "트리거"를 찾는 것입니다.

솔루션

1. 범위 서비스(AppState) 구현

반환된 데이터 세트를 관리하고 애플리케이션의 모든 구성 요소에 액세스할 수 있도록 범위가 지정된 서비스(AppState)를 만듭니다.

2. 표시 구성 요소(SearchResults.razor)

SearchResults.razor에서 페이지가 로드될 때 AppState 서비스에서 데이터를 가져와 루프에 표시합니다. API가 데이터를 반환할 때 if 문을 사용하여 조건부로 데이터를 표시하거나 스피너를 로드합니다.

3. 서브 필터 구성품 통합

사용자가 하위 구성 요소에서 필터를 적용하는 경우 각 구성 요소에 다음 코드를 사용하세요.

<code class="language-csharp">string href = "/searchresults" + // 其他参数在此处 ...
NavigationManager.NavigateTo(href);</code>

필터가 적용될 때 항상 SearchResults.razor로 리디렉션됩니다.

4. 상태/알림 모드 활용

AppState 서비스에서 변경 사항을 브로드캐스트하는 상태/알림 패턴을 구현합니다. 이는 하위 구성 요소에서 다음 방법을 사용하여 달성할 수 있습니다.

<code class="language-csharp">// FilterRazorComponent01.razor 中的示例
//...

public async Task OnSomeEventAsync()
{
    // 模拟一些 API 调用并触发数据更新
    await Task.Delay(3000);
    AppState.NotifyListChanged(AppState.Records, EventArgs.Empty);
    NavigationManager.NavigateTo(NavigationManager.Uri);
}</code>

5. 알림 이벤트 등록

SearchResults.razor에서 AppState의 ListChanged 이벤트를 등록하고 이벤트가 실행될 때 StateHasChanged를 호출하여 새로 고침을 트리거합니다.

<code class="language-csharp">this.AppState.ListChanged += this.OnListChanged;
//...

private void OnListChanged(object sender, EventArgs e)
    => this.InvokeAsync(this.StateHasChanged);</code>

6. 하위 이벤트 페이지 새로고침 처리

하위 구성 요소가 AppState를 업데이트하는 이벤트를 트리거하면 ListChanged 이벤트가 브로드캐스트되고 SearchResults.razor는 페이지를 새로 고치기 위해 StateHasChanged를 트리거하여 응답합니다. 이렇게 하면 필터 구성 요소의 변경 사항에 따라 기본 페이지의 표시가 업데이트됩니다.

위 내용은 API 호출 후 하위 구성 요소에서 기본 .RAZOR 페이지를 새로 고치는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!