ASP.NET Core BlazorQuickGrid componenten

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 pakket Microsoft.AspNetCore.Components.QuickGrid.

Notitie

Zie de artikelen onder Pakketten installeren en beheren in Werkstroom Voor gebruik van pakketten (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 voorbeeld-app Blazor. 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. PaginationState bevat API voor interactie met de huidige op nul gebaseerde pagina-index, het aantal items op elke pagina, de op nul gebaseerde index van de laatste pagina en het totale aantal items op alle pagina's.
• Definieer in de QuickGrid inhoud van de kindelementen (RenderFragment) de PropertyColumn<TGridItem,TProp>-items, 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();
}

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

Er zijn geen huidige plannen om QuickGrid uit te breiden met functies die in volledige commerciële rasters worden aangeboden, zoals hiërarchische rijen, slepen-naar-opnieuw ordenen 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.

Pagina-items met een Paginator-onderdeel

Het QuickGrid-onderdeel kan gegevens pagineren 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 QuickGrid van het Pagination 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 het wordt 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 de QuickGrid te vergemakkelijken met een stabiele rijhoogte en stijl op alle pagina's.

Pagineringsmodi

Paginerings- en sorteerstatus wordt beheerd in het geheugen in het QuickGrid onderdeel zonder de URL te wijzigen, ook wel navigatie binnen de binnenstatus genoemd. Er is een interactieve rendermodus vereist.

Sorteren op kolom

Het QuickGrid-onderdeel kan items sorteren op kolommen. In Blazor Web Apps moet de component overschakelen naar een interactieve weergavemodus om te sorteren.

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.

Open en keer terug van een detailpagina met een gepagineerd QuickGrid component

Een gepaginad QuickGrid onderdeel kan een detailpagina voor een record openen en terugkeren naar de juiste pagina met resultaten met behulp van de methode in deze sectie.

Notitie

De benadering die in deze sectie wordt beschreven, wordt vereenvoudigd door navigatie op basis van URL's in .NET 11 of hoger. Zie deze sectie in een .NET 11 of hoger van dit artikel voor meer informatie.

De volgende API wordt gebruikt:

• PaginationState.CurrentPageIndex: Haalt de huidige op nul gebaseerde pagina-index op.
• PaginationState.SetCurrentPageIndexAsync: Hiermee stelt u de huidige pagina-index in en geeft u een bericht over de bijbehorende QuickGrid onderdelen om bijgewerkte gegevens op te halen en weer te geven.

Het Details onderdeel ontvangt het paginanummer van de querytekenreeks in de Page eigenschap en gebruikt dit om een koppeling naar het QuickGrid onderdeel op /scifi-characterste maken.

Details.razor:

@page "/details"

<ul>
    <li>Character ID for this detail record: @Id</li>
    <li>QuickGrid page number: @Page</li>
</ul>
<div>
    @if (Page.HasValue)
    {
        <a href="@($"/scifi-characters?page={Page}")">Back to List</a>
    }
    else
    {
        <a href="/scifi-characters">Back to List</a>
    }
</div>

@code {
    [SupplyParameterFromQuery]
    private int? Id { get; set; }

    [SupplyParameterFromQuery]
    private int? Page { get; set; }
}

Het SciFiCharacters-onderdeel:

• Pagineert de QuickGrid-component door PaginationState.SetCurrentPageIndexAsync aan te roepen bij de initialisatie van de component, waarbij de pagina-index wordt ingesteld op de waarde van Page (paginanummer) min één (-1). De page querytekenreeksparameter wordt verwijderd na het instellen van de pagina-index met behulp van NavigateTo en GetUriWithQueryParameter.
• Hiermee opent u het voorgaande Details onderdeel met het huidige paginanummer, de pagina-index verhoogd met één (+1), om de waarde een op één gebaseerde index (CurrentPageIndex) in de queryreeks te maken. Een ééngebaseerde index voor de querystringparameter page komt overeen met het weergegeven ééngebaseerde paginanummer van het weergegeven onderdeel Paginator in de UI.

ScifiCharacters.razor:

@page "/scifi-characters"
@rendermode InteractiveServer
@using Microsoft.AspNetCore.Components.QuickGrid
@inject NavigationManager Navigation

<QuickGrid Items="characters" Pagination="pagination">
    <PropertyColumn Property="@(c => c.Id)" />
    <PropertyColumn Property="@(c => c.Name)" />
    <TemplateColumn Context="c">
        <a href="@($"/details?id={c.Id}&page={pagination.CurrentPageIndex + 1}")">
            Details
        </a>
    </TemplateColumn>
</QuickGrid>

<Paginator State="pagination" />

@code {
    PaginationState pagination = new PaginationState { ItemsPerPage = 3 };

    private record Character(int Id, string Name);

    private IQueryable<Character> characters = new[]
    {
        new Character(0, "Ellen Ripley"),
        new Character(1, "Darth Vader"),
        new Character(2, "Rick Deckard"),
        new Character(3, "Sarah Connor"),
        new Character(4, "Malcolm Reynolds"),
        new Character(5, "Kara Thrace"),
        new Character(6, "James Kirk"),
        new Character(7, "Flash Gordon"),
        new Character(8, "Max Rockatansky"),
        new Character(9, "Katniss Everdeen"),
        new Character(10, "Ellie Sattler"),
        new Character(11, "Leela")
    }.AsQueryable();

    [SupplyParameterFromQuery]
    private int? Page { get; set; }

    protected override async Task OnInitializedAsync()
    {
        if (Page.HasValue && Page > 0)
        {
            await pagination.SetCurrentPageIndexAsync(Page.Value - 1);
            Navigation.NavigateTo(
                Navigation.GetUriWithQueryParameter("page", (int?)null));
        }
    }
}

Rijstijlen toepassen

Stijlen toepassen op rijen met behulp van CSS-isolatie, om lege rijen te stylen voor componenten die paginagegevens beheren met een component.

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 voor meer informatie over het gebruik van ::deeppseudo-elements met CSS-isolatie ASP.NET Core Blazor 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">

Een tabelrij stylen op basis van het rijitem

Pas een stijlklasse toe op een rij van de tabel gebaseerd op het rij-item met behulp van de parameter RowClass.

In het volgende voorbeeld:

• Een rijonderdeel wordt vertegenwoordigd door de Personrecord. De record Person bevat een eigenschap FirstName.
• De methode GetRowCssClass past de highlight-row klassestijlen toe op een rij waarin de voornaam van de persoon 'Julie' is.

<QuickGrid ... RowClass="GetRowCssClass">
    ...
</QuickGrid>

@code {
    private record Person(int PersonId, string FirstName, string LastName);

    private string GetRowCssClass(Person person) =>
        person.FirstName == "Julie" ? "highlight-row" : null;
}

Opties voor QuickGrid kolom sluiten

Sluit de gebruikersinterface van QuickGrid kolomopties met de methode HideColumnOptionsAsync.

In het volgende voorbeeld wordt de gebruikersinterface voor kolomopties gesloten zodra het titelfilter is toegepast:

<QuickGrid @ref="movieGrid" Items="movies">
    <PropertyColumn Property="@(m => m.Title)" Title="Title">
        <ColumnOptions>
            <input type="search" @bind="titleFilter" placeholder="Filter by title" 
                @bind:after="@(() => movieGrid.HideColumnOptionsAsync())" />
        </ColumnOptions>
    </PropertyColumn>
    <PropertyColumn Property="@(m => m.Genre)" Title="Genre" />
    <PropertyColumn Property="@(m => m.ReleaseYear)" Title="Release Year" />
</QuickGrid>

@code {
    private QuickGrid<Movie>? movieGrid;
    private string titleFilter = string.Empty;
    private IQueryable<Movie> movies = new List<Movie> { ... }.AsQueryable();
    private IQueryable<Movie> filteredMovies => 
        movies.Where(m => m.Title!.Contains(titleFilter));
}

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 databasecontextfactory (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 de QuickGrid-component is een DbSet<T> die afkomstig is uit de aangemaakte databasecontext (CreateDbContext) van de geïnjecteerde databasecontextfabriek.

QuickGrid herkent door EF geleverde IQueryable exemplaren en weet hoe query's asynchroon kunnen worden afgehandeld 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 in Werkstroom Voor gebruik van pakketten (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:

• Zelfstudie : Een Blazor filmdatabase-app maken
• Blazor voorbeeld-app voor de filmdatabase: selecteer de meest recente versiemap in de opslagplaats. De voorbeeldmap voor het project van de tutorial heet BlazorWebAppMovies.

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; }

Om te zorgen dat het QuickGrid-component de eigenschap DisplayAttribute.Name kan gebruiken, maak een subklasse van PropertyColumn<TGridItem,TProp>, hetzij binnen het component zelf of in een afzonderlijke klasse. Roep de methode GetName aan om de gelokaliseerde DisplayAttribute.Name-waarde te retourneren als een niet-gelokaliseerde DisplayName ([DisplayName] kenmerk) de waarde niet bevat:

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>().GetName() ??
                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 },
            });

            using 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 Oproep een web-API vanuit een ASP.NET Core Blazor-app voor meer informatie over het aanroepen van web-API's.

QuickGrid stellingbouwer

De QuickGrid scaffolder scaffoldeert 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.

Visual Studio

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

Met het dialoogvenster Nieuw scaffold-item toevoegen geopend naar Installed>Common>Blazor>Razor Component, en selecteer vervolgens Razor componenten met Entity Framework (CRUD). Selecteer de knop Toevoegen.

CRUD- is een acroniem voor maken, lezen, bijwerken en verwijderen. De scaffolder produceert componenten voor aanmaken, bewerken, verwijderen, details, en index voor de app.

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

• De vervolglijst Template bevat andere sjablonen om specifiek te creëren, bewerken, verwijderen, details en lijstcomponenten. 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 componenten 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).
• Voor DbContext-klassevoert u een van de volgende methoden uit:
  • Selecteer een bestaande DbContext klasse.
  • Selecteer de + knop (plusteken) en gebruik het dialoogvenster Modale gegevenscontext toevoegen om een nieuwe DbContext klassenaam op te geven. De scaffolder registreert een nieuwe context bij een factory-provider in plaats van het contexttype rechtstreeks als serviceregistratie te gebruiken en werkt een bestaande ApplicationDbContext registratie bij om een factory-provider te gebruiken wanneer dat nodig is.
• Nadat het dialoogvenster model is gesloten, wordt de vervolgkeuzelijst Databaseprovider standaard ingesteld op SQL Server. U kunt de juiste provider selecteren voor de database die u gebruikt. De opties zijn SQL Server, SQLite, PostgreSQL en Azure Cosmos DB.
• Selecteer toevoegen.

Visual Studio Code

Plak alle volgende commando's bij de prompt (>) van de Terminal (menu Terminal, >Nieuwe Terminal) die is geopend in de hoofdmap van het project. Wanneer u meerdere opdrachten plakt, wordt er een waarschuwing weergegeven waarin wordt aangegeven dat meerdere opdrachten worden uitgevoerd. Negeer de waarschuwing en ga verder met de plakbewerking.

Wanneer u meerdere opdrachten plakt, worden alle opdrachten uitgevoerd, behalve de laatste. De laatste opdracht wordt pas uitgevoerd als u op Enter op het toetsenbord drukt.

dotnet tool install --global dotnet-aspnet-codegenerator
dotnet tool install --global dotnet-ef
dotnet add package Microsoft.EntityFrameworkCore.SQLite
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Tools
dotnet add package Microsoft.AspNetCore.Components.QuickGrid
dotnet add package Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter

Belangrijk

Nadat de eerste acht opdrachten zijn uitgevoerd, moet u op Enter- drukken om de laatste opdracht uit te voeren.

De voorgaande opdrachten voegen toe:

• CLI-hulpprogramma's (Opdrachtregelinterface) voor EF Core
• aspnet-codegenerator steigerhulpmiddel
• Ontwerptijdhulpmiddelen voor EF Core
• De SQLite- en SQL Server-providers met het EF Core-pakket als een afhankelijkheid
• Microsoft.VisualStudio.Web.CodeGeneration.Design voor scaffolding

Voer in de Terminalde volgende opdracht uit om een volledige set onderdelen met de CRUD-sjabloon te maken:

dotnet aspnet-codegenerator blazor CRUD -dbProvider {PROVIDER} -dc {DB CONTEXT CLASS} -m {MODEL} -outDir {PATH}

Notitie

De voorgaande opdracht is een .NET CLI-opdracht en .NET CLI-opdrachten worden uitgevoerd wanneer deze worden ingevoerd op een PowerShellprompt. Dit is de standaardopdrachtshell van de VS Code Terminal.

In de volgende tabel worden de opties voor ASP.NET Core codegenerator in de voorgaande opdracht uitgelegd.

Optie	Tijdelijke aanduiding	Beschrijving
-dbProvider	{PROVIDER}	Databaseprovider om te gebruiken. Opties zijn onder andere sqlserver (standaard), sqlite, cosmos, postgres.
-dc	{DB CONTEXT CLASS}	De DbContext klasse die moet worden gebruikt, inclusief de naamruimte.
-m	{MODEL}	De naam van de modelklasse.
-outDir	{PATH}	De uitvoermap voor de gegenereerde onderdelen. Er wordt een map gemaakt op basis van de modelnaam in de uitvoermap voor het opslaan van de onderdelen (als de modelklasse Movieheet, wordt de map automatisch MoviePagesgenoemd). Het pad is doorgaans Components/Pages voor een Blazor Web App of Pages voor een zelfstandige Blazor WebAssembly-app.

Gebruik voor de extra Blazor provideropties de .NET CLI-helpoptie (-h|--help):

dotnet aspnet-codegenerator blazor -h

.NET CLI

Plak alle volgende opdrachten bij de prompt (>) van een commandoshell die is geopend in de rootdirectory van het project. Wanneer u meerdere opdrachten plakt, wordt er een waarschuwing weergegeven waarin wordt aangegeven dat meerdere opdrachten worden uitgevoerd. Negeer de waarschuwing en ga verder met de plakbewerking.

Wanneer u meerdere opdrachten plakt, worden alle opdrachten uitgevoerd, behalve de laatste. De laatste opdracht wordt pas uitgevoerd als u op Enter op het toetsenbord drukt.

dotnet tool install --global dotnet-aspnet-codegenerator
dotnet tool install --global dotnet-ef
dotnet add package Microsoft.EntityFrameworkCore.SQLite
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Tools
dotnet add package Microsoft.AspNetCore.Components.QuickGrid
dotnet add package Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter

Belangrijk

Nadat de eerste acht opdrachten zijn uitgevoerd, moet u op Enter- drukken om de laatste opdracht uit te voeren.

De voorgaande opdrachten voegen toe:

• CLI-hulpprogramma's (Opdrachtregelinterface) voor EF Core
• aspnet-codegenerator steigerhulpmiddel
• Ontwerptijdhulpmiddelen voor EF Core
• De SQLite- en SQL Server-providers met het EF Core-pakket als een afhankelijkheid
• Microsoft.VisualStudio.Web.CodeGeneration.Design voor steigerbouw.

Voer in een opdrachtprompt de volgende opdracht uit om een volledige set onderdelen te genereren met de CRUD-sjabloon:

dotnet aspnet-codegenerator blazor CRUD -dbProvider {PROVIDER} -dc {DB CONTEXT CLASS} -m {MODEL} -outDir {PATH}

In de volgende tabel worden de opties voor ASP.NET Core codegenerator in de voorgaande opdracht uitgelegd.

Optie	Tijdelijke aanduiding	Beschrijving
-dbProvider	{PROVIDER}	Databaseprovider om te gebruiken. Opties zijn onder andere sqlserver (standaard), sqlite, cosmos, postgres.
-dc	{DB CONTEXT CLASS}	De DbContext klasse die moet worden gebruikt, inclusief de naamruimte.
-m	{MODEL}	De naam van de modelklasse.
-outDir	{PATH}	De uitvoermap voor de gegenereerde onderdelen. Er wordt een map gemaakt op basis van de modelnaam in de uitvoermap voor het opslaan van de onderdelen (als de modelklasse Movieheet, wordt de map automatisch MoviePagesgenoemd). Het pad is doorgaans Components/Pages voor een Blazor Web App of Pages voor een zelfstandige Blazor WebAssembly-app.

Gebruik voor de extra Blazor provideropties de .NET CLI-helpoptie (-h|--help):

dotnet aspnet-codegenerator blazor -h

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

Meerdere gelijktijdige EF Core queries activeren System.InvalidOperationException

Meerdere gelijktijdige EF Core query's kunnen de volgende System.InvalidOperationExceptionactiveren:

System.InvalidOperationException: Er is een tweede bewerking op deze contextinstantie gestart voordat een eerdere bewerking was voltooid. Dit wordt meestal veroorzaakt doordat verschillende threads gelijktijdig hetzelfde DbContext-object gebruiken. Zie https://go.microsoft.com/fwlink/?linkid=2097913. voor meer informatie over het voorkomen van threadingproblemen met DbContext

Dit scenario is gepland voor verbetering in een toekomstige release van ASP.NET Core. Zie [Blazor] De ervaring verbeteren met QuickGrid en EF Core (dotnet/aspnetcore #58716)voor meer informatie.

Ondertussen kunt u het probleem oplossen met behulp van een ItemsProvider met een annuleringstoken. Het annuleringstoken voorkomt gelijktijdige query's door de vorige aanvraag te annuleren wanneer een nieuwe aanvraag wordt uitgegeven.

Bekijk het volgende voorbeeld, dat is gebaseerd op de filmdatabase Index component voor de Een Blazor filmdatabase-app (Overzicht) bouwen handleiding. De eenvoudigere versie, opgebouwd in de app, is te zien in de voorbeeld-app van het artikel. Het Index-onderdeel dat in de app is gestructureerd, wordt vervangen door het volgende onderdeel.

Components/Pages/MoviePages/Index.razor:

@page "/movies"
@rendermode InteractiveServer
@using Microsoft.EntityFrameworkCore
@using Microsoft.AspNetCore.Components.QuickGrid
@using BlazorWebAppMovies.Models
@using BlazorWebAppMovies.Data
@inject IDbContextFactory<BlazorWebAppMovies.Data.BlazorWebAppMoviesContext> DbFactory

<PageTitle>Index</PageTitle>

<h1>Index</h1>

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

<p>
    <a href="movies/create">Create New</a>
</p>

<div>
    <QuickGrid Class="table" TGridItem="Movie" ItemsProvider="GetMovies"
            ItemKey="(x => x.Id)" Pagination="pagination">
        <PropertyColumn Property="movie => movie.Title" Sortable="true" />
        <PropertyColumn Property="movie => movie.ReleaseDate" Title="Release Date" />
        <PropertyColumn Property="movie => movie.Genre" />
        <PropertyColumn Property="movie => movie.Price" />
        <PropertyColumn Property="movie => movie.Rating" />

        <TemplateColumn Context="movie">
            <a href="@($"movies/edit?id={movie.Id}")">Edit</a> |
            <a href="@($"movies/details?id={movie.Id}")">Details</a> |
            <a href="@($"movies/delete?id={movie.Id}")">Delete</a>
        </TemplateColumn>
    </QuickGrid>
</div>

<Paginator State="pagination" />

@code {
    private BlazorWebAppMoviesContext context = default!;
    private PaginationState pagination = new PaginationState { ItemsPerPage = 5 };
    private string titleFilter = string.Empty;

    public async ValueTask<GridItemsProviderResult<Movie>> GetMovies(GridItemsProviderRequest<Movie> request)
    {
        using var context = DbFactory.CreateDbContext();
        var totalCount = await context.Movie.CountAsync(request.CancellationToken);
        IQueryable<Movie> query = context.Movie.OrderBy(x => x.Id);
        query = request.ApplySorting(query).Skip(request.StartIndex);

        if (request.Count.HasValue)
        {
            query = query.Take(request.Count.Value);
        }

        var items = await query.ToArrayAsync(request.CancellationToken);

        var result = new GridItemsProviderResult<Movie>
        {
            Items = items,
            TotalItemCount = totalCount
        };

        return result;
    }
}