Dall'archivio script > ASP.NET Core

Effettuare il refresh dei dati di una QuickGrid di Blazor

di Marco De SanctisMarco De Sanctis, in ASP.NET Core,

Immaginiamo di aver creato la nostra applicazione Blazor con una QuickGrid che visualizzi dati variabili nel tempo. Potrebbe trattarsi di quotazioni in borsa, come negli esempi che abbiamo realizzato negli scorsi script, oppure semplicemente essere dovuto alla concorrenza, con altri utenti che manipolano le stesse entità.

In ogni caso ci troviamo in un contesto in cui vogliamo effettuare il refresh dei dati nella QuickGrid a causa di un evento esterno, quindi non dopo l'interazione dell'utente, come abbiamo visto nei precedenti esempi.

La nostra pagina è dotata di una QuickGrid che, tramite un ItemsProvider, effettua chiamate a una API:

<QuickGrid class="table" ItemsProvider="@forecastsProvider" Pagination="@pagination">
    <PropertyColumn Property="@(x => x.Date)" Format="yyyy-MM-dd"
                    IsDefaultSortColumn="true" InitialSortDirection="SortDirection.Ascending" />
    <PropertyColumn Property="@(x => x.Summary)" />
    <PropertyColumn Property="@(x => x.TemperatureC)" />
    <PropertyColumn Property="@(x => x.TemperatureF)" />
</QuickGrid>

<Paginator State="@pagination" />

@code {

    private PaginationState pagination = new PaginationState() { ItemsPerPage = 10 };
    private GridItemsProvider<WeatherForecast>? forecastsProvider;
    private ValueTask<GridItemsProviderResult<WeatherForecast>> 
        GetItemsAsync(GridItemsProviderRequest<WeatherForecast> request)
    {
      // .. altro codice qui ..
    }

    protected override async Task OnInitializedAsync()
    {
        this.forecastsProvider = GetItemsAsync;
    }
}

Per poter forzare un refresh dei dati, dobbiamo innanzitutto assegnare la griglia a una variabile (theGrid, nel nostro caso) tramite l'attributo Ref:

@implements IDisposable

<QuickGrid ... @ref="theGrid">
   ...
</QuickGrid>

<Paginator State="@pagination" />

@code {
    //.. altro codice qui ..
    private Timer _timer;
    private QuickGrid<WeatherForecast> theGrid;

    private GridItemsProvider<WeatherForecast>? forecastsProvider;

    protected override async Task OnInitializedAsync()
    {
        this.forecastsProvider = GetItemsAsync;

        _timer = new Timer(async _ =>
        {
            await InvokeAsync(async () =>
            {
                Console.WriteLine("Weather: Refreshing data");
                await theGrid.RefreshDataAsync();
            });
        }, null, 0, 5000);
    }

    public void Dispose()
    {
        _timer.Dispose();
    }
}

Nel codice in alto, all'interno di OnInitializedAsync, creiamo un Timer che scatti ogni 5 secondi, nel cui metodo di callback invochiamo RefreshDataAsync di QuickGrid, che scatenerà un refresh dei dati.

Attenzione a due aspetti importanti: innanzitutto la chiamata RefreshDataAsync avviene all'interno di un InvokeAsync. Questo perché l'evento del Timer viene scatenato in un thread diverso da quello della UI, e, come avviene dai tempi di Windows Forms, ogni evento che genera una modifica dell'interfaccia deve essere scatenato nel thread UI.

Inoltre, l'intera pagina (o componente) implementa IDisposable, così da poter effettuare il dispose del timer ed evitare che questo continui a scatenare l'evento di callback anche dopo che l'utente abbia navigato via dalla pagina corrente.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi