składnik ASP.NET Core Blazor`QuickGrid`

Artykuł
01/13/2025

Uwaga

Nie jest to najnowsza wersja tego artykułu. Aby zapoznać się z bieżącą wersją, zobacz wersję tego artykułu platformy .NET 9.

Ważne

Te informacje odnoszą się do produktu w wersji wstępnej, który może zostać znacząco zmodyfikowany, zanim zostanie wydany komercyjnie. Firma Microsoft nie udziela żadnych gwarancji, jawnych lub domniemanych, w odniesieniu do informacji podanych w tym miejscu.

Aby zapoznać się z bieżącą wersją, zobacz wersję tego artykułu platformy .NET 9.

Składnik QuickGrid jest składnikiem umożliwiającym Razor szybkie i wydajne wyświetlanie danych w formie tabelarycznej. QuickGrid Udostępnia prosty i wygodny składnik siatki danych dla typowych scenariuszy renderowania siatki i służy jako architektura referencyjna i punkt odniesienia wydajności dla składników siatki danych. QuickGrid jest wysoce zoptymalizowany i wykorzystuje zaawansowane techniki w celu uzyskania optymalnej wydajności renderowania.

Pakiet

Dodaj odwołanie do Microsoft.AspNetCore.Components.QuickGrid pakietu.

Uwaga

Aby uzyskać instrukcje dodawania pakietów do aplikacji .NET, zobacz artykuły w sekcji Instalowanie pakietów i zarządzanie nimi w temacie Przepływ pracy użycia pakietów (dokumentacja programu NuGet). Sprawdź prawidłowe wersje pakietów pod adresem NuGet.org.

Przykładowa aplikacja

Aby zapoznać się z różnymi QuickGrid pokazami, zobacz quickGrid dla Blazor przykładowej aplikacji. Witryna demonstracyjna jest hostowana w witrynie GitHub Pages. Witryna ładuje się szybko dzięki statycznym prerenderingowi przy użyciu projektuBlazorWasmPrerendering.Build przez społeczność.

`QuickGrid` implementacja

Aby zaimplementować QuickGrid składnik:

Określ tagi składnika QuickGrid w Razor adiustacji (<QuickGrid>...</QuickGrid>).
Nadaj siatce nazwę możliwe do utworzenia zapytania źródło danych. Użyj jednego z następujących źródeł danych:
- Items: dopuszczana IQueryable<TGridItem>wartość null , gdzie TGridItem jest typem danych reprezentowanych przez każdy wiersz w siatce.
- ItemsProvider: wywołanie zwrotne, które dostarcza dane dla siatki.
Class: opcjonalna nazwa klasy CSS. Jeśli zostanie podana, nazwa klasy jest uwzględniona w atrybucie class renderowanej tabeli.
Theme: Nazwa motywu (wartość domyślna: default). Ma to wpływ na reguły stylów zgodne z tabelą.
Virtualize: Jeśli wartość true, siatka jest renderowana przy użyciu wirtualizacji. Jest to zwykle używane w połączeniu z przewijaniem i powoduje pobranie siatki i renderowanie tylko danych wokół bieżącego widoku przewijania. Może to znacznie poprawić wydajność podczas przewijania dużych zestawów danych. Jeśli używasz Virtualizemetody , należy podać wartość ItemSize dla parametru i upewnić się, że każdy wiersz jest renderowany ze stałą wysokością. Ogólnie rzecz biorąc, zaleca się nie używać Virtualize , jeśli ilość renderowanych danych jest mała lub jeśli używasz stronicowania.
ItemSize: dotyczy tylko w przypadku używania polecenia Virtualize. ItemSize definiuje oczekiwaną wysokość w pikselach dla każdego wiersza, umożliwiając mechanizmowi wirtualizacji pobranie prawidłowej liczby elementów odpowiadających rozmiarowi wyświetlania i zapewnienie dokładnego przewijania.
ItemKey: Opcjonalnie definiuje wartość dla @key każdego renderowanego wiersza. Zazwyczaj służy do określania unikatowego identyfikatora, takiego jak wartość klucza podstawowego, dla każdego elementu danych. Dzięki temu siatka może zachować skojarzenie między elementami wiersza i elementami danych na podstawie ich unikatowych identyfikatorów, nawet jeśli TGridItem wystąpienia są zastępowane przez nowe kopie (na przykład po nowym zapytaniu względem bazowego magazynu danych). Jeśli nie zostanie ustawiona @key , jest to TGridItem wystąpienie.
OverscanCount: definiuje liczbę dodatkowych elementów do renderowania przed i po widocznym regionie w celu zmniejszenia częstotliwości renderowania podczas przewijania. Chociaż wyższe wartości mogą poprawić płynność przewijania przez renderowanie większej liczby elementów poza ekranem, wyższa wartość może również spowodować wzrost początkowych czasów ładowania. Zalecane jest znalezienie równowagi na podstawie rozmiaru zestawu danych i wymagań dotyczących środowiska użytkownika. Domyślna wartość wynosi 3. Dostępne tylko w przypadku korzystania z programu Virtualize.
Pagination: opcjonalnie łączy to TGridItem wystąpienie z modelem PaginationState , co powoduje pobranie siatki i renderowanie tylko bieżącej strony danych. Jest to zwykle używane w połączeniu ze składnikiem lub inną logiką Paginator interfejsu użytkownika, która wyświetla i aktualizuje podane PaginationState wystąpienie.
W zawartości podrzędnej QuickGrid (RenderFragment) określ PropertyColumn<TGridItem,TProp>s, które reprezentują TGridItem kolumny, których komórki wyświetlają wartości:
- Property: definiuje wartość, która ma być wyświetlana w komórkach tej kolumny.
- Format: opcjonalnie określa ciąg formatu dla wartości. Użycie Format polecenia wymaga TProp zaimplementowania IFormattabletypu .
- Sortable: wskazuje, czy dane powinny być sortowalne według tej kolumny. Wartość domyślna może się różnić w zależności od typu kolumny. Na przykład element TemplateColumn<TGridItem> jest sortowany, jeśli określono jakikolwiek SortBy parametr.
- InitialSortDirection: wskazuje kierunek sortowania, jeśli IsDefaultSortColumn ma wartość true.
- IsDefaultSortColumn: wskazuje, czy ta kolumna ma być sortowana domyślnie.
- PlaceholderTemplate: Jeśli określono, zwirtualizowane siatki używają tego szablonu do renderowania komórek, których dane nie zostały załadowane.
- HeaderTemplate: opcjonalny szablon komórki nagłówka tej kolumny. Jeśli nie zostanie określony, domyślny szablon nagłówka zawiera Titleelement , wraz z dowolnymi odpowiednimi wskaźnikami sortowania i przyciskami opcji.
- Title: tekst tytułu kolumny. Tytuł jest renderowany automatycznie, jeśli HeaderTemplate nie jest używany.

Określ tagi składnika QuickGrid w Razor adiustacji (<QuickGrid>...</QuickGrid>).
Nadaj siatce nazwę możliwe do utworzenia zapytania źródło danych. Użyj jednego z następujących źródeł danych:
- Items: dopuszczana IQueryable<TGridItem>wartość null , gdzie TGridItem jest typem danych reprezentowanych przez każdy wiersz w siatce.
- ItemsProvider: wywołanie zwrotne, które dostarcza dane dla siatki.
Class: opcjonalna nazwa klasy CSS. Jeśli zostanie podana, nazwa klasy jest uwzględniona w atrybucie class renderowanej tabeli.
Theme: Nazwa motywu (wartość domyślna: default). Ma to wpływ na reguły stylów zgodne z tabelą.
Virtualize: Jeśli wartość true, siatka jest renderowana przy użyciu wirtualizacji. Jest to zwykle używane w połączeniu z przewijaniem i powoduje pobranie siatki i renderowanie tylko danych wokół bieżącego widoku przewijania. Może to znacznie poprawić wydajność podczas przewijania dużych zestawów danych. Jeśli używasz Virtualizemetody , należy podać wartość ItemSize dla parametru i upewnić się, że każdy wiersz jest renderowany ze stałą wysokością. Ogólnie rzecz biorąc, zaleca się nie używać Virtualize , jeśli ilość renderowanych danych jest mała lub jeśli używasz stronicowania.
ItemSize: dotyczy tylko w przypadku używania polecenia Virtualize. ItemSize definiuje oczekiwaną wysokość w pikselach dla każdego wiersza, umożliwiając mechanizmowi wirtualizacji pobranie prawidłowej liczby elementów odpowiadających rozmiarowi wyświetlania i zapewnienie dokładnego przewijania.
ItemKey: Opcjonalnie definiuje wartość dla @key każdego renderowanego wiersza. Zazwyczaj służy do określania unikatowego identyfikatora, takiego jak wartość klucza podstawowego, dla każdego elementu danych. Dzięki temu siatka może zachować skojarzenie między elementami wiersza i elementami danych na podstawie ich unikatowych identyfikatorów, nawet jeśli TGridItem wystąpienia są zastępowane przez nowe kopie (na przykład po nowym zapytaniu względem bazowego magazynu danych). Jeśli nie zostanie ustawiona @key , jest to TGridItem wystąpienie.
Pagination: opcjonalnie łączy to TGridItem wystąpienie z modelem PaginationState , co powoduje pobranie siatki i renderowanie tylko bieżącej strony danych. Jest to zwykle używane w połączeniu ze składnikiem lub inną logiką Paginator interfejsu użytkownika, która wyświetla i aktualizuje podane PaginationState wystąpienie.
W zawartości podrzędnej QuickGrid (RenderFragment) określ PropertyColumn<TGridItem,TProp>s, które reprezentują TGridItem kolumny, których komórki wyświetlają wartości:
- Property: definiuje wartość, która ma być wyświetlana w komórkach tej kolumny.
- Format: opcjonalnie określa ciąg formatu dla wartości. Użycie Format polecenia wymaga TProp zaimplementowania IFormattabletypu .
- Sortable: wskazuje, czy dane powinny być sortowalne według tej kolumny. Wartość domyślna może się różnić w zależności od typu kolumny. Na przykład element TemplateColumn<TGridItem> jest sortowany, jeśli określono jakikolwiek SortBy parametr.
- InitialSortDirection: wskazuje kierunek sortowania, jeśli IsDefaultSortColumn ma wartość true.
- IsDefaultSortColumn: wskazuje, czy ta kolumna ma być sortowana domyślnie.
- PlaceholderTemplate: Jeśli określono, zwirtualizowane siatki używają tego szablonu do renderowania komórek, których dane nie zostały załadowane.
- HeaderTemplate: opcjonalny szablon komórki nagłówka tej kolumny. Jeśli nie zostanie określony, domyślny szablon nagłówka zawiera Titleelement , wraz z dowolnymi odpowiednimi wskaźnikami sortowania i przyciskami opcji.
- Title: tekst tytułu kolumny. Tytuł jest renderowany automatycznie, jeśli HeaderTemplate nie jest używany.

Dodaj na przykład następujący składnik, aby renderować siatkę.

W przypadku Blazor Web Apps składnik musi przyjąć trybQuickGrid, aby włączyć funkcje interaktywne, takie jak stronicowanie i sortowanie.

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

Uzyskaj dostęp do składnika w przeglądarce w ścieżce /promotion-gridwzględnej .

Nie ma bieżących planów rozszerzenia QuickGrid z funkcjami, które pełnowymiarowe siatki komercyjne mają tendencję do oferowania, na przykład wierszy hierarchicznych, przeciągania do zmiany kolejności kolumn lub wyboru zakresu przypominającego program Excel. Jeśli potrzebujesz zaawansowanych funkcji, których nie chcesz tworzyć samodzielnie, kontynuuj korzystanie z sieci innych firm.

Sortuj według kolumny

Składnik QuickGrid może sortować elementy według kolumn. W Blazor Web Appprogramie s sortowanie wymaga, aby składnik przyjął tryb renderowania interaktywnego.

Dodaj Sortable="true" (Sortable) do tagu PropertyColumn<TGridItem,TProp> :

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

W uruchomionej aplikacji posortuj kolumnę QuickGrid , wybierając tytuł renderowanej kolumny.

Elementy strony ze składnikiem `Paginator`

Składnik QuickGrid może stronicować dane ze źródła danych. W Blazor Web Apps stronicowanie wymaga, aby składnik przyjął tryb renderowania interakcyjnego.

PaginationState Dodaj wystąpienie do bloku składnika@code. ItemsPerPage Ustaw wartość na liczbę elementów do wyświetlenia na stronę. W poniższym przykładzie wystąpienie ma nazwę pagination, a dziesięć elementów na stronę jest ustawionych:

PaginationState pagination = new PaginationState { ItemsPerPage = 10 };

QuickGrid Ustaw właściwość składnika Pagination na :pagination

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

Aby udostępnić interfejs użytkownika na potrzeby stronicowania, dodaj Paginator składnik powyżej lub poniżej QuickGrid składnika. Ustaw wartość na Paginator.Statepagination:

<Paginator State="pagination" />

W uruchomionej aplikacji przejdź do strony elementów przy użyciu renderowanego Paginator składnika.

Funkcja QuickGrid renderuje dodatkowe puste wiersze, aby wypełnić ostatnią stronę danych w przypadku użycia ze składnikiem Paginator. W programie .NET 9 lub nowszym puste komórki danych (<td></td>) są dodawane do pustych wierszy. Puste wiersze mają ułatwić renderowanie funkcji QuickGrid ze stabilną wysokością wiersza i stylem na wszystkich stronach.

Zastosuj style wierszy

Stosowanie stylów do wierszy przy użyciu izolacji CSS, które mogą obejmować stylizowanie pustych wierszy dla składników QuickGrid, które dane strony za pomocą składnika Paginator.

Zawij składnik QuickGrid w elemencie blokowym, na przykład <div>.

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

Zastosuj styl wiersza przy użyciu ::deeppseudo-elementu. W poniższym przykładzie wysokość wiersza jest ustawiona na 2em, w tym dla pustych wierszy danych.

{COMPONENT}.razor.css:

::deep tr {
    height: 2em;
}

Alternatywnie należy użyć następującego podejścia do stylów CSS:

Wyświetl komórki wierszy wypełnione danymi.
Nie wyświetlaj pustych komórek wierszy, aby uniknąć renderowania pustych obramowań tych komórek zgodnie ze stylem Bootstrap.

{COMPONENT}.razor.css:

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

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

Aby uzyskać więcej informacji na temat używania pseudoelementów ::deep z izolacją CSS, zobacz ASP.NET Core Blazor CSS izolacja.

Atrybuty niestandardowe i style

Usługa QuickGrid obsługuje również przekazywanie atrybutów niestandardowych i klas stylów (Class) do renderowanego elementu tabeli:

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

Sformatuj wiersz tabeli na podstawie elementu wiersza

Zastosuj klasę arkusza stylów do wiersza siatki na podstawie elementu wiersza przy użyciu parametru RowClass.

W poniższym przykładzie:

Element wiersza jest reprezentowany przez rekord Person. Rekord Person zawiera właściwość FirstName.
Metoda HighlightJulie stosuje style klasy highlight do dowolnego wiersza, w którym imię osoby to "Julie".

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

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

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

Źródło danych programu Entity Framework Core (EF Core)

Użyj wzorca fabryki, aby rozpoznać EF Core kontekst bazy danych, który dostarcza dane do QuickGrid składnika. Aby uzyskać więcej informacji na temat tego, dlaczego wzorzec fabryki jest zalecany, zobacz ASP.NET Core Blazor z platformą Entity Framework Core (EF Core).

Fabryka kontekstu bazy danych (IDbContextFactory<TContext>) jest wstrzykiwana do składnika za pomocą @inject dyrektywy . Podejście fabryczne wymaga usunięcia kontekstu bazy danych, więc składnik implementuje IAsyncDisposable interfejs z dyrektywą @implements . Dostawca elementu dla QuickGrid składnika jest uzyskiwany DbSet<T> z utworzonego kontekstu bazy danych (CreateDbContext) fabryki kontekstu wstrzykniętej bazy danych.

Usługa QuickGrid rozpoznaje wystąpienia dostarczone przez IQueryable platformę EF i wie, jak asynchronicznie rozwiązywać zapytania pod kątem wydajności.

Dodaj odwołanie do Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter pakietu NuGet.

Uwaga

Wywołaj AddQuickGridEntityFrameworkAdapter kolekcję usług w pliku w Program celu zarejestrowania implementacji obsługującej IAsyncQueryExecutor platformę EF:

builder.Services.AddQuickGridEntityFrameworkAdapter();

W poniższym przykładzie użyto ExampleTableDbSet<TEntity> (tabeli) z AppDbContext kontekstu bazy danych (context) jako źródła danych dla QuickGrid składnika:

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

W bloku kodu (@code) poprzedniego przykładu:

Pole context zawiera kontekst bazy danych, wpisany jako AppDbContext.
Metoda OnInitialized cyklu życia przypisuje nowy kontekst bazy danych (CreateDbContext) do context pola z iniekcyjnej fabryki (DbFactory).
Metoda asynchroniczna DisposeAsync usuwa kontekst bazy danych po usunięciu składnika.

Możesz również użyć dowolnego operatora LINQ obsługiwanego przez platformę EF do filtrowania danych przed przekazaniem ich do parametru Items .

Poniższy przykład filtruje filmy według tytułu filmu wprowadzonego w polu wyszukiwania. Kontekst bazy danych to BlazorWebAppMoviesContext, a model to Movie. Właściwość filmu Title jest używana do operacji filtrowania.

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

Aby zapoznać się z działającym przykładem, zobacz następujące zasoby:

Samouczek dotyczący tworzenia Blazor aplikacji bazy danych filmów
Blazor przykładowa aplikacja bazy danych filmów: wybierz folder najnowszej wersji w repozytorium. Przykładowy folder projektu samouczka nosi nazwę BlazorWebAppMovies.

Obsługa nazw wyświetlanych

Tytuł kolumny można przypisać przy użyciu ColumnBase<TGridItem>.Title tagu PropertyColumn<TGridItem,TProp>.s. W poniższym przykładzie filmu kolumna ma nazwę "Release Date" dla danych daty premiery filmu w kolumnie:

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

Jednak zarządzanie tytułami kolumn (nazwami) z powiązanych właściwości modelu jest zwykle lepszym wyborem do obsługi aplikacji. Model może kontrolować nazwę wyświetlaną właściwości za pomocą atrybutu [Display]. W poniższym przykładzie model określa nazwę wyświetlaną daty wydania filmu "Release Date" dla jej ReleaseDate właściwości:

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

Aby umożliwić składnikowi QuickGrid używanie właściwości DisplayAttribute.Name, podklasa PropertyColumn<TGridItem,TProp>w składniku lub w oddzielnej klasie. Wywołaj metodę GetName, aby zwrócić zlokalizowaną wartość DisplayAttribute.Name, jeśli nielokalizowany DisplayName ([DisplayName] atrybut) nie zawiera wartości:

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

Użyj podklasy w składniku QuickGrid . W poniższym przykładzie jest używana poprzednia ilustracja DisplayNameColumn . Nazwa "Release Date" jest dostarczana przez [Display] atrybut w modelu, więc nie ma potrzeby określania elementu Title:

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

[DisplayName] jest również obsługiwany:

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

Jednak atrybut jest zalecany, [Display] ponieważ udostępnia dodatkowe właściwości. Na przykład [Display] atrybut oferuje możliwość przypisania typu zasobu do lokalizacji.

Dane zdalne

W Blazor WebAssembly aplikacjach pobieranie danych z internetowego interfejsu API opartego na formacie JSON na serwerze jest typowym wymaganiem. Aby pobrać tylko dane wymagane dla bieżącej strony/widokuport danych i zastosować reguły sortowania lub filtrowania na serwerze, użyj parametru ItemsProvider .

ItemsProvider można również użyć w aplikacji po stronie Blazor serwera, jeśli aplikacja jest wymagana do wykonywania zapytań dotyczących zewnętrznego punktu końcowego lub w innych przypadkach, w których wymagania nie są objęte programem IQueryable.

Podaj wywołanie zwrotne zgodne z typem delegata GridItemsProvider<TGridItem> , gdzie TGridItem jest typem danych wyświetlanych w siatce. Wywołanie zwrotne otrzymuje parametr typu GridItemsProviderRequest<TGridItem>, który określa indeks początkowy, maksymalną liczbę wierszy i kolejność sortowania danych do zwrócenia. Oprócz zwracania pasujących elementów całkowita liczba elementów (totalItemCount) jest również wymagana do poprawnego działania stronicowania i wirtualizacji.

Poniższy przykład pobiera dane z publicznej bazy danych OpenFDA Food Enforcement.

Element GridItemsProvider<TGridItem> konwertuje GridItemsProviderRequest<TGridItem> element na zapytanie względem bazy danych OpenFDA. Parametry zapytania są tłumaczone na określony format adresu URL obsługiwany przez zewnętrzny interfejs API JSON. Sortowanie i filtrowanie można wykonywać tylko za pomocą sortowania i filtrowania obsługiwanego przez zewnętrzny interfejs API. Punkt końcowy OpenFDA nie obsługuje sortowania, więc żadna z kolumn nie jest oznaczona jako sortowalna. Jednak obsługuje pomijanie rekordów (skip parametru) i ograniczanie zwracania rekordów (limit parametru), więc składnik może włączyć wirtualizację i szybko przewijać dziesiątki tysięcy rekordów.

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

Aby uzyskać więcej informacji na temat wywoływania internetowych interfejsów API, zobacz Blazor ASP.NET Core.

`QuickGrid` rusztowanie

Szkielet QuickGrid szkieletu Razor z elementami umożliwiającymi QuickGrid wyświetlanie danych z bazy danych.

Szkielet generuje podstawowe strony tworzenia, odczytu, aktualizacji i usuwania (CRUD) na podstawie modelu danych platformy Entity Framework Core. Można szkieletować poszczególne strony lub wszystkie strony CRUD. W razie potrzeby należy wybrać klasę modelu i DbContextwartość , opcjonalnie tworząc nową DbContext .

Składniki szkieletowe Razor są dodawane do projektu w wygenerowanym folderze o nazwie po klasie modelu. Wygenerowany Index składnik używa QuickGrid składnika do wyświetlania danych. Dostosuj wygenerowane składniki zgodnie z potrzebami i włącz interakcyjność, aby korzystać z interaktywnych funkcji, takich jak stronicowanie, sortowanie i filtrowanie .

Składniki tworzone przez szkielet wymagają renderowania po stronie serwera (SSR), więc nie są obsługiwane podczas uruchamiania w zestawie WebAssembly.

Kliknij prawym przyciskiem myszy Components/Pages folder i wybierz polecenie Dodaj>nowy element szkieletowy.

Po otwarciu okna dialogowego Dodawanie nowego elementu szkieletu w celu wybierz pozycję > Składniki przy użyciu programu Entity Framework (CRUD). Kliknij przycisk Dodaj.

CRUD to skrót od tworzenia, odczytu, aktualizacji i usuwania. Szkielet tworzy składniki tworzenia, edytowania, usuwania, szczegółów i indeksowania aplikacji.

Ukończ okno dialogowe Dodawanie Razor składników przy użyciu programu Entity Framework (CRUD):

Lista rozwijana Szablon zawiera inne szablony służące do tworzenia, edytowania, usuwania, szczegółów i składników listy. Ta lista rozwijana jest przydatna, gdy trzeba utworzyć tylko określony typ szkieletu składnika do klasy modelu. Pozostaw listę rozwijaną Szablon ustawioną na CRUD, aby utworzyć szkielet pełnego zestawu składników.
Z listy rozwijanej Klasa modelu wybierz klasę modelu. Folder jest tworzony dla wygenerowanych składników z nazwy modelu (jeśli klasa modelu nosi nazwę Movie, folder jest automatycznie nazwany ).MoviePages
W przypadku klasy DbContext , zastosuj jedno z następujących podejść:
- Wybierz istniejącą klasę DbContext, która ma rejestrację dostawcy fabryki (AddDbContextFactory).
- Wybierz przycisk + (znak plus) i użyj modalnego okna dialogowego Dodaj kontekst danych, aby podać nową nazwę klasy DbContext, która rejestruje klasę przez dostawcę fabryki zamiast bezpośredniego używania typu kontekstu jako zarejestrowanie usługi.
Po zamknięciu okna dialogowego modelu lista rozwijana Dostawca bazy danych jest domyślnie ustawiona na program SQL Server. Możesz wybrać odpowiedniego dostawcę dla używanej bazy danych. Dostępne opcje to SQL Server, SQLite, PostgreSQL i Azure Cosmos DB.
Wybierz Dodaj.

Wklej wszystkie poniższe polecenia w wierszu polecenia (>) w menuNowy terminal) otwarty w katalogu głównym projektu. Po wklejeniu wielu poleceń zostanie wyświetlone ostrzeżenie informujące o wykonaniu wielu poleceń. Odrzuć ostrzeżenie i kontynuuj operację wklejania.

Podczas wklejania wielu poleceń wszystkie polecenia są wykonywane z wyjątkiem ostatniego. Ostatnie polecenie nie jest wykonywane, dopóki nie naciśniesz Enter na klawiaturze.

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

Ważne

Po wykonaniu pierwszych ośmiu poleceń upewnij się, że naciśnij Enter na klawiaturze, aby wykonać ostatnie polecenie.

Powyższe polecenia dodają:

Narzędzia interfejsu wiersza polecenia (CLI) dla programu EF Core
aspnet-codegenerator narzędzie do tworzenia szkieletów
Narzędzia czasu projektowania dla programu EF Core
Dostawcy SQLite i SQL Server z EF Core pakietem jako zależność
Microsoft.VisualStudio.Web.CodeGeneration.Design do tworzenia szkieletów

W terminalu wykonaj następujące polecenie, aby utworzyć szkielet pełnego zestawu składników przy użyciu szablonuCRUD:

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

Uwaga

Poprzednie polecenie to polecenie interfejsu wiersza polecenia platformy .NET, a polecenia interfejsu wiersza polecenia platformy .NET są wykonywane po wprowadzeniu w wierszu polecenia programu PowerShell, który jest domyślną powłoką poleceń terminalu programu VS Code.

W poniższej tabeli opisano opcje generatora kodu ASP.NET Core w poprzednim poleceniu.

Opcja	Symbol zastępczy	opis
`-dbProvider`	`{PROVIDER}`	Dostawca bazy danych do użycia. Opcje obejmują `sqlserver` (ustawienie domyślne), `sqlite`, `cosmos`, `postgres`.
`-dc`	`{DB CONTEXT CLASS}`	Klasa DbContext do użycia, w tym przestrzeń nazw. Aby upewnić się, że klasa DbContext jest zarejestrowana w usługach aplikacji u dostawcy fabryki (AddDbContextFactory), użyj istniejącej klasy DbContext, którą wiesz, że ma rejestrację dostawcy fabryki lub podaj nową klasę DbContext.
`-m`	`{MODEL}`	Nazwa klasy modelu.
`-outDir`	`{PATH}`	Katalog wyjściowy wygenerowanych składników. Folder jest tworzony na podstawie nazwy modelu w katalogu wyjściowym do przechowywania składników (jeśli klasa modelu nosi nazwę , folder jest automatycznie nazwany `MovieMoviePages`). Ścieżka zazwyczaj dotyczy `Components/Pages` aplikacji Blazor Web App autonomicznej `Pages` lub Blazor WebAssembly .

Aby uzyskać dodatkowe Blazor opcje dostawcy, użyj opcji pomocy interfejsu wiersza polecenia platformy .NET (-h|--help):

dotnet aspnet-codegenerator blazor -h

Wklej wszystkie następujące polecenia w wierszu polecenia (>) powłoki poleceń otwartej do katalogu głównego projektu. Po wklejeniu wielu poleceń zostanie wyświetlone ostrzeżenie informujące o wykonaniu wielu poleceń. Odrzuć ostrzeżenie i kontynuuj operację wklejania.

Podczas wklejania wielu poleceń wszystkie polecenia są wykonywane z wyjątkiem ostatniego. Ostatnie polecenie nie jest wykonywane, dopóki nie naciśniesz Enter na klawiaturze.

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

Ważne

Po wykonaniu pierwszych ośmiu poleceń upewnij się, że naciśnij Enter na klawiaturze, aby wykonać ostatnie polecenie.

Powyższe polecenia dodają:

Narzędzia interfejsu wiersza polecenia (CLI) dla programu EF Core
aspnet-codegenerator narzędzie do tworzenia szkieletów
Narzędzia czasu projektowania dla programu EF Core
Dostawcy SQLite i SQL Server z EF Core pakietem jako zależność
Microsoft.VisualStudio.Web.CodeGeneration.Design do tworzenia szkieletów.

W powłoce poleceń wykonaj następujące polecenie, aby utworzyć szkielet pełnego zestawu składników przy użyciu szablonu CRUD :

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

W poniższej tabeli opisano opcje generatora kodu ASP.NET Core w poprzednim poleceniu.

Opcja	Symbol zastępczy	opis
`-dbProvider`	`{PROVIDER}`	Dostawca bazy danych do użycia. Opcje obejmują `sqlserver` (ustawienie domyślne), `sqlite`, `cosmos`, `postgres`.
`-dc`	`{DB CONTEXT CLASS}`	Klasa DbContext do użycia, w tym przestrzeń nazw. Aby upewnić się, że klasa DbContext jest zarejestrowana w usługach aplikacji u dostawcy fabryki (AddDbContextFactory), użyj istniejącej klasy DbContext, którą wiesz, że ma rejestrację dostawcy fabryki lub podaj nową klasę DbContext.
`-m`	`{MODEL}`	Nazwa klasy modelu.
`-outDir`	`{PATH}`	Katalog wyjściowy wygenerowanych składników. Folder jest tworzony na podstawie nazwy modelu w katalogu wyjściowym do przechowywania składników (jeśli klasa modelu nosi nazwę , folder jest automatycznie nazwany `MovieMoviePages`). Ścieżka zazwyczaj dotyczy `Components/Pages` aplikacji Blazor Web App autonomicznej `Pages` lub Blazor WebAssembly .

Aby uzyskać dodatkowe Blazor opcje dostawcy, użyj opcji pomocy interfejsu wiersza polecenia platformy .NET (-h|--help):

dotnet aspnet-codegenerator blazor -h

Aby zapoznać się z przykładowym użyciem szkieletuQuickGrid, zobacz Tworzenie Blazor aplikacji bazy danych filmów (omówienie).

Udostępnij za pośrednictwem

składnik ASP.NET Core Blazor`QuickGrid`

Pakiet

Przykładowa aplikacja

`QuickGrid` implementacja

Sortuj według kolumny

Elementy strony ze składnikiem `Paginator`

Zastosuj style wierszy

Atrybuty niestandardowe i style

Sformatuj wiersz tabeli na podstawie elementu wiersza

Źródło danych programu Entity Framework Core (EF Core)

Obsługa nazw wyświetlanych

Dane zdalne

`QuickGrid` rusztowanie

Dodatkowe zasoby

Udostępnij za pośrednictwem

składnik ASP.NET Core BlazorQuickGrid

Pakiet

Przykładowa aplikacja

QuickGrid implementacja

Sortuj według kolumny

Elementy strony ze składnikiem Paginator

Zastosuj style wierszy

Atrybuty niestandardowe i style

Sformatuj wiersz tabeli na podstawie elementu wiersza

Źródło danych programu Entity Framework Core (EF Core)

Obsługa nazw wyświetlanych

Dane zdalne

QuickGrid rusztowanie

Dodatkowe zasoby

składnik ASP.NET Core Blazor`QuickGrid`

`QuickGrid` implementacja

Elementy strony ze składnikiem `Paginator`

`QuickGrid` rusztowanie