Comment actualiser une page principale .RAZOR à partir des composants enfants après un appel API ?

Comment déclencher/actualiser la page principale .RAZOR à partir du composant enfant une fois l'appel API terminé

Aperçu du problème

Lorsque l'appel API est terminé et que les données sont disponibles, une actualisation de la page principale .RAZOR doit être déclenchée. Le défi consiste à trouver un « déclencheur » pour indiquer que les données sont prêtes et lancer une actualisation de la page en conséquence.

Solution

1. Implémenter le service de portée (AppState)

Créez un service étendu (AppState) pour gérer l'ensemble de données renvoyé et le rendre accessible à tous les composants de l'application.

2. Composant d'affichage (SearchResults.razor)

Dans SearchResults.razor, récupérez les données du service AppState lors du chargement de la page et affichez-les en boucle. Lorsque l'API renvoie des données, utilisez les instructions if pour afficher les données de manière conditionnelle ou charger les spinners.

3. Composants de sous-filtre intégrés

Lorsque l'utilisateur applique un filtre à partir d'un composant enfant, utilisez le code suivant dans chaque composant :

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

Ceci sera toujours redirigé vers SearchResults.razor lorsqu'un filtre est appliqué.

4. Utiliser le mode statut/notification

Implémentez le modèle d'état/notification pour diffuser les modifications dans le service AppState. Ceci peut être réalisé en utilisant la méthode suivante dans le composant enfant :

<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. Enregistrez les événements de notification

Dans SearchResults.razor, enregistrez l'événement ListChanged d'AppState et appelez StateHasChanged lorsque l'événement est déclenché pour déclencher une actualisation.

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

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

6. Gérer l'actualisation de la page sur les sous-événements

Lorsqu'un composant enfant déclenche un événement qui met à jour AppState, l'événement ListChanged sera diffusé et SearchResults.razor répondra en déclenchant StateHasChanged pour actualiser la page. Cela garantit que la page principale met à jour son affichage en fonction des modifications apportées au composant de filtre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!