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

Blazor サブコンポーネント API 呼び出しが完了した後に、メインの .Razor ページをトリガー/更新します

Blazor では、入れ子になった子コンポーネントでトリガーされたイベントやアクション (API 呼び出しの完了など) に基づいて、メイン ページのレイアウトを動的に更新したり、コンテンツを更新したりする必要がある状況がよく発生します。

実際のケース

次のシナリオを考えてみましょう:

• 複数のフィルター コンポーネントを備えたメインの検索ページがあります (例: SearchResults.razor)。
• ユーザーがフィルターを適用すると、API エンドポイントを呼び出して変更されたデータを取得します。
• API 呼び出しが完了した後、更新されたデータを表示し、SearchResults.razor ページの読み込みスピナーを非表示にしたいと考えています。

解決策

上記のソリューションを実現するために、当社は次のテクノロジーを利用します:

1. ステートフル サービスを実装する

ルート ページとそのサブコンポーネントの両方からアクセスできるように、取得した API データを保存および共有するためにスコープ指定されたサービス (AppState など) を使用します。

2.「読み込み」コンポーネントを作成します

ページの読み込み時にスピナーを表示し、データの準備ができたらコンテンツを表示する、再利用可能な Loading.razor コンポーネントを定義します。

3. 閲覧サービスを利用する

データを管理し、基礎となるデータが変更されたときに発生する ListChanged イベントを公開するビュー サービス (例: WeatherForecastViewService) を作成します。

4. サブコンポーネントをビュー サービスにバインドします

子コンポーネントで、ビュー サービスを挿入し、その ListChanged イベントを監視します。変更が検出された後、StateHasChanged を使用してコンポーネントを更新し、更新されたデータを表示します。

5. ルートページでステータスを一元管理します

メインの SearchResults.razor ページでは:

• Loading コンポーネントを AppState にバインドして、データの可用性に基づいてスピナーを表示または非表示にします。
• 依存関係注入を使用してビュー サービスを注入します。
• データを取得し、AppState を非同期的に更新します。
• ビュー サービスの ListChanged イベントをリッスンし、StateHasChanged を呼び出して UI 更新をトリガーします。

コード スニペット (SearchResults.razor)

@code {
    [Inject] WeatherForecastViewService viewService { get; set; }

    // API 调用完成后赋值为 true
    public bool IsLoaded { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await GetForecastsAsync();
        this.viewService.ListChanged += this.OnListChanged;
    }

    private async Task GetForecastsAsync()
    {
        // 代码省略，为简洁起见
    }

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

    public void Dispose()
    {
        this.viewService.ListChanged -= this.OnListChanged;
    }
}

コードスニペット (Loading.razor)

@if (this.IsLoaded)
{
    @this.ChildContent
}
else
{
    // 显示加载微调器
}

これらの手法を実装することで、子コンポーネントとメイン ページの間に通信チャネルが確立され、UI の更新をトリガーし、親子関係全体で一貫したデータ状態を維持できるようになります。

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