Comment actualiser une page principale de rasoir à partir de sous-composants une fois un appel API terminé ?

Comment déclencher/actualiser la page principale .RAZOR à partir de tous les sous-composants de la page principale .RAZOR une fois l'appel API terminé ?

La clé pour résoudre ce problème est d'utiliser un modèle de gestion d'état, tel qu'un modèle de publication/abonnement ou un modèle de notification. Ce modèle permet à plusieurs composants d'écouter les changements dans une seule variable d'état. Lorsqu'une variable d'état est mise à jour, tous les composants à l'écoute des modifications sont avertis et mettent à jour leur interface utilisateur en conséquence.

Dans cet exemple, vous créez une variable booléenne pour indiquer si l'appel API est terminé. Une fois l'appel d'API terminé, vous pouvez définir cette variable sur true, ce qui avertira tous les composants d'écoute et les amènera à actualiser leur interface utilisateur.

Voici un exemple de la façon d'implémenter ce modèle dans le code :

SearchResults.razor :

<code class="language-csharp">@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;
    }
}</code>

StateManager.cs :

<code class="language-csharp">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));
    }
}</code>

N'oubliez pas que vous devez injecter l'IApiinterface et NavigationManager, et ajuster le API_Data_Receivedtype et la Api.GetDataAsync()méthode en fonction de votre type de retour API. Avec ce modèle, vous vous assurez que tous les composants de la page principale sont avertis une fois l'appel d'API terminé et actualisez leur interface utilisateur en conséquence. Assurez-vous que vos méthodes Api.GetDataAsync() gèrent correctement les opérations asynchrones et renvoient vos données. Vous devez également enregistrer le service StateManager dans votre projet.

Cette réponse améliorée fournit une solution plus complète et plus robuste, résolvant les problèmes potentiels et offrant une structure de code plus claire. Elle clarifie également les injections de dépendances nécessaires. N'oubliez pas d'ajuster le code pour qu'il corresponde à votre réponse API et à vos structures de données spécifiques.

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!