Bagaimana untuk Muat Semula Halaman .RAZOR Utama daripada Komponen Kanak-Kanak Selepas Panggilan API?

Cara mencetus/memuat semula halaman .RAZOR utama daripada komponen anak selepas panggilan API selesai

Gambaran Keseluruhan Masalah

Apabila panggilan API selesai dan data tersedia, muat semula halaman .RAZOR utama perlu dicetuskan. Cabarannya adalah untuk mencari "pencetus" untuk menunjukkan bahawa data sudah sedia dan memulakan muat semula halaman dengan sewajarnya.

Penyelesaian

1. Laksanakan perkhidmatan skop (AppState)

Buat perkhidmatan berskop (AppState) untuk mengurus set data yang dikembalikan dan menjadikannya boleh diakses oleh semua komponen dalam aplikasi.

2. Komponen paparan (SearchResults.razor)

Dalam SearchResults.razor, dapatkan data daripada perkhidmatan AppState apabila halaman dimuatkan dan paparkannya dalam satu gelung. Apabila API mengembalikan data, gunakan pernyataan if untuk memaparkan data secara bersyarat atau memuatkan pemutar.

3. Komponen sub-penapis bersepadu

Apabila pengguna menggunakan penapis daripada komponen kanak-kanak, gunakan kod berikut dalam setiap komponen:

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

Ini akan sentiasa mengubah hala ke SearchResults.razor apabila penapis digunakan.

4. Gunakan mod status/pemberitahuan

Laksanakan corak keadaan/pemberitahuan untuk menyiarkan perubahan dalam perkhidmatan AppState. Ini boleh dicapai dengan menggunakan kaedah berikut dalam komponen kanak-kanak:

<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. Daftar acara pemberitahuan

Dalam SearchResults.razor, daftarkan acara ListChanged AppState dan panggil StateHasChanged apabila acara itu dicetuskan untuk mencetuskan muat semula.

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

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

6. Mengendalikan muat semula halaman pada sub-acara

Apabila komponen kanak-kanak mencetuskan acara yang mengemas kini AppState, acara ListChanged akan disiarkan dan SearchResults.razor akan bertindak balas dengan mencetuskan StateHasChanged untuk memuat semula halaman. Ini memastikan bahawa halaman utama mengemas kini paparannya berdasarkan perubahan dalam komponen penapis.

Atas ialah kandungan terperinci Bagaimana untuk Muat Semula Halaman .RAZOR Utama daripada Komponen Kanak-Kanak Selepas Panggilan API?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!