Wie aktualisiere ich eine Blazor-Haupt-Razor-Seite aus untergeordneten Komponenten nach einem API-Aufruf?

Lösen/aktualisieren Sie die .Razor-Hauptseite, nachdem der API-Aufruf der Blazor-Unterkomponente abgeschlossen ist

In Blazor stoßen wir häufig auf Situationen, in denen wir das Hauptseitenlayout dynamisch aktualisieren oder Inhalte basierend auf Ereignissen oder Aktionen aktualisieren müssen, die in verschachtelten untergeordneten Komponenten ausgelöst werden (z. B. Abschluss von API-Aufrufen).

Eigentlicher Fall

Stellen Sie sich das folgende Szenario vor:

• Wir haben eine Hauptsuchseite mit mehreren Filterkomponenten (z. B. SearchResults.razor).
• Wenn der Benutzer einen Filter anwendet, rufen wir den API-Endpunkt auf, um die geänderten Daten abzurufen.
• Wir möchten die aktualisierten Daten anzeigen und den Lade-Spinner auf der SearchResults.razor-Seite ausblenden, nachdem der API-Aufruf abgeschlossen ist.

Lösung

Um die oben genannten Lösungen zu erreichen, nutzen wir die folgenden Technologien:

1. Zustandsbehaftete Dienste implementieren

Wir verwenden bereichsbezogene Dienste (wie AppState), um die abgerufenen API-Daten zu speichern und freizugeben, sodass sowohl die Stammseite als auch ihre Unterkomponenten darauf zugreifen können.

2. Erstellen Sie die Komponente „Laden“

Wir definieren eine wiederverwendbare Loading.razor-Komponente, die den Spinner anzeigt, wenn die Seite geladen wird, und den Inhalt, wenn die Daten bereit sind.

3. Nutzen Sie den Ansichtsdienst

Wir erstellen einen Ansichtsdienst (z. B. WeatherForecastViewService), der die Daten verwaltet und ein ListChanged-Ereignis verfügbar macht, das ausgelöst wird, wenn sich die zugrunde liegenden Daten ändern.

4. Binden Sie die Unterkomponente an den Ansichtsdienst

In der untergeordneten Komponente fügen wir den Ansichtsdienst ein und überwachen sein ListChanged-Ereignis. Nachdem eine Änderung erkannt wurde, verwenden wir StateHasChanged, um die Komponente zu aktualisieren und die aktualisierten Daten anzuzeigen.

5. Status zentral auf der Stammseite verwalten

Auf der Hauptseite von SearchResults.razor:

• Binden Sie die Loading-Komponente an AppState, um den Spinner basierend auf der Datenverfügbarkeit anzuzeigen oder auszublenden.
• Injizieren Sie den Ansichtsdienst mithilfe der Abhängigkeitsinjektion.
• Daten abrufen und AppState asynchron aktualisieren.
• Überwachen Sie das ListChanged-Ereignis des Ansichtsdiensts und rufen Sie StateHasChanged auf, um UI-Updates auszulösen.

Code-Snippet (SearchResults.razor)

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

Codeausschnitt (Loading.razor)

<code class="language-csharp">@if (this.IsLoaded)
{
    @this.ChildContent
}
else
{
    // 显示加载微调器
}</code>

Durch die Implementierung dieser Techniken richten wir einen Kommunikationskanal zwischen untergeordneten Komponenten und der Hauptseite ein, der es uns ermöglicht, Aktualisierungen der Benutzeroberfläche auszulösen und einen konsistenten Datenstatus über alle Eltern-Kind-Beziehungen hinweg aufrechtzuerhalten.

Das obige ist der detaillierte Inhalt vonWie aktualisiere ich eine Blazor-Haupt-Razor-Seite aus untergeordneten Komponenten nach einem API-Aufruf?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!