składnik ASP.NET Core BlazorQuickGrid

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 projektu GitHub obsługiwanego BlazorWasmPrerendering.Build przez społeczność.

QuickGrid Implementacji

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.
• 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 parametr jest TemplateColumn<TGridItem> domyślnie sortowalny, 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.

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

Składnik zakłada, że tryb renderowania interaktywnego serwera (InteractiveServer) jest dziedziczony z składnika nadrzędnego lub stosowany globalnie do aplikacji, co umożliwia funkcje interaktywne. W poniższym przykładzie jedyną funkcją interaktywną jest sortowanie kolumn.

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

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.

Atrybuty niestandardowe i style

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

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

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

EF CoreElement "s DbContext udostępnia DbSet<TEntity> właściwość dla każdej tabeli w bazie danych. Podaj właściwość do parametru Items .

W poniższym przykładzie użyto PeopleDbSet<TEntity> tabeli (table) jako źródła danych:

@inject ApplicationDbContext AppDbContext

<QuickGrid Items="@AppDbContext.People">
    ...
</QuickGrid>

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 dokumenty według identyfikatora kategorii:

<QuickGrid Items="@AppDbContext.Documents.Where(d => d.CategoryId == categoryId)">
    ...
</QuickGrid>

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

Zacznij od dodania odwołania Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter do pakietu NuGet.

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.

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

builder.Services.AddQuickGridEntityFrameworkAdapter();

Dane zdalne

W Blazor WebAssembly aplikacjach pobieranie danych z internetowego interfejsu API opartego JSna protokole ON 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 JSinterfejs API ON. 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 NavManager

<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 {
    GridItemsProvider<FoodRecall>? foodRecallProvider;
    int numResults;

    protected override async Task OnInitializedAsync()
    {
        foodRecallProvider = async req =>
        {
            var url = NavManager.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 Wywoływanie internetowego interfejsu API z aplikacji ASP.NET CoreBlazor.

QuickGrid rusztowanie

Szkielet QuickGrid w składnikach szkieletów Razor programu Visual Studio z elementami QuickGrid umożliwiającymi wyświetlanie danych z bazy danych.

Aby użyć szkieletu, kliknij prawym przyciskiem myszy projekt w Eksplorator rozwiązań i wybierz polecenie Dodaj>nowy element szkieletowy. Otwórz zainstalowany>wspólny>Razor składnik. Wybierz Razor pozycję Składniki przy użyciu programu Entity Framework (CRUD).

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 folderu projektu Pages w wygenerowanym folderze o nazwie po klasie modelu. Wygenerowany Index składnik używa QuickGrid metody do wyświetlania danych. Dostosuj wygenerowane składniki zgodnie z potrzebami i włącz interakcyjność, aby korzystać z interaktywnych funkcji, takich jak 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.