Sdílet prostřednictvím

komponenta ASP.NET Core BlazorQuickGrid

  • Článek

Poznámka:

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

Důležité

Tyto informace se týkají předběžného vydání produktu, který může být podstatně změněn před komerčním vydáním. Microsoft neposkytuje žádné záruky, výslovné ani předpokládané, týkající se zde uváděných informací.

Aktuální verzi najdete v tomto článku ve verzi .NET 9.

Komponenta QuickGrid 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 quickGridu pro Blazor ukázkovou aplikaci. Ukázkový web je hostovaný na GitHub Pages. Web se rychle načte díky statickému předkreslování pomocí projektuBlazorWasmPrerendering.Build komunitou.

QuickGrid implementace

QuickGrid Implementace komponenty:

  • Zadejte značky pro komponentu QuickGrid v Razor revizích (<QuickGrid>...</QuickGrid>).
  • Pojmenujte dotazovatelný zdroj dat pro mřížku. Použijte některý z následujících zdrojů dat:
    • Items: Hodnota nullable IQueryable<TGridItem>, kde TGridItem je typ dat 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 vykresluje pouze data kolem aktuálního 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 a ItemSize zajistit, aby se každý řádek vykreslovat 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 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. To umožňuje mřížce zachovat přidružení mezi prvky řádku a datovými položkami na základě jejich jedinečných identifikátorů, i když TGridItem jsou instance 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í načtení a vykreslení mřížky 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ého QuickGrid obsahu (RenderFragment) zadejte PropertyColumn<TGridItem,TProp>hodnoty, které představují TGridItem sloupce, 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 seřadí se.
    • 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, obsahuje výchozí šablona záhlaví spolu Titles příslušnými indikátory řazení a tlačítky možností řazení.
    • Title: Text nadpisu sloupce. Název se vykreslí automaticky, pokud HeaderTemplate se nepoužívá.
  • Zadejte značky pro komponentu QuickGrid v Razor revizích (<QuickGrid>...</QuickGrid>).
  • Pojmenujte dotazovatelný zdroj dat pro mřížku. Použijte některý z následujících zdrojů dat:
    • Items: Hodnota nullable IQueryable<TGridItem>, kde TGridItem je typ dat 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 vykresluje pouze data kolem aktuálního 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 a ItemSize zajistit, aby se každý řádek vykreslovat 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 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. To umožňuje mřížce zachovat přidružení mezi prvky řádku a datovými položkami na základě jejich jedinečných identifikátorů, i když TGridItem jsou instance 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í načtení a vykreslení mřížky 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ého QuickGrid obsahu (RenderFragment) zadejte PropertyColumn<TGridItem,TProp>hodnoty, které představují TGridItem sloupce, 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 seřadí se.
    • 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, obsahuje výchozí šablona záhlaví spolu Titles příslušnými indikátory řazení a tlačítky možností řazení.
    • Title: Text nadpisu sloupce. Název se vykreslí automaticky, pokud HeaderTemplate se nepoužívá.

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řístup ke komponentě v prohlížeči v 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í režim vykreslování.

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 stránkovat data ze zdroje dat. Stránkování vyžaduje Blazor Web App, aby komponenta přijala interaktivní režim vykreslování.

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 nad nebo pod komponentu Paginator komponentuQuickGrid. Nastavte na Paginator.State :pagination

<Paginator State="pagination" />

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

QuickGrid vykreslí další prázdné řádky, které vyplní poslední 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 jsou určené k usnadnění vykreslování QuickGridu se stabilní výškou řádku a styly na všech stránkách.

Použití stylů řádků

Použití stylů na řádky pomocí izolace CSS, které mohou zahrnovat stylování prázdných řádků pro součásti QuickGrid, které stránkovací data s Paginator komponent.

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

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

Použijte styl řádku s pseudo-elementem ::deep-. 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 prázdné buňky řádků, což zabraňuje vykreslení ohraničení prázdných buněk řádku na styl bootstrap.

{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">

Zdroj dat Entity Framework Core (EF Core)

Pomocí vzoru továrny můžete přeložit EF Core kontext 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>) se vloží do komponenty s direktivou @inject . Přístup továrny vyžaduje odstranění kontextu databáze, takže komponenta implementuje IAsyncDisposable rozhraní s direktivou @implements . Zprostředkovatel položky pro komponentu QuickGridDbSet<T> je získán z vytvořeného databázového kontextu (CreateDbContext) vložené objektu pro vytváření kontextu databáze.

QuickGrid rozpozná instance poskytované IQueryable systémem souborů EF a ví, jak asynchronně řešit dotazy kvůli efektivitě.

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

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.

Volání AddQuickGridEntityFrameworkAdapter kolekce služby v Program souboru pro registraci implementace s podporou IAsyncQueryExecutor EF:

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í k CreateDbContext poli z vložené továrny () nový kontextcontext databáze (DbFactory).
  • Asynchronní DisposeAsync metoda odstraní kontext databáze, když je komponenta uvolněna.

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

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í:

Podpora zobrazovaného názvu

Název sloupce lze přiřadit pomocí ColumnBase<TGridItem>.TitlePropertyColumn<TGridItem,TProp>značky 's. V následujícím příkladu filmu se sloupci zobrazí název "Release Date" pro data data vydání filmu sloupce:

<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 zobrazovaný název data vydání filmu "Release Date" pro jeho ReleaseDate vlastnost:

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

Chcete-li povolitQuickGrid, aby komponenta používala podtřídu DisplayAttribute.NamePropertyColumn<TGridItem,TProp> buď v komponentě, nebo v samostatné třídě:

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

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

Atribut se však doporučuje, [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řevede GridItemsProvider<TGridItem> dotaz GridItemsProviderRequest<TGridItem> na 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 },
            });

            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 najdete v tématu Blazor ASP.NET Core.

QuickGrid scaffolder

Scaffolder QuickGrid scaffolds Razor components with QuickGrid to display data from a database.

Scaffolder generuje základní stránky Create, Read, Update a Delete (CRUD) na základě datového modelu Entity Framework Core. Můžete vygenerovat jednotlivé stránky nebo všechny stránky CRUD. V případě potřeby vyberete třídu modelu a DbContextvolitelně vytvoříte novou DbContext .

Vygenerované Razor komponenty se přidají do vygenerované složky projektu pojmenované po třídě 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 vygenerovanou položku.

V dialogovém okně Přidat novou položku uživatelského rozhraní se otevře> nainstalovaná společná>>Razor komponenta, vyberte Razor 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 pro konkrétně vytváření, úpravy, odstraňování, podrobnosti a součásti seznamu. Tento rozevírací seznam je užitečný v případě, že potřebujete vytvořit pouze konkrétní typ vygenerovaného komponenty do třídy 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).
  • V případě třídy DbContext vyberte existující kontext databáze nebo vyberte + tlačítko (znaménko plus) a modální dialogové okno Přidat kontext dat pro přidání nového kontextu databáze.
  • 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.

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