API 呼び出しの完了後にサブコンポーネントからメイン Razor ページを更新するにはどうすればよいですか?

API 呼び出しが完了した後、メイン .RAZOR ページのすべてのサブコンポーネントからメイン .RAZOR ページをトリガー/更新するにはどうすればよいですか?

この問題を解決する鍵は、パブリッシュ/サブスクライブ パターンや通知パターンなどの状態管理パターンを使用することです。このパターンにより、複数のコンポーネントが単一の状態変数の変更をリッスンできるようになります。状態変数が更新されると、変更をリッスンしているすべてのコンポーネントに通知が届き、それに応じて UI が更新されます。

この例では、API 呼び出しが完了したかどうかを示すブール変数を作成します。 API 呼び出しが完了したら、この変数を true に設定すると、リスニングしているすべてのコンポーネントに通知され、UI が更新されます。

このパターンをコードに実装する方法の例を次に示します:

SearchResults.razor:

@page "/searchresults"
@layout PageTopComponents

<LeftMenu>
    <FilterRazorComponent01></FilterRazorComponent01>
    <FilterRazorComponent02></FilterRazorComponent02>
    <FilterRazorComponent03></FilterRazorComponent03>
    <FilterRazorComponent04></FilterRazorComponent04>
</LeftMenu>
<MainContentComponent>
    @if (API_Data_Received != null && API_Data_Received.Count > 0)
    {
        @foreach (var item in API_Data_Received)
        {
            <!-- API Retrieved Data Here -->
        }
    }
    else
    {
        <!-- Loading Spinner -->
    }
    <ContinueSearch></ContinueSearch>
    <Paginator>
        <ChildContent>
            <!-- THIS IS WHERE I DISPLAY ALL SEARCH DATA ... -->
            <!-- CONTAINS: public Paginator PaginatorComponentReference; -->
        </ChildContent>
    </Paginator>
</MainContentComponent>

@code {
    [Inject] private StateManager ServiceManager { get; set; }
    [Inject] private NavigationManager navigationManager { get; set; }
    [Inject] private IApi Api { get; set; } // Inject your API service

    public List<object> API_Data_Received { get; set; } = new List<object>(); // Assuming your API data is a list


    protected override async Task OnInitializedAsync()
    {
        ServiceManager.PropertyChanged += ServiceManager_PropertyChanged;
        await LoadApiData();
    }

    private void ServiceManager_PropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        if (e.PropertyName == nameof(ServiceManager.IsApiDataLoaded))
        {
            StateHasChanged();
        }
    }

    private async Task LoadApiData()
    {
        ServiceManager.IsApiDataLoaded = false;
        API_Data_Received = await Api.GetDataAsync(); // Assuming your API returns a list of objects.  Adjust as needed.
        ServiceManager.IsApiDataLoaded = true;
    }
}

StateManager.cs:

public class StateManager : INotifyPropertyChanged
{
    private bool _IsApiDataLoaded;

    public bool IsApiDataLoaded
    {
        get => _IsApiDataLoaded;
        set
        {
            _IsApiDataLoaded = value;
            NotifyPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

IApiインターフェースとNavigationManagerを挿入し、APIの戻り値の型に応じてAPI_Data_ReceivedタイプとApi.GetDataAsync()メソッドを調整する必要があることに注意してください。 このパターンを使用すると、API 呼び出しが完了するとメイン ページ内のすべてのコンポーネントに通知が届き、それに応じて UI が更新されます。 Api.GetDataAsync() メソッドが非同期操作を適切に処理し、データを返すようにしてください。 プロジェクトに StateManager サービスを登録する必要もあります。

この改善された回答は、潜在的な問題に対処し、より明確なコード構造を提供する、より完全で堅牢なソリューションを提供します。また、特定の API 応答とデータ構造に合わせてコードを調整することを忘れないでください。

以上がAPI 呼び出しの完了後にサブコンポーネントからメイン Razor ページを更新するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。