In alcuni casi, soprattutto quando i dati hanno una natura "sequenziale", come i post in una timeline, l'infinite scroll rappresenta una soluzione molto intuitiva per l'utente. La buona notizia, se siamo sviluppatori Blazor, è che il componente QuickGrid che abbiamo introdotto nello scorso script (https://www.aspitalia.com/script/1478/Supportare-Sorting-Dati-Tabellari-Blazor-QuickGrid.aspx) la supporta nativamente.

In questo script introdurremo la funzionalità, mentre nei successivi mostreremo utilizzi via via più complessi, per esempio supportando ordinamento e IQueryable.

Per sfruttare questa funzionalità, dobbiamo apportare delle minime modifiche alla griglia che abbiamo visto nell'esempio scorso:

<QuickGrid class="table" Virtualize="true" ItemsProvider="@forecastsProvider">
    <PropertyColumn Property="@(x => x.Date)" Format="yyyy-MM-dd" />
    <PropertyColumn Property="@(x => x.Summary)" />
    <PropertyColumn Property="@(x => x.TemperatureC)" />
    <PropertyColumn Property="@(x => x.TemperatureF)" />
</QuickGrid>

@code {
    private GridItemsProvider<WeatherForecast>? forecastsProvider;

    protected override async Task OnInitializedAsync()
    {
        Console.WriteLine("Weather: Initial load");

        this.forecastsProvider = GetItemsAsync;
    }

    // .. GetItemsAsync qui ..
}

Nell'esempio in alto, abbiamo innanzitutto impostato il parametro Virtualize a true, così da attivare questa modalità di funzionamento. A questo punto, dobbiamo sostituire la collection di WeatherForecast, che prima caricavamo manualmente, con un delegate, che abbiamo assegnato a ItemsProvider e che inizializziamo in OnInitializeAsync. Questo delegate sarà la funzione che QuickGrid invocherà automaticamente, man mano che l'utente effettuerà lo scrolling.

GetItemsAsync è il metodo dove avviente il vero e proprio caricamento dei dati, che noi abbiamo simulato con il solito generatore randomico di WeatherForecast:

private ValueTask<GridItemsProviderResult<WeatherForecast>>
  GetItemsAsync(GridItemsProviderRequest<WeatherForecast> request)
{
    var items = new List<WeatherForecast>();

    if (request.Count.HasValue)
    {
        var startDate = DateOnly.FromDateTime(DateTime.Now.AddDays(request.StartIndex));
        var summaries = new[] { "Freezing", "Bracing", ... };
        items = Enumerable.Range(1, request.Count.Value).Select(index => new WeatherForecast
            {
                Date = startDate.AddDays(index),
                TemperatureC = Random.Shared.Next(-20, 55),
                Summary = summaries[Random.Shared.Next(summaries.Length)]
            }).ToList();
    }

    var result = new GridItemsProviderResult<WeatherForecast>
    {
        Items = items,
        TotalItemCount = 100
    };

    return new ValueTask<GridItemsProviderResult<WeatherForecast>>(result);
}

Iniziamo con il dare un'occhiata alla signature del metodo: il tipo restituito è

ValueTask<GridItemsProviderResult<WeatherForecast>>

che, al di là del ValueTask usato per l'operazione asincrona, altri non è che un contenitore dei risultati, con una proprietà addizionale TotalItemCount tramite cui comunicare alla grid quanti elementi esistono in totale.

Il parametro GridItemsProviderRequest invece, contiene alcune informazioni di cui possiamo aver bisogno nella query, come per esempio Count che indica il numero totale di elementi che la griglia ci ha richiesto, o StartIndex che specifica da quale vogliamo partire.

Come possiamo notare, come prima cosa verifichiamo che request.Count abbia un valore: questo è necessario perché QuickGrid, in fase di inizializzazione, effettua una richiesta dummy al nostro metodo per conoscere il numero totale di elementi e il loro tipo. Quando ciò accade restituiamo una pagina vuota. Altrimenti, generiamo una serie di WeatherForecast: a questa parte abbiamo aggiunto due piccole modifiche, quali l'aggiunta di request.StartIndex alla data di inizio e il fatto che il numero di elementi creati tramite Enumerable.Range sia pari a request.Count.

Se abbiamo svolto i passaggi correttamente, vedremo sullo schermo la griglia costantemente decorarsi con nuovi elementi, man mano che effettuiamo lo scrolling.

In questo script abbiamo introdotto la funzionalità base della virtualizzazione con infinite scroll di QuickGrid. Nei prossimi script vedremo come sfruttarla in casi reali, per esempio con i dati provenienti da un database.