Delen via

ASP.NET Core BlazorQuickGrid-onderdeel

  • Artikel

Notitie

Dit is niet de nieuwste versie van dit artikel. Zie de .NET 9-versie van dit artikelvoor de huidige release.

Belangrijk

Deze informatie heeft betrekking op een pre-releaseproduct dat aanzienlijk kan worden gewijzigd voordat het commercieel wordt uitgebracht. Microsoft geeft geen garanties, uitdrukkelijk of impliciet, met betrekking tot de informatie die hier wordt verstrekt.

Zie de .NET 9-versie van dit artikelvoor de huidige release.

Het QuickGrid onderdeel is een Razor onderdeel voor het snel en efficiënt weergeven van gegevens in tabelvorm. QuickGrid biedt een eenvoudig en handig gegevensrasteronderdeel voor algemene rasterweergavescenario's en fungeert als referentiearchitectuur en prestatiebasislijn voor het bouwen van gegevensrasteronderdelen. QuickGrid is zeer geoptimaliseerd en maakt gebruik van geavanceerde technieken om optimale renderingprestaties te bereiken.

Pakket

Voeg een pakketreferentie toe voor het Microsoft.AspNetCore.Components.QuickGrid-pakket.

Notitie

Zie de artikelen onder Installeren en beheren van pakketten bij Werkstroom voor pakketconsumptie (NuGet-documentatie)voor hulp bij het toevoegen van pakketten aan .NET-apps. Bevestig de juiste pakketversies op NuGet.org.

Voorbeeld-app

Voor verschillende QuickGrid demonstraties, zie de QuickGrid voor de Blazor voorbeeld-app. De demosite wordt gehost op GitHub Pages. De site wordt snel geladen dankzij statische prerendering met behulp van het door de community onderhouden BlazorWasmPrerendering.Build GitHub-project.

QuickGrid implementatie

Een QuickGrid-component implementeren:

  • Geef tags op voor het QuickGrid-onderdeel in Razor markeringen (<QuickGrid>...</QuickGrid>).
  • Geef een querybare gegevensbron voor het raster een naam. Gebruik van de volgende gegevensbronnen:
    • Items: een null-IQueryable<TGridItem>, waarbij TGridItem het type gegevens is dat wordt vertegenwoordigd door elke rij in het raster.
    • ItemsProvider: een callback die gegevens levert voor het raster.
  • Class: een optionele CSS-klassenaam. Indien opgegeven, wordt de klassenaam opgenomen in het class kenmerk van de gerenderde tabel.
  • Theme: een themanaam (standaardwaarde: default). Dit is van invloed op welke stijlregels overeenkomen met de tabel.
  • Virtualize: Indien waar, wordt het raster weergegeven met virtualisatie. Dit wordt normaal gesproken gebruikt in combinatie met schuiven en zorgt ervoor dat het raster alleen de gegevens rond de huidige scroll viewport ophaalt en weergeeft. Dit kan de prestaties aanzienlijk verbeteren wanneer u door grote gegevenssets bladert. Als u Virtualizegebruikt, moet u een waarde opgeven voor ItemSize en ervoor zorgen dat elke rij wordt weergegeven met een constante hoogte. Over het algemeen is het beter om Virtualize niet te gebruiken als de hoeveelheid weergegeven gegevens klein is of als u paginering gebruikt.
  • ItemSize: Alleen van toepassing bij gebruik van Virtualize. ItemSize definieert een verwachte hoogte in pixels voor elke rij, waardoor het virtualisatiemechanisme het juiste aantal items kan ophalen dat overeenkomt met de weergavegrootte en om nauwkeurige scrolling te garanderen.
  • ItemKey: Optioneel definieert u een waarde voor @key op elke weergegeven rij. Dit wordt meestal gebruikt om een unieke id op te geven, zoals een primaire-sleutelwaarde, voor elk gegevensitem. Hierdoor kan het raster de koppeling tussen rijelementen en gegevensitems behouden op basis van hun unieke id's, zelfs wanneer de TGridItem exemplaren worden vervangen door nieuwe kopieën (bijvoorbeeld na een nieuwe query voor het onderliggende gegevensarchief). Als het niet is ingesteld, dan is @key het exemplaar van TGridItem.
  • OverscanCount: Definieert hoeveel extra items er vóór en na het zichtbare gebied moeten worden weergegeven om de weergavefrequentie tijdens het schuiven te verminderen. Hoewel hogere waarden de vloeiendheid van schuiven kunnen verbeteren door meer items buiten het scherm weer te geven, kan een hogere waarde ook leiden tot een toename van de initiële laadtijden. Het wordt aanbevolen om een balans te vinden op basis van de grootte van uw gegevensset en de vereisten voor gebruikerservaring. De standaardwaarde is 3. Alleen beschikbaar wanneer u Virtualizegebruikt.
  • Pagination: Koppel dit TGridItem exemplaar optioneel aan een PaginationState model, waardoor het raster alleen de huidige pagina met gegevens ophaalt en weergeeft. Dit wordt normaal gesproken gebruikt in combinatie met een Paginator-onderdeel of een andere UI-logica waarmee de opgegeven PaginationState instantie wordt weergegeven en bijgewerkt.
  • Geef in de QuickGrid onderliggende inhoud (RenderFragment) PropertyColumn<TGridItem,TProp>s op, die TGridItem kolommen vertegenwoordigen waarvan de cellen waarden weergeven:
    • Property: Definieert de waarde die moet worden weergegeven in de cellen van deze kolom.
    • Format: Optioneel geeft u een notatietekenreeks voor de waarde op. Voor het gebruik van Format is het TProp type vereist om IFormattablete implementeren.
    • Sortable: geeft aan of de gegevens moeten worden gesorteerd op deze kolom. De standaardwaarde kan variëren afhankelijk van het kolomtype. Een TemplateColumn<TGridItem> wordt bijvoorbeeld gesorteerd als er SortBy parameter is opgegeven.
    • InitialSortDirection: geeft de sorteerrichting aan als IsDefaultSortColumn is true.
    • IsDefaultSortColumn: Geeft aan of deze kolom standaard moet worden gesorteerd.
    • PlaceholderTemplate: indien opgegeven, gebruiken gevirtualiseerde rasters deze sjabloon om cellen weer te geven waarvan de gegevens niet zijn geladen.
    • HeaderTemplate: een optionele sjabloon voor de koptekstcel van deze kolom. Als dit niet is opgegeven, bevat de standaardheadersjabloon de Title, samen met eventuele toepasselijke sorteerindicatoren en optiesknoppen.
    • Title: titeltekst voor de kolom. De titel wordt automatisch weergegeven als HeaderTemplate niet wordt gebruikt.
  • Geef tags op voor het QuickGrid-onderdeel in Razor markeringen (<QuickGrid>...</QuickGrid>).
  • Geef een querybare gegevensbron voor het raster een naam. Gebruik van de volgende gegevensbronnen:
    • Items: een null-IQueryable<TGridItem>, waarbij TGridItem het type gegevens is dat wordt vertegenwoordigd door elke rij in het raster.
    • ItemsProvider: een callback die gegevens levert voor het raster.
  • Class: een optionele CSS-klassenaam. Indien opgegeven, wordt de klassenaam opgenomen in het class kenmerk van de gerenderde tabel.
  • Theme: een themanaam (standaardwaarde: default). Dit is van invloed op welke stijlregels overeenkomen met de tabel.
  • Virtualize: Indien waar, wordt het raster weergegeven met virtualisatie. Dit wordt normaal gesproken gebruikt in combinatie met schuiven en zorgt ervoor dat het raster alleen de gegevens rond de huidige scroll viewport ophaalt en weergeeft. Dit kan de prestaties aanzienlijk verbeteren wanneer u door grote gegevenssets bladert. Als u Virtualizegebruikt, moet u een waarde opgeven voor ItemSize en ervoor zorgen dat elke rij wordt weergegeven met een constante hoogte. Over het algemeen is het beter om Virtualize niet te gebruiken als de hoeveelheid weergegeven gegevens klein is of als u paginering gebruikt.
  • ItemSize: Alleen van toepassing bij gebruik van Virtualize. ItemSize definieert een verwachte hoogte in pixels voor elke rij, waardoor het virtualisatiemechanisme het juiste aantal items kan ophalen dat overeenkomt met de weergavegrootte en om nauwkeurige scrolling te garanderen.
  • ItemKey: Optioneel definieert u een waarde voor @key op elke weergegeven rij. Dit wordt meestal gebruikt om een unieke id op te geven, zoals een primaire-sleutelwaarde, voor elk gegevensitem. Hierdoor kan het raster de koppeling tussen rijelementen en gegevensitems behouden op basis van hun unieke id's, zelfs wanneer de TGridItem exemplaren worden vervangen door nieuwe kopieën (bijvoorbeeld na een nieuwe query voor het onderliggende gegevensarchief). Als deze niet is ingesteld, is de @key de TGridItem instantie.
  • Pagination: Koppel dit TGridItem exemplaar optioneel aan een PaginationState model, waardoor het raster alleen de huidige pagina met gegevens ophaalt en weergeeft. Dit wordt normaal gesproken gebruikt in combinatie met een Paginator-onderdeel of een andere UI-logica waarmee de opgegeven PaginationState instantie wordt weergegeven en bijgewerkt.
  • Geef in de QuickGrid onderliggende inhoud (RenderFragment) PropertyColumn<TGridItem,TProp>s op, die TGridItem kolommen vertegenwoordigen waarvan de cellen waarden weergeven:
    • Property: Definieert de waarde die moet worden weergegeven in de cellen van deze kolom.
    • Format: Optioneel geeft u een notatietekenreeks voor de waarde op. Voor het gebruik van Format is het TProp type vereist om IFormattablete implementeren.
    • Sortable: geeft aan of de gegevens moeten worden gesorteerd op deze kolom. De standaardwaarde kan variëren afhankelijk van het kolomtype. Een TemplateColumn<TGridItem> wordt bijvoorbeeld gesorteerd als er SortBy parameter is opgegeven.
    • InitialSortDirection: geeft de sorteerrichting aan als IsDefaultSortColumn is true.
    • IsDefaultSortColumn: Geeft aan of deze kolom standaard moet worden gesorteerd.
    • PlaceholderTemplate: indien opgegeven, gebruiken gevirtualiseerde rasters deze sjabloon om cellen weer te geven waarvan de gegevens niet zijn geladen.
    • HeaderTemplate: een optionele sjabloon voor de koptekstcel van deze kolom. Als dit niet is opgegeven, bevat de standaardheadersjabloon de Title, samen met eventuele toepasselijke sorteerindicatoren en optiesknoppen.
    • Title: titeltekst voor de kolom. De titel wordt automatisch weergegeven als HeaderTemplate niet wordt gebruikt.

Voeg bijvoorbeeld het volgende onderdeel toe om een raster weer te geven.

Voor Blazor Web Appmoet het QuickGrid onderdeel een interactieve weergavemodus gebruiken om interactieve functies, zoals paging en sortering, mogelijk te maken.

PromotionGrid.razor:

@page "/promotion-grid"
@using Microsoft.AspNetCore.Components.QuickGrid

<PageTitle>Promotion Grid</PageTitle>

<h1>Promotion Grid Example</h1>

<QuickGrid Items="people">
    <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
    <PropertyColumn Property="@(p => p.PromotionDate)" Format="yyyy-MM-dd" Sortable="true" />
</QuickGrid>

@code {
    private record Person(int PersonId, string Name, DateOnly PromotionDate);

    private IQueryable<Person> people = new[]
    {
        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
        new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
        new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
    }.AsQueryable();
}

@page "/promotion-grid"
@using Microsoft.AspNetCore.Components.QuickGrid

<PageTitle>Promotion Grid</PageTitle>

<h1>Promotion Grid Example</h1>

<QuickGrid Items="people">
    <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
    <PropertyColumn Property="@(p => p.PromotionDate)" Format="yyyy-MM-dd" Sortable="true" />
</QuickGrid>

@code {
    private record Person(int PersonId, string Name, DateOnly PromotionDate);

    private IQueryable<Person> people = new[]
    {
        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
        new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
        new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
    }.AsQueryable();
}

Krijg toegang tot het onderdeel in een browser op het relatieve pad /promotion-grid.

Er zijn geen plannen om QuickGrid uit te breiden met functies die volwaardige commerciële rasters bieden, bijvoorbeeld hiërarchische rijen, slepen-naar-opnieuw rangschikken van kolommen of Excel-achtige bereikselecties. Als u geavanceerde functies nodig hebt die u niet zelf wilt ontwikkelen, kunt u doorgaan met het gebruik van rasters van derden.

Sorteren op kolom

Het QuickGrid-onderdeel kan items sorteren op kolommen. In Blazor Web Apps moet het onderdeel een interactieve weergavemodus gebruiken.

Voeg Sortable="true" (Sortable) toe aan de PropertyColumn<TGridItem,TProp>-tag:

<PropertyColumn Property="..." Sortable="true" />

Sorteer in de actieve app de kolom QuickGrid door de weergegeven kolomtitel te selecteren.

Pagina-items met een Paginator-onderdeel

Het QuickGrid-onderdeel kan gegevens pagina's maken uit de gegevensbron. In Blazor Web Appis paging vereist dat het onderdeel een interactieve weergavemodusin gebruik neemt.

Voeg een PaginationState exemplaar toe aan het @code blok van het onderdeel. Stel de ItemsPerPage in op het aantal items dat per pagina moet worden weergegeven. In het volgende voorbeeld krijgt het exemplaar de naam paginationen zijn er tien items per pagina ingesteld:

PaginationState pagination = new PaginationState { ItemsPerPage = 10 };

Stel de eigenschap Pagination van het QuickGrid onderdeel in op pagination:

<QuickGrid Items="..." Pagination="pagination">

Als u een gebruikersinterface voor paginering wilt bieden, voegt u een Paginator onderdeel toe boven of onder het QuickGrid onderdeel. Stel de Paginator.State in op pagination:

<Paginator State="pagination" />

Blader in de lopende app door de items met behulp van een gerenderde Paginator component.

QuickGrid geeft extra lege rijen weer om de laatste pagina met gegevens in te vullen wanneer deze worden gebruikt met een Paginator-onderdeel. In .NET 9 of hoger worden lege gegevenscellen (<td></td>) toegevoegd aan de lege rijen. De lege rijen zijn bedoeld om het weergeven van QuickGrid met stabiele rijhoogte en stijl op alle pagina's te vergemakkelijken.

Rijstijlen toepassen

Stijlen toepassen op rijen met behulp van CSS-isolatie, die lege rijen kunnen bevatten voor QuickGrid onderdelen die paginagegevens met een Paginator onderdeel.

Verpakt het QuickGrid onderdeel in een wrapperblokelement, bijvoorbeeld een <div>:

+ <div>
    <QuickGrid ...>
        ...
    </QuickGrid>
+ </div>

Pas een rijstijl toe met het ::deeppseudo-element. In het volgende voorbeeld is rijhoogte ingesteld op 2em, inclusief voor lege gegevensrijen.

{COMPONENT}.razor.css:

::deep tr {
    height: 2em;
}

U kunt ook de volgende CSS-stijlbenadering gebruiken:

  • Toon cellen van rijen die zijn gevuld met gegevens.
  • Geef geen lege rijcellen weer, waardoor lege rijcelranden niet per Bootstrap-stijl worden weergegeven.

{COMPONENT}.razor.css:

::deep tr:has(> td:not(:empty)) > td {
    display: table-cell;
}

::deep td:empty {
    display: none;
}

Zie ASP.NET Core Blazor CSS-isolatievoor meer informatie over het gebruik van ::deeppseudo-elementen met CSS-isolatie.

Aangepaste kenmerken en stijlen

QuickGrid biedt ook ondersteuning voor het doorgeven van aangepaste kenmerken en stijlklassen (Class) aan het gerenderde tabelelement:

<QuickGrid Items="..." custom-attribute="value" Class="custom-class">

Entity Framework Core (EF Core) gegevensbron

Gebruik het factory-patroon om een EF Core databasecontext op te lossen die gegevens levert aan een QuickGrid onderdeel. Zie ASP.NET Core Blazor met Entity Framework Core (EF Core)voor meer informatie over waarom het factorypatroon wordt aanbevolen.

Een databasecontext-factory (IDbContextFactory<TContext>) wordt met de @inject-richtlijn in de component geïnjecteerd. De factory-benadering vereist verwijdering van de databasecontext, dus implementeert het onderdeel de IAsyncDisposable interface met de @implements richtlijn. De itemprovider voor het QuickGrid-onderdeel is een DbSet<T> verkregen uit de gemaakte databasecontext (CreateDbContext) van de geïnjecteerde databasecontextfactory.

QuickGrid herkent door EF geleverde IQueryable exemplaren en weet hoe het query's asynchroon kan afhandelen voor efficiëntie.

Voeg een pakketreferentie toe voor het Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter NuGet-pakket.

Notitie

Zie de artikelen onder Pakketten installeren en beheren bij Gebruik van pakketten workflow (NuGet-documentatie)voor hulp bij het toevoegen van pakketten aan .NET-apps. Bevestig de juiste pakketversies op NuGet.org.

Roep AddQuickGridEntityFrameworkAdapter aan op de serviceverzameling in het Program-bestand om een EF-compatibele IAsyncQueryExecutor-implementatie te registreren:

builder.Services.AddQuickGridEntityFrameworkAdapter();

In het volgende voorbeeld wordt een ExampleTableDbSet<TEntity> (tabel) uit een AppDbContext databasecontext (context) gebruikt als de gegevensbron voor een QuickGrid-onderdeel:

@using Microsoft.AspNetCore.Components.QuickGrid
@using Microsoft.EntityFrameworkCore
@implements IAsyncDisposable
@inject IDbContextFactory<AppDbContext> DbFactory

...

<QuickGrid ... Items="context.ExampleTable" ...>
    ...
</QuickGrid>

@code {
    private AppDbContext context = default!;

    protected override void OnInitialized()
    {
        context = DbFactory.CreateDbContext();
    }

    public async ValueTask DisposeAsync() => await context.DisposeAsync();
}

In het codeblok (@code) van het voorgaande voorbeeld:

  • Het veld context bevat de databasecontext, getypt als een AppDbContext.
  • De levenscyclusmethode OnInitialized wijst een nieuwe databasecontext (CreateDbContext) toe aan het veld context van de geïnjecteerde factory (DbFactory).
  • De asynchrone DisposeAsync methode verwijdert de databasecontext wanneer het onderdeel wordt verwijderd.

U kunt ook elke DOOR EF ondersteunde LINQ-operator gebruiken om de gegevens te filteren voordat u deze doorgeeft aan de parameter Items.

In het volgende voorbeeld worden films gefilterd op een filmtitel die is ingevoerd in een zoekvak. De databasecontext is BlazorWebAppMoviesContexten het model is Movie. De eigenschap Title van de film wordt gebruikt voor de filterbewerking.

@using Microsoft.AspNetCore.Components.QuickGrid
@using Microsoft.EntityFrameworkCore
@implements IAsyncDisposable
@inject IDbContextFactory<BlazorWebAppMoviesContext> DbFactory

...

<p>
    <input type="search" @bind="titleFilter" @bind:event="oninput" />
</p>

<QuickGrid ... Items="FilteredMovies" ...>
    ...
</QuickGrid>

@code {
    private string titleFilter = string.Empty;
    private BlazorWebAppMoviesContext context = default!;

    protected override void OnInitialized()
    {
        context = DbFactory.CreateDbContext();
    }

    private IQueryable<Movie> FilteredMovies => 
        context.Movie.Where(m => m.Title!.Contains(titleFilter));

    public async ValueTask DisposeAsync() => await context.DisposeAsync();
}

Zie de volgende bronnen voor een werkend voorbeeld:

Ondersteuning voor weergavenamen

Een kolomtitel kan worden toegewezen met behulp van ColumnBase<TGridItem>.Title in de tag van PropertyColumn<TGridItem,TProp>. In het volgende filmvoorbeeld krijgt de kolom de naam 'Release Date' voor de releasedatum van de kolom:

<PropertyColumn Property="movie => movie.ReleaseDate" Title="Release Date" />

Het beheren van kolomtitels (namen) van afhankelijke modeleigenschappen is meestal een betere keuze voor het onderhouden van een app. Een model kan de weergavenaam van een eigenschap beheren met het kenmerk [Display]. In het volgende voorbeeld specificeert het model 'Release Date' als weergavenaam voor de releasedatum van de film voor de eigenschap ReleaseDate.

[Display(Name = "Release Date")]
public DateTime ReleaseDate { get; set; }

Als u het QuickGrid-onderdeel wilt inschakelen voor het gebruik van de DisplayAttribute.Name, PropertyColumn<TGridItem,TProp> subklasse in het onderdeel of in een afzonderlijke klasse:

public class DisplayNameColumn<TGridItem, TProp> : PropertyColumn<TGridItem, TProp>
{
    protected override void OnParametersSet()
    {
        if (Title is null && Property.Body is MemberExpression memberExpression)
        {
            var memberInfo = memberExpression.Member;
            Title = 
                memberInfo.GetCustomAttribute<DisplayNameAttribute>().DisplayName ??
                memberInfo.GetCustomAttribute<DisplayAttribute>().Name ??
                memberInfo.Name;
        }

        base.OnParametersSet();
    }
}

Gebruik de subklasse in het QuickGrid-onderdeel. In het volgende voorbeeld wordt de voorgaande DisplayNameColumn gebruikt. De naamRelease Datewordt geleverd door het [Display] kenmerk in het model, dus u hoeft geen Titleop te geven:

<DisplayNameColumn Property="movie => movie.ReleaseDate" />

Het kenmerk [DisplayName] wordt ook ondersteund:

[DisplayName("Release Date")]
public DateTime ReleaseDate { get; set; }

Het kenmerk [Display] wordt echter aanbevolen omdat er extra eigenschappen beschikbaar zijn. Het kenmerk [Display] biedt bijvoorbeeld de mogelijkheid om een resourcetype toe te wijzen voor lokalisatie.

Externe gegevens

In Blazor WebAssembly apps is het ophalen van gegevens uit een op JSON gebaseerde web-API op een server een veelvoorkomende vereiste. Gebruik de parameter ItemsProvider om alleen de gegevens op te halen die vereist zijn voor de huidige pagina/viewport van gegevens en om sorteer- of filterregels toe te passen op de server.

ItemsProvider kan ook worden gebruikt in een Blazor-app aan de serverzijde als de app is vereist om een query uit te voeren op een extern eindpunt of in andere gevallen waarin de vereisten niet worden gedekt door een IQueryable.

Geef een callback op die overeenkomt met het type GridItemsProvider<TGridItem> delegate, waarbij TGridItem het type gegevens is dat in de grid wordt weergegeven. De callback krijgt een parameter van het type GridItemsProviderRequest<TGridItem>, waarmee de beginindex, het maximum aantal rijen en de sorteervolgorde van de gegevens worden opgegeven die moeten worden geretourneerd. Naast het retourneren van de overeenkomende items, is er ook een totaal aantal items (totalItemCount) vereist om paging en virtualisatie correct te laten functioneren.

In het volgende voorbeeld worden gegevens opgehaald uit de openbare OpenFDA Food Enforcement-database.

De GridItemsProvider<TGridItem> converteert de GridItemsProviderRequest<TGridItem> in een query tegen de OpenFDA-database. Queryparameters worden vertaald in de specifieke URL-indeling die wordt ondersteund door de externe JSON-API. Het is alleen mogelijk om te sorteren en filteren zoals ondersteund door de externe API. Het OpenFDA-eindpunt biedt geen ondersteuning voor sorteren, dus geen van de kolommen wordt gemarkeerd als sorteerbaar. Het biedt echter wel ondersteuning voor het overslaan van records (skip parameter) en het beperken van het retourneren van records (limit parameter), zodat het onderdeel virtualisatie kan inschakelen en snel door tienduizenden records kan schuiven.

FoodRecalls.razor:

@page "/food-recalls"
@inject HttpClient Http
@inject NavigationManager Navigation

<PageTitle>Food Recalls</PageTitle>

<h1>OpenFDA Food Recalls</h1>

<div class="grid" tabindex="-1">
    <QuickGrid ItemsProvider="@foodRecallProvider" Virtualize="true">
        <PropertyColumn Title="ID" Property="@(c => c.Event_Id)" />
        <PropertyColumn Property="@(c => c.State)" />
        <PropertyColumn Property="@(c => c.City)" />
        <PropertyColumn Title="Company" Property="@(c => c.Recalling_Firm)" />
        <PropertyColumn Property="@(c => c.Status)" />
    </QuickGrid>
</div>

<p>Total: <strong>@numResults results found</strong></p>

@code {
    private GridItemsProvider<FoodRecall>? foodRecallProvider;
    private int numResults;

    protected override async Task OnInitializedAsync()
    {
        foodRecallProvider = async req =>
        {
            var url = Navigation.GetUriWithQueryParameters(
                "https://api.fda.gov/food/enforcement.json", 
                new Dictionary<string, object?>
            {
                { "skip", req.StartIndex },
                { "limit", req.Count },
            });

            var response = await Http.GetFromJsonAsync<FoodRecallQueryResult>(
                url, req.CancellationToken);

            return GridItemsProviderResult.From(
                items: response!.Results,
                totalItemCount: response!.Meta.Results.Total);
        };

        numResults = (await Http.GetFromJsonAsync<FoodRecallQueryResult>(
            "https://api.fda.gov/food/enforcement.json"))!.Meta.Results.Total;
    }
}

Zie Een web-API aanroepen vanuit een ASP.NET Core Blazor-appvoor meer informatie over het aanroepen van web-API's.

QuickGrid stellingbouwer

De QuickGrid scaffolder ondersteunt Razor componenten met QuickGrid om gegevens uit een database weer te geven.

De scaffolder genereert eenvoudige CRUD-pagina's (Create, Read, Update en Delete) op basis van een Entity Framework Core-gegevensmodel. U kunt afzonderlijke pagina's of alle CRUD-pagina's opzetten. U selecteert de modelklasse en de DbContext, eventueel een nieuwe DbContext maken indien nodig.

De gestructureerde Razor-componenten worden toegevoegd aan het project in een gegenereerde map vernoemd naar de modelklasse. Het gegenereerde Index-onderdeel maakt gebruik van een QuickGrid-onderdeel om de gegevens weer te geven. Pas indien nodig de gegenereerde onderdelen aan en schakel interactiviteit in om te profiteren van interactieve functies, zoals paginering, sorteren en filteren.

De onderdelen die door de scaffolder worden geproduceerd, vereisen server-side rendering (SSR), zodat ze niet worden ondersteund bij het uitvoeren op WebAssembly.

Klik met de rechtermuisknop op de map Components/Pages en selecteer Een Nieuw Gestructureerd Item Toevoegen>.

Open het dialoogvenster Add New Scaffold Item voor Installed>Common>Blazor>Razor Componenten selecteer daarna Razor Components using Entity Framework (CRUD). Selecteer de knop Toevoegen.

CRUD- is een acroniem voor maken, lezen, bijwerken en verwijderen. De scaffolder creëert, bewerkt, verwijdert, en beheert detail- en indexcomponenten voor de app.

Voltooi het-dialoogvenster: Voeg -componenten toe met behulp van Entity Framework (CRUD).

  • De vervolgkeuzelijst voor sjabloon bevat andere sjablonen voor specifiek het maken, bewerken, verwijderen, detailoverzichten en lijstonderdelen. Deze vervolgkeuzelijst is handig als u alleen een specifiek type onderdeel hoeft te maken dat is gemodelleerd naar een modelklasse. Laat de vervolgkeuzelijst sjabloon ingesteld op CRUD- om een volledige set onderdelen te maken.
  • Selecteer in de vervolgkeuzelijst Modelklasse de modelklasse. Er wordt een map gemaakt voor de gegenereerde onderdelen op basis van de modelnaam (als de modelklasse de naam Movieheeft, wordt de map automatisch MoviePagesgenoemd).
  • Selecteer voor DbContext-klasseeen bestaande databasecontext of selecteer de knop + (plusteken) en dialoogvenster Gegevenscontext toevoegen modaal dialoogvenster om een nieuwe databasecontext toe te voegen.
  • Nadat het model-dialoogvenster is gesloten, wordt de Database-provider vervolgkeuzelijst standaard ingesteld op SQL Server. U kunt de juiste provider selecteren voor de database die u gebruikt. De opties omvatten SQL Server, SQLite, PostgreSQL en Azure Cosmos DB.
  • Selecteer toevoegen.

Zie voor een voorbeeld van het gebruik van de QuickGrid scaffolder Een Blazor filmdatabase-app (Overzicht) bouwen.