Dans les applications Blazor, il est courant que les composants affichent des listes de données qui doivent être mises à jour après certaines actions utilisateur, comme un téléchargement ou une suppression. Sans mécanisme adéquat, ces modifications ne sont pas reflétées immédiatement à l’écran. Cet article explique comment forcer le rafraîchissement des données dans un composant Blazor en utilisant StateHasChanged et des rappels d’événements.

Mécanismes de mise à jour dans Blazor

Blazor utilise un système de rendu réactif basé sur l’état du composant. Les principales façons de déclencher un rafraîchissement sont :

1. Rendu initial automatique : lors du premier chargement du composant.
2. Appel explicite à StateHasChanged() : force le composant à se redessiner.
3. Événements liés à l’interface (ex. clics, saisies) : déclenchent automatiquement un cycle de rendu.

Si un composant ne se met pas à jour, il faut vérifier si ShouldRender n’est pas désactivé ou si l’action ne provient pas d’un contexte asynchrone non surveillé par Blazor.

Implémentation du rafraîchissement entre composants

Pour synchroniser deux composants — par exemple un formulaire de téléchargement et une liste de fichiers — on utilise un EventCallback pour notifier le compoasnt enfant qu’il doit recharger ses données.

1. Déclaration du rappel dans le composant de liste (UpFileInfoList.razor)

@code {
    [Parameter]
    public EventCallback OnDataUpdated { get; set; }

    public void RefreshData()
    {
        LoadFileList();
        StateHasChanged();
    }

    private void LoadFileList()
    {
        using var context = dbFactory.CreateDbContext();
        fileDescs = context.FileDescribe.ToList();
    }
}

2. Appel du rappel depuis le composant parent (FileUpload1.razor)

<UpFileInfoList @ref="fileListRef" OnDataUpdated="HandleDataUpdate" />

@code {
    private UpFileInfoList fileListRef;

    private async Task HandleFileUpload(InputFileChangeEventArgs e)
    {
        // ... logique de téléchargement ...
        if (uploadSuccessful)
        {
            await fileListRef.RefreshData();
            // OU via EventCallback :
            await OnDataUpdated.InvokeAsync();
        }
    }

    private async Task HandleDataUpdate()
    {
        await fileListRef.RefreshData();
    }
}

3. Mise à jour après suppression

Dans UpFileInfoList.razor, après suppression d’un fichier via une confirmation JavaScript :

public async Task ConfirmDelete(int id)
{
    var confirmed = await JsRuntime.InvokeAsync<bool>("confirm", "Supprimer ce fichier ?");
    if (confirmed)
    {
        using var context = dbFactory.CreateDbContext();
        var file = context.FileDescribe.Find(id);
        if (file != null)
        {
            context.FileDescribe.Remove(file);
            await context.SaveChangesAsync();
            LoadFileList(); // Recharge les données
            StateHasChanged(); // Rafraîchit l’affichage
            await OnDataUpdated.InvokeAsync(); // Notifie d’autres composants si nécessaire
        }
    }
}

Lors de l’exécution, après un téléchargement réussi ou une suppression confirmée, la liste des fichiers s’acutalise immédiatement sans rechargement de page, grâce à la combinaison de StateHasChanged() et de rappels bien orchestrés.