Wie aktualisiere ich eine Razor-Hauptseite aus Unterkomponenten, nachdem ein API-Aufruf abgeschlossen ist?

Wie kann ich die .RAZOR-Hauptseite aus allen Unterkomponenten der .RAZOR-Hauptseite auslösen/aktualisieren, nachdem der API-Aufruf abgeschlossen ist?

Der Schlüssel zur Lösung dieses Problems liegt in der Verwendung eines Zustandsverwaltungsmusters, z. B. eines Veröffentlichungs-/Abonnementmusters oder eines Benachrichtigungsmusters. Dieses Muster ermöglicht es mehreren Komponenten, Änderungen in einer einzelnen Zustandsvariablen abzuhören. Wenn eine Statusvariable aktualisiert wird, werden alle Komponenten, die auf Änderungen warten, benachrichtigt und aktualisieren ihre Benutzeroberfläche entsprechend.

In diesem Beispiel erstellen Sie eine boolesche Variable, um anzugeben, ob der API-Aufruf abgeschlossen ist. Wenn der API-Aufruf abgeschlossen ist, können Sie diese Variable auf „true“ setzen, wodurch alle Überwachungskomponenten benachrichtigt werden und sie ihre Benutzeroberfläche aktualisieren.

Hier ist ein Beispiel für die Implementierung dieses Musters im Code:

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));
    }
}

Denken Sie daran, dass Sie die IApiSchnittstelle und NavigationManager einfügen und den API_Data_ReceivedTyp und die Api.GetDataAsync()Methode entsprechend Ihrem API-Rückgabetyp anpassen müssen. Mit diesem Muster stellen Sie sicher, dass alle Komponenten auf der Hauptseite benachrichtigt werden, sobald der API-Aufruf abgeschlossen ist, und aktualisieren ihre Benutzeroberfläche entsprechend. Stellen Sie sicher, dass Ihre Api.GetDataAsync()-Methoden asynchrone Vorgänge ordnungsgemäß verarbeiten und Ihre Daten zurückgeben. Sie müssen außerdem den Dienst StateManager in Ihrem Projekt registrieren.

Diese verbesserte Antwort bietet eine vollständigere und robustere Lösung, die potenzielle Probleme behebt und eine klarere Codestruktur bietet. Außerdem werden die erforderlichen Abhängigkeitsinjektionen klargestellt.

Das obige ist der detaillierte Inhalt vonWie aktualisiere ich eine Razor-Hauptseite aus Unterkomponenten, nachdem ein API-Aufruf abgeschlossen ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!