Wie aktualisiere ich eine .RAZOR-Hauptseite aus untergeordneten Komponenten nach einem API-Aufruf?

Wie man die .RAZOR-Hauptseite von der untergeordneten Komponente auslöst/aktualisiert, nachdem der API-Aufruf abgeschlossen ist

Problemübersicht

Wenn der API-Aufruf abgeschlossen ist und Daten verfügbar sind, muss eine Aktualisierung der Hauptseite von .RAZOR ausgelöst werden. Die Herausforderung besteht darin, einen „Auslöser“ zu finden, der anzeigt, dass die Daten bereit sind, und entsprechend eine Seitenaktualisierung einzuleiten.

Lösung

1. Implementieren Sie den Bereichsdienst (AppState)

Erstellen Sie einen bereichsbezogenen Dienst (AppState), um den zurückgegebenen Datensatz zu verwalten und ihn allen Komponenten in der Anwendung zugänglich zu machen.

2. Anzeigekomponente (SearchResults.razor)

Rufen Sie in SearchResults.razor die Daten vom AppState-Dienst ab, wenn die Seite geladen wird, und zeigen Sie sie in einer Schleife an. Wenn die API Daten zurückgibt, verwenden Sie if-Anweisungen, um Daten bedingt anzuzeigen oder Spinner zu laden.

3. Integrierte Unterfilterkomponenten

Wenn der Benutzer einen Filter aus einer untergeordneten Komponente anwendet, verwenden Sie in jeder Komponente den folgenden Code:

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

Dies führt immer zu SearchResults.razor, wenn ein Filter angewendet wird.

4. Verwenden Sie den Status-/Benachrichtigungsmodus

Implementieren Sie das Status-/Benachrichtigungsmuster, um Änderungen im AppState-Dienst zu übertragen. Dies kann durch die Verwendung der folgenden Methode in der untergeordneten Komponente erreicht werden:

<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. Benachrichtigungsereignisse registrieren

Registrieren Sie in SearchResults.razor das ListChanged-Ereignis von AppState und rufen Sie StateHasChanged auf, wenn das Ereignis ausgelöst wird, um eine Aktualisierung auszulösen.

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

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

6. Behandeln Sie die Seitenaktualisierung bei Unterereignissen

Wenn eine untergeordnete Komponente ein Ereignis auslöst, das AppState aktualisiert, wird das ListChanged-Ereignis gesendet und SearchResults.razor reagiert, indem es StateHasChanged auslöst, um die Seite zu aktualisieren. Dadurch wird sichergestellt, dass die Anzeige der Hauptseite basierend auf Änderungen in der Filterkomponente aktualisiert wird.

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