如何在 API 呼叫後從子元件刷新 Blazor 主 Razor 頁面？

Blazor 子元件 API 呼叫完成後觸發/刷新主 .Razor 頁面

在 Blazor 中，我們經常會遇到需要根據巢狀子元件中觸發的事件或操作（例如 API 呼叫完成）動態更新主頁面佈局或刷新內容的情況。

實際案例

考慮以下場景：

• 我們有一個帶有多個篩選元件（例如 SearchResults.razor）的主搜尋頁面。
• 當使用者套用篩選器時，我們會呼叫 API 端點來取得修改後的資料。
• 我們希望在 API 呼叫完成後，在 SearchResults.razor 頁面上顯示更新後的資料並隱藏載入微調器。

解決方法

為了實現上述解決方案，我們利用以下技術：

1. 實現有狀態的服務

我們使用作用域服務（例如 AppState）來儲存和共享檢索到的 API 數據，以便根頁面及其子元件都能存取。

2. 建立「載入」元件

我們定義一個可重複使用的 Loading.razor 元件，在頁面載入時顯示微調器，資料準備就緒時顯示內容。

3. 使用視圖服務

我們建立一個視圖服務（例如 WeatherForecastViewService），它管理資料並公開一個 ListChanged 事件，當基礎資料變更時觸發該事件。

4. 將子元件綁定到視圖服務

在子元件中，我們注入視圖服務並監控其 ListChanged 事件。偵測到變更後，我們使用 StateHasChanged 來刷新元件並顯示更新後的資料。

5. 在根頁集中管理狀態

在主 SearchResults.razor 頁面中，我們：

• 將 Loading 元件綁定到 AppState，以便根據資料可用性顯示或隱藏微調器。
• 使用依賴注入註入視圖服務。
• 非同步取得資料並更新 AppState。
• 偵聽視圖服務的 ListChanged 事件並呼叫 StateHasChanged 觸發 UI 更新。

程式碼片段 (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>

程式碼片段 (Loading.razor)

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

透過實作這些技術，我們建立了子元件和主頁面之間的通訊通道，使我們能夠觸發 UI 更新並在父子關係中保持一致的資料狀態。

以上是如何在 API 呼叫後從子元件刷新 Blazor 主 Razor 頁面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！