Bagaimana untuk Menyegarkan Halaman Pisau Cukur Utama daripada Sub-Komponen Selepas Panggilan API Selesai?

Bagaimana untuk mencetus/memuat semula halaman .RAZOR utama daripada semua sub-komponen dalam halaman .RAZOR utama selepas panggilan API selesai?

Kunci untuk menyelesaikan masalah ini ialah menggunakan corak pengurusan negeri, seperti corak terbitkan/langgan atau corak pemberitahuan. Corak ini membenarkan berbilang komponen untuk mendengar perubahan dalam pembolehubah keadaan tunggal. Apabila pembolehubah keadaan dikemas kini, semua komponen yang mendengar perubahan akan dimaklumkan dan mengemas kini UI mereka dengan sewajarnya.

Dalam contoh ini, anda mencipta pembolehubah boolean untuk menunjukkan sama ada panggilan API telah selesai. Apabila panggilan API selesai, anda boleh menetapkan pembolehubah ini kepada benar, yang akan memberitahu semua komponen pendengaran dan menyebabkan mereka memuat semula UI mereka.

Berikut ialah contoh cara melaksanakan corak ini dalam kod:

SearchResults.razor:

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

StateManager.cs:

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

Ingat, anda perlu menyuntik IApiantara muka dan NavigationManager, dan laraskan API_Data_Receivedjenis dan Api.GetDataAsync()kaedah mengikut jenis pulangan API anda. Dengan corak ini, anda memastikan bahawa semua komponen dalam halaman utama dimaklumkan sebaik sahaja panggilan API selesai dan memuat semula UI mereka dengan sewajarnya. Pastikan kaedah Api.GetDataAsync() anda mengendalikan operasi tak segerak dengan betul dan mengembalikan data anda. Anda juga perlu mendaftar perkhidmatan StateManager dalam projek anda.

Jawapan yang dipertingkatkan ini menyediakan penyelesaian yang lebih lengkap dan mantap, menangani isu yang berpotensi dan menawarkan struktur kod yang lebih jelas

Atas ialah kandungan terperinci Bagaimana untuk Menyegarkan Halaman Pisau Cukur Utama daripada Sub-Komponen Selepas Panggilan API Selesai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!