komponenta ASP.NET Core Blazor`QuickGrid`

Poznámka:

Toto není nejnovější verze tohoto článku. Aktuální verzi najdete ve verzi .NET 10 tohoto článku.

QuickGrid komponenta je komponenta Razor pro rychlé a efektivní zobrazení dat v tabulkové podobě. QuickGrid poskytuje jednoduchou a pohodlnou komponentu datové mřížky pro běžné scénáře vykreslování mřížky a slouží jako referenční architektura a standardní hodnoty výkonu pro vytváření komponent datové mřížky. QuickGrid je vysoce optimalizovaný a používá pokročilé techniky k dosažení optimálního výkonu vykreslování.

Balíček

Přidejte odkaz na Microsoft.AspNetCore.Components.QuickGrid balíček.

Poznámka:

Pokyny k přidávání balíčků do aplikací .NET najdete v článcích v části Instalace a správa balíčků na webu Pracovní postup používání balíčků (dokumentace k NuGetu). Ověřte správné verze balíčků na NuGet.org.

Ukázková aplikace

Různé QuickGrid ukázky najdete v ukázkové aplikaci QuickGrid pro Blazor. Ukázkový web je hostovaný na GitHub Pages. Web se rychle načítá díky statickému předkreslování pomocí projektu GitHub, který je udržován komunitou.

QuickGrid implementace

Pro implementaci komponenty QuickGrid:

Zadejte značky pro komponentu QuickGrid v Razor zápisu (<QuickGrid>...</QuickGrid>).
Pojmenujte dotazovatelný zdroj dat pro mřížku. Použijte některý z následujících zdrojů dat:
- Items: Nulovatelná IQueryable<TGridItem>, kde TGridItem je datový typ reprezentovaný jednotlivými řádky v mřížce.
- ItemsProvider: Zpětné volání, které poskytuje data pro mřížku.
Class: Volitelný název třídy CSS. Je-li k dispozici, název třídy je zahrnut v class atributu vykreslené tabulky.
Theme: Název motivu (výchozí hodnota: default). To má vliv na to, která pravidla stylů odpovídají tabulce.
Virtualize: Pokud je hodnota true, mřížka se vykreslí pomocí virtualizace. To se obvykle používá ve spojení s posouváním a způsobí, že mřížka načte a vykreslí pouze data kolem aktuální oblasti zobrazení posuvníku. To může výrazně zlepšit výkon při posouvání velkých datových sad. Pokud použijete Virtualize, měli byste zadat hodnotu pro ItemSize a musíte zajistit, aby se každý řádek vykresloval s konstantní výškou. Obecně platí, že není vhodné použít Virtualize , pokud je množství vykreslovaných dat malé nebo pokud používáte stránkování.
ItemSize: Lze použít pouze při použití Virtualize. ItemSize definuje očekávanou výšku v pixelech pro každý řádek, což umožňuje mechanismu virtualizace načíst správný počet položek odpovídající velikosti zobrazení a zajistit přesné posouvání.
ItemKey: Volitelně definuje hodnotu pro @key pro každý vykreslený řádek. Obvykle se používá k určení jedinečného identifikátoru, například hodnoty primárního klíče, pro každou položku dat. Toto umožňuje mřížce zachovat vazbu mezi prvky řádku a datovými položkami na základě jejich jedinečných identifikátorů, i když instance TGridItem jsou nahrazeny novými kopiemi (například po novém dotazu na podkladové úložiště dat). Pokud není nastavená, jedná se @key o TGridItem instanci.
OverscanCount: Definuje, kolik dalších položek se má vykreslit před a za viditelnou oblastí, aby se snížila frekvence vykreslování během posouvání. Vyšší hodnoty sice můžou zlepšit plynulost posouvání tím, že vykreslují více položek mimo obrazovku, ale vyšší hodnota může také vést ke zvýšení počáteční doby načítání. Doporučujeme najít rovnováhu na základě velikosti sady dat a požadavků na uživatelské prostředí. Výchozí hodnota je 3. K dispozici pouze při použití Virtualize.
Pagination: Volitelně propojte tuto TGridItem instanci s modelem PaginationState, což způsobí, že mřížka načte a vykreslí pouze aktuální stránku dat. Obvykle se používá ve spojení s komponentou nebo jinou Paginator logikou uživatelského rozhraní, která zobrazuje a aktualizuje zadanou PaginationState instanci.
V podřízeném obsahu QuickGrid (RenderFragment) zadejte PropertyColumn<TGridItem,TProp>y, které představují sloupce TGridItem, jejichž buňky zobrazují hodnoty:
- Property: Definuje hodnotu, která se má zobrazit v buňkách tohoto sloupce.
- Format: Volitelně určuje formátovací řetězec pro hodnotu. Použití Format vyžaduje typ TProp k implementaci IFormattable.
- Sortable: Určuje, zda mají být data seřazena podle tohoto sloupce. Výchozí hodnota se může lišit podle typu sloupce. Pokud je například zadán nějaký TemplateColumn<TGridItem> parametr, SortBy bude seřazen.
- InitialSortDirection: Označuje směr řazení, pokud IsDefaultSortColumn je true.
- IsDefaultSortColumn: Určuje, jestli má být tento sloupec ve výchozím nastavení seřazen.
- PlaceholderTemplate: Pokud jsou zadané, virtualizované mřížky používají tuto šablonu k vykreslení buněk, jejichž data nebyla načtena.
- HeaderTemplate: Volitelná šablona pro buňku záhlaví tohoto sloupce. Pokud není zadáno, výchozí šablona záhlaví obsahuje Title, spolu s příslušnými indikátory řazení a tlačítky možností.
- Title: Text nadpisu sloupce. Titul se vykreslí automaticky, pokud HeaderTemplate není použito.

Zadejte značky pro komponentu QuickGrid v Razor zápisu (<QuickGrid>...</QuickGrid>).
Pojmenujte dotazovatelný zdroj dat pro mřížku. Použijte některý z následujících zdrojů dat:
- Items: Nulovatelná IQueryable<TGridItem>, kde TGridItem je datový typ reprezentovaný jednotlivými řádky v mřížce.
- ItemsProvider: Zpětné volání, které poskytuje data pro mřížku.
Class: Volitelný název třídy CSS. Je-li k dispozici, název třídy je zahrnut v class atributu vykreslené tabulky.
Theme: Název motivu (výchozí hodnota: default). To má vliv na to, která pravidla stylů odpovídají tabulce.
Virtualize: Pokud je hodnota true, mřížka se vykreslí pomocí virtualizace. To se obvykle používá ve spojení s posouváním a způsobí, že mřížka načte a vykreslí pouze data kolem aktuální oblasti zobrazení posuvníku. To může výrazně zlepšit výkon při posouvání velkých datových sad. Pokud použijete Virtualize, měli byste zadat hodnotu pro ItemSize a musíte zajistit, aby se každý řádek vykresloval s konstantní výškou. Obecně platí, že není vhodné použít Virtualize , pokud je množství vykreslovaných dat malé nebo pokud používáte stránkování.
ItemSize: Lze použít pouze při použití Virtualize. ItemSize definuje očekávanou výšku v pixelech pro každý řádek, což umožňuje mechanismu virtualizace načíst správný počet položek odpovídající velikosti zobrazení a zajistit přesné posouvání.
ItemKey: Volitelně definuje hodnotu pro @key pro každý vykreslený řádek. Obvykle se používá k určení jedinečného identifikátoru, například hodnoty primárního klíče, pro každou položku dat. Toto umožňuje mřížce zachovat vazbu mezi prvky řádku a datovými položkami na základě jejich jedinečných identifikátorů, i když instance TGridItem jsou nahrazeny novými kopiemi (například po novém dotazu na podkladové úložiště dat). Pokud není nastavená, jedná se @key o TGridItem instanci.
Pagination: Volitelně propojte tuto TGridItem instanci s modelem PaginationState, což způsobí, že mřížka načte a vykreslí pouze aktuální stránku dat. Obvykle se používá ve spojení s komponentou nebo jinou Paginator logikou uživatelského rozhraní, která zobrazuje a aktualizuje zadanou PaginationState instanci.
V podřízeném obsahu QuickGrid (RenderFragment) zadejte PropertyColumn<TGridItem,TProp>y, které představují sloupce TGridItem, jejichž buňky zobrazují hodnoty:
- Property: Definuje hodnotu, která se má zobrazit v buňkách tohoto sloupce.
- Format: Volitelně určuje formátovací řetězec pro hodnotu. Použití Format vyžaduje typ TProp k implementaci IFormattable.
- Sortable: Určuje, zda mají být data seřazena podle tohoto sloupce. Výchozí hodnota se může lišit podle typu sloupce. Pokud je například zadán nějaký TemplateColumn<TGridItem> parametr, SortBy bude seřazen.
- InitialSortDirection: Označuje směr řazení, pokud IsDefaultSortColumn je true.
- IsDefaultSortColumn: Určuje, jestli má být tento sloupec ve výchozím nastavení seřazen.
- PlaceholderTemplate: Pokud jsou zadané, virtualizované mřížky používají tuto šablonu k vykreslení buněk, jejichž data nebyla načtena.
- HeaderTemplate: Volitelná šablona pro buňku záhlaví tohoto sloupce. Pokud není zadáno, výchozí šablona záhlaví obsahuje Title, spolu s příslušnými indikátory řazení a tlačítky možností.
- Title: Text nadpisu sloupce. Titul se vykreslí automaticky, pokud HeaderTemplate není použito.

Přidejte například následující komponentu pro vykreslení mřížky.

U Blazor Web Apps musí komponenta QuickGrid přijmout interaktivní režim vykreslování, aby bylo možné povolit interaktivní funkce, jako je stránkování a řazení.

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

Přistupte ke komponentě v prohlížeči na relativní cestě /promotion-grid.

V současné době se neplánují rozšířit QuickGrid o funkce, které nabízejí plnohodnotné komerční mřížky, například hierarchické řádky, sloupce přetahováním myší nebo výběry oblastí podobné Excelu. Pokud potřebujete pokročilé funkce, které nechcete vyvíjet sami, pokračujte v používání mřížek třetích stran.

Seřadit podle sloupce

Komponenta QuickGrid může řadit položky podle sloupců. Řazení Blazor Web Appvyžaduje, aby komponenta přijala interaktivní vykreslovací režim.

Přidejte Sortable="true" (Sortable) ke PropertyColumn<TGridItem,TProp> značce:

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

Ve spuštěné aplikaci seřaďte QuickGrid sloupec tak, že vyberete název vykresleného sloupce.

Položky stránky s komponentou `Paginator`

Komponenta QuickGrid může zpracovávat data ze zdroje dat. Pro je stránkování nutné, aby komponenta přijala interaktivní vykreslovací režim .

PaginationState Přidejte instanci do bloku komponenty@code. ItemsPerPage Nastavte počet položek, které se mají zobrazit na stránce. V následujícím příkladu je instance pojmenovaná paginationa na stránce je nastaveno deset položek:

PaginationState pagination = new PaginationState { ItemsPerPage = 10 };

QuickGrid Nastavte vlastnost komponenty Pagination na pagination:

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

Pokud chcete poskytnout uživatelské rozhraní pro stránkování, přidejte komponentu nad nebo pod Paginator. Nastavte Paginator.State na pagination

<Paginator State="pagination" />

Ve spuštěné aplikaci můžete procházet položky pomocí vykreslované Paginator komponenty.

QuickGrid vykresluje další prázdné řádky, které vyplní konečnou stránku dat při použití s komponentou Paginator. V rozhraní .NET 9 nebo novější se do prázdných řádků přidají prázdné datové buňky (<td></td>). Prázdné řádky mají usnadnit vykreslování QuickGrid se stabilní výškou řádku a stylováním na všech stránkách.

Aplikovat styly řádků

Používejte styly na řádky pomocí izolace CSS, což může zahrnovat stylování prázdných řádků pro komponenty QuickGrid, které stránekjí data pomocí komponenty Paginator.

Zabalte komponentu QuickGrid do elementu bloku obálky, například <div>:

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

Použijte styl řádku s ::deeppseudo-elementem. V následujícím příkladu je výška řádku nastavena na 2em, včetně prázdných datových řádků.

{COMPONENT}.razor.css:

::deep tr {
    height: 2em;
}

Případně použijte následující přístup stylů CSS:

Zobrazí buňky řádků naplněné daty.
Nezobrazovat buňky v prázdných řádcích, což zabraňuje vykreslení jejich ohraničení dle stylu Bootstrapu.

{COMPONENT}.razor.css:

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

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

Další informace o použití ::deeppseudo-prvků s izolací CSS naleznete v tématu ASP.NET Core Blazor izolace CSS.

Vlastní atributy a styly

QuickGrid také podporuje předávání vlastních atributů a tříd stylů (Class) do elementu vykreslené tabulky:

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

Naformátuj řádek tabulky na základě položky řádku

Použijte třídu stylů na řádek mřížky na základě položky řádku pomocí parametru RowClass.

V následujícím příkladu:

Položka v řádku je reprezentována záznamem Person. Záznam Person obsahuje vlastnost FirstName.
Metoda GetRowCssClass použije styly třídy highlight-row na libovolný řádek, ve kterém je křestní jméno osoby "Julie."

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

Zavřít možnosti sloupce `QuickGrid`

Zavřete rozhraní možností sloupce QuickGrid pomocí metody HideColumnOptionsAsync.

Následující příklad zavře uživatelské rozhraní možností sloupců, jakmile se použije filtr názvu:

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

zdroj dat Entity Framework Core (EF Core)

Využijte vzor továrny k vyřešení EF Core kontextu databáze, který poskytuje data komponentě QuickGrid. Další informace o tom, proč se model továrny doporučuje, najdete v tématu ASP.NET Core Blazor s Entity Framework Core (EF Core).

Objekt pro vytváření kontextu databáze (IDbContextFactory<TContext>) je vložen do komponenty pomocí direktivy @inject. Návrhový vzor továrny vyžaduje uvolnění kontextu databáze, takže komponenta implementuje rozhraní IAsyncDisposable s direktivou @implements. Zprostředkovatel položky pro komponentu QuickGrid je DbSet<T>, který je získán z vytvořeného databázového kontextu (CreateDbContext) vloženého objektu pro vytváření kontextu databáze.

QuickGrid rozpoznává instance IQueryable zadanou platformou EF a umí asynchronně řešit dotazy za účelem zajištění efektivity.

Přidejte odkaz na Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter balíček NuGet.

Poznámka:

Použijte AddQuickGridEntityFrameworkAdapter na kolekci služeb v souboru Program k registraci implementace s podporou EF IAsyncQueryExecutor.

builder.Services.AddQuickGridEntityFrameworkAdapter();

Následující příklad používá ExampleTableDbSet<TEntity> (tabulku) z AppDbContext kontextu databáze (context) jako zdroj dat pro komponentu QuickGrid :

@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();
}

V bloku kódu (@code) předchozího příkladu:

Pole context obsahuje kontext databáze, který je zadaný jako .AppDbContext
Metoda OnInitialized životního cyklu přiřadí nový kontext databáze (CreateDbContext) k poli context z vložené továrny (DbFactory).
Asynchronní DisposeAsync metoda odstraní kontext databáze, když je komponenta uvolněna.

Také můžete pomocí libovolného operátoru LINQ podporovaného systémem EF filtrovat data před jejich předáním do parametru Items.

Následující příklad filtruje filmy podle názvu filmu zadaného do vyhledávacího pole. Kontext databáze je BlazorWebAppMoviesContexta model je Movie. Vlastnost videa Title se používá pro operaci filtru.

@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();
}

Pracovní příklad najdete v následujících zdrojích informací:

Kurz vytvoření Blazor aplikace pro filmovou databázi
Blazor ukázková aplikace databáze filmů: Vyberte složku s nejnovější verzí v úložišti. Ukázková složka projektu kurzu má název BlazorWebAppMovies.

Podpora zobrazovaného názvu

Název sloupce lze přiřadit pomocí ColumnBase<TGridItem>.Title v značce PropertyColumn<TGridItem,TProp>. V následujícím příkladu filmu je sloupci pro datum vydání filmu přiřazen název "Release Date":

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

Správa názvů sloupců (názvů) z vlastností vázaného modelu je ale obvykle lepší volbou pro údržbu aplikace. Model může řídit zobrazovaný název vlastnosti s atributem[Display]. V následujícím příkladu model určuje název pro zobrazení data vydání filmu "Release Date" pro vlastnost ReleaseDate.

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

Chcete-li komponentě QuickGrid povolit použití vlastnosti DisplayAttribute.Name, vytvořte podtřídu PropertyColumn<TGridItem,TProp>, buď přímo v komponentě, nebo v samostatné třídě. Voláním metody GetName vrátí lokalizovanou hodnotu DisplayAttribute.Name, pokud nelokalizovaný DisplayName ([DisplayName] atribut) hodnotu neobsahuje:

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

Použijte podtřídu v komponentě QuickGrid . V následujícím příkladu se použije předchozí příklad DisplayNameColumn . Název "Release Date" je poskytován atributem [Display] v modelu, takže není nutné zadávat Title.

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

Tento [DisplayName] atribut je také podporovaný:

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

Doporučuje se však atribut [Display], protože zpřístupňuje další vlastnosti. Atribut například [Display] nabízí možnost přiřadit typ prostředku pro lokalizaci.

Vzdálená data

V Blazor WebAssembly aplikacích je běžné načítání dat z webového rozhraní API založeného na formátu JSON na serveru. Pokud chcete načíst pouze data požadovaná pro aktuální stránku nebo oblast zobrazení dat a použít pravidla řazení nebo filtrování na serveru, použijte ItemsProvider parametr.

ItemsProvider lze také použít v aplikaci na straně Blazor serveru, pokud je aplikace nutná k dotazování externího koncového bodu nebo v jiných případech, kdy požadavky nejsou pokryty IQueryable.

Zadejte zpětné volání odpovídající typu delegáta GridItemsProvider<TGridItem> , kde TGridItem je typ dat zobrazených v mřížce. Zpětné volání má parametr typu GridItemsProviderRequest<TGridItem>, který určuje počáteční index, maximální počet řádků a pořadí řazení dat, která se mají vrátit. Kromě vrácení odpovídajících položek se také vyžaduje celkový počet položek (totalItemCount) pro správné fungování stránkování a virtualizace.

Následující příklad získá data z veřejné databáze OpenFDA Food Enforcement.

Převádí GridItemsProvider<TGridItem> do dotazu k databázi OpenFDA. Parametry dotazu se překládají do konkrétního formátu adresy URL podporovaného externím rozhraním API JSON. Řazení a filtrování je možné provádět pouze prostřednictvím řazení a filtrování, které podporuje externí rozhraní API. Koncový bod OpenFDA nepodporuje řazení, takže žádný ze sloupců není označený jako seřazený. Podporuje ale přeskočení záznamů (skip parametru) a omezení vrácení záznamů (limit parametru), aby komponenta mohla povolit virtualizaci a rychle procházet desítky tisíc záznamů.

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

Další informace o volání webových rozhraní API získáte v tématu Volání webového rozhraní API z aplikace Blazor ASP.NET Core.

QuickGrid lešenář

Nástroj pro generování kódu QuickGrid generuje součásti Razor s QuickGrid pro zobrazení dat z databáze.

Scaffolder generuje základní stránky Create, Read, Update a Delete (CRUD) na základě datového modelu Entity Framework Core. Můžete připravit strukturu pro jednotlivé stránky nebo všechny stránky CRUD. Vyberete třídu modelu a volitelně vytvoříte novou DbContext, pokud je to potřeba.

Vygenerované komponenty Razor jsou přidány do složky projektu, která je pojmenována podle třídy modelu. Vygenerovaná Index komponenta používá komponentu QuickGrid k zobrazení dat. Přizpůsobte si vygenerované komponenty podle potřeby a povolte interaktivitu, abyste mohli využívat interaktivní funkce, jako je stránkování, řazení a filtrování.

Komponenty vytvořené scaffolderem vyžadují vykreslování na straně serveru (SSR), takže se při spuštění na WebAssembly nepodporují.

Klikněte pravým tlačítkem myši na Components/Pages složku a vyberte Přidat>novou generovanou položku.

V dialogovém okně Přidat novou položku šablony, otevřete sekce Instalováno>Společné>Blazor>Razor, vyberte Komponenty využívající Entity Framework (CRUD). Vyberte tlačítko Přidat.

CRUD je zkratka pro vytvoření, čtení, aktualizaci a odstranění. Správce vytvoří pro aplikaci komponenty pro vytváření, úpravy, odstraňování, podrobnosti a indexování.

Dokončete dialogové okno Přidat Razor komponenty pomocí Entity Framework (CRUD):

Rozevírací seznam Šablona obsahuje další šablony specificky určené pro vytváření, úpravu, odstranění, zobrazení podrobností a seznamové komponenty. Tento rozevírací seznam je užitečný v případě, že potřebujete vytvořit pouze konkrétní typ komponenty vygenerované ke třídě modelu. Pokud chcete vygenerovat úplnou sadu komponent, ponechte rozevírací seznam Šablony nastavený na CRUD.
V rozevíracím seznamu Třída modelu vyberte třídu modelu. Vytvoří se složka pro vygenerované komponenty z názvu modelu (pokud je třída modelu pojmenována Movie, složka se automaticky jmenuje MoviePages).
Pro DbContext třídypoužijte některý z následujících přístupů:
- Vyberte existující třídu DbContext, o které víte, že má registraci továrního poskytovatele (AddDbContextFactory).
- Vyberte tlačítko + (znaménko plus) a pomocí dialogového okna Přidat kontext dat zadejte nový název třídy DbContext, který zaregistruje třídu u zprostředkovatele továrny místo použití typu kontextu přímo jako registraci služby.
Po zavření dialogového okna modelu se rozevírací seznam zprostředkovatele databáze nastaví na SQL Server. Můžete vybrat vhodného zprostředkovatele pro databázi, kterou používáte. Mezi možnosti patří SQL Server, SQLite, PostgreSQL a Azure Cosmos DB.
Vyberte Přidat.

Všechny následující příkazy vložte do příkazové řádky (>) v terminálu (nabídka Terminál>Nový terminál) otevřené v kořenovém adresáři projektu. Když vložíte více příkazů, zobrazí se upozornění s oznámením, že se spustí více příkazů. Ignorujte upozornění a pokračujte v operaci vložení.

Když vložíte více příkazů, spustí se všechny příkazy s výjimkou poslední. Poslední příkaz se nespustí, dokud na klávesnici nestisknete Enter .

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

Důležité

Po spuštění prvních osmi příkazů se ujistěte, že poslední příkaz spustíte stisknutím klávesy Enter na klávesnici.

Předchozí příkazy přidávají:

Nástroje rozhraní příkazového řádku (CLI) pro EF Core
aspnet-codegenerator Nástroj pro generování struktury
Nástroje pro čas návrhu pro EF Core
Zprostředkovatelé SQLite a SQL Serveru s balíčkem EF Core jako závislostí
Microsoft.VisualStudio.Web.CodeGeneration.Design pro vytváření základní struktury

V terminálu spusťte následující příkaz, který vygeneruje úplnou sadu komponent pomocí CRUD šablony:

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

Poznámka:

Předchozí příkaz je příkaz .NET CLI a příkazy rozhraní příkazového řádku .NET CLI se spustí při zadání na příkazovém řádku PowerShellu, což je výchozí příkazové prostředí terminálu VS Code.

Následující tabulka vysvětluje možnosti generátoru kódu ASP.NET Core v předchozím příkazu.

Možnost	Zástupný symbol	Popis
`-dbProvider`	`{PROVIDER}`	Poskytovatel databáze, který se má použít. Mezi možnosti patří `sqlserver` (výchozí), `sqlite`, `cosmos`, `postgres`.
`-dc`	`{DB CONTEXT CLASS}`	Třída DbContext, která se má použít, včetně oboru názvů. Pokud chcete zajistit, aby byla třída DbContext zaregistrovaná ve službách aplikace u poskytovatele továrny (AddDbContextFactory), použijte existující třídu DbContext, o které víte, že má registraci poskytovatele továrny, nebo zadejte novou třídu DbContext.
`-m`	`{MODEL}`	Název třídy modelu.
`-outDir`	`{PATH}`	Výstupní adresář pro vygenerované komponenty. Složka se vytvoří z názvu modelu ve výstupním adresáři pro uložení komponent (pokud je třída modelu pojmenována `Movie`, složka se automaticky pojmenuje `MoviePages`). Cesta je obvykle buď `Components/Pages` pro Blazor Web App, nebo `Pages` pro samostatnou aplikaci Blazor WebAssembly.

Pro další Blazor možnosti poskytovatele použijte možnost nápovědy .NET CLI (-h|--help):

dotnet aspnet-codegenerator blazor -h

Do příkazového řádku (>) otevřeného v kořenovém adresáři projektu vložte všechny následující příkazy. Když vložíte více příkazů, zobrazí se upozornění s oznámením, že se spustí více příkazů. Ignorujte upozornění a pokračujte v operaci vložení.

Když vložíte více příkazů, spustí se všechny příkazy s výjimkou poslední. Poslední příkaz se nespustí, dokud na klávesnici nestisknete Enter .

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

Důležité

Po spuštění prvních osmi příkazů se ujistěte, že poslední příkaz spustíte stisknutím klávesy Enter na klávesnici.

Předchozí příkazy přidávají:

Nástroje rozhraní příkazového řádku (CLI) pro EF Core
aspnet-codegenerator Nástroj pro generování struktury
Nástroje pro čas návrhu pro EF Core
Zprostředkovatelé SQLite a SQL Serveru s balíčkem EF Core jako závislostí
Microsoft.VisualStudio.Web.CodeGeneration.Design pro scaffoldování.

V příkazovém prostředí spusťte následující příkaz, který vygeneruje úplnou sadu komponent pomocí CRUD šablony:

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

Následující tabulka vysvětluje možnosti generátoru kódu ASP.NET Core v předchozím příkazu.

Možnost	Zástupný symbol	Popis
`-dbProvider`	`{PROVIDER}`	Poskytovatel databáze, který se má použít. Mezi možnosti patří `sqlserver` (výchozí), `sqlite`, `cosmos`, `postgres`.
`-dc`	`{DB CONTEXT CLASS}`	Třída DbContext, která se má použít, včetně oboru názvů. Pokud chcete zajistit, aby byla třída DbContext zaregistrovaná ve službách aplikace u poskytovatele továrny (AddDbContextFactory), použijte existující třídu DbContext, o které víte, že má registraci poskytovatele továrny, nebo zadejte novou třídu DbContext.
`-m`	`{MODEL}`	Název třídy modelu.
`-outDir`	`{PATH}`	Výstupní adresář pro vygenerované komponenty. Složka se vytvoří z názvu modelu ve výstupním adresáři pro uložení komponent (pokud je třída modelu pojmenována `Movie`, složka se automaticky pojmenuje `MoviePages`). Cesta je obvykle buď `Components/Pages` pro Blazor Web App, nebo `Pages` pro samostatnou aplikaci Blazor WebAssembly.

Pro další Blazor možnosti poskytovatele použijte možnost nápovědy .NET CLI (-h|--help):

dotnet aspnet-codegenerator blazor -h

Příklad použití QuickGrid nástroje scaffolder naleznete v tématu Vytvoření Blazor aplikace filmové databáze (Přehled).

Více souběžných dotazů EF Core způsobí spuštění `System.InvalidOperationException`

Několik souběžných dotazů EF Core může aktivovat následující System.InvalidOperationException:

System.InvalidOperationException: V této instanci kontextu byla spuštěna druhá operace před dokončením předchozí operace. Příčinou jsou obvykle různá vlákna současně používající stejnou instanci DbContext. Další informace o tom, jak se vyhnout problémům s vlákny u dbContext, najdete v tématu https://go.microsoft.com/fwlink/?linkid=2097913.

Tento scénář je naplánovaný na vylepšení v nadcházející verzi ASP.NET Core. Další informace najdete v tématu [Blazor] Zlepšení zkušeností s QuickGrid a EF Core (dotnet/aspnetcore #58716).

Mezitím můžete problém vyřešit pomocí ItemsProvider s rušícím tokenem. Token zrušení zabraňuje souběžným dotazům zrušením předchozího požadavku při vydání nového požadavku.

Podívejte se na následující příklad, který je založený na komponentě Index filmové databáze pro Sestavení aplikace Blazor filmové databáze (Přehled) kurzu. Jednodušší verze integrovaná do aplikace lze vidět v ukázkové aplikaci článku . Komponenta Index nasazená do aplikace je nahrazena následující komponentou.

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

Váš názor

Byla tato stránka užitečná?

Last updated on 2025-11-11

Sdílet prostřednictvím

komponenta ASP.NET Core BlazorQuickGrid

Balíček

Ukázková aplikace

QuickGrid implementace

Seřadit podle sloupce

Položky stránky s komponentou Paginator

Aplikovat styly řádků

Vlastní atributy a styly

Naformátuj řádek tabulky na základě položky řádku

Zavřít možnosti sloupce QuickGrid

zdroj dat Entity Framework Core (EF Core)

Podpora zobrazovaného názvu

Vzdálená data

QuickGrid lešenář

Více souběžných dotazů EF Core způsobí spuštění System.InvalidOperationException

Váš názor

Další materiály

komponenta ASP.NET Core Blazor`QuickGrid`

Položky stránky s komponentou `Paginator`

Zavřít možnosti sloupce `QuickGrid`

Více souběžných dotazů EF Core způsobí spuštění `System.InvalidOperationException`