компонент ASP.NET Core BlazorQuickGrid

Компонент QuickGrid — это Razor компонент для быстрого и эффективного отображения данных в табличной форме. QuickGrid предоставляет простой и удобный компонент сетки данных для распространенных сценариев отрисовки сетки и служит эталонной архитектурой и базовым показателем производительности для создания компонентов сетки данных. QuickGrid высокооптимизируется и использует расширенные методы для достижения оптимальной производительности отрисовки.

Пакет

Добавьте ссылку на пакет.Microsoft.AspNetCore.Components.QuickGrid

Примечание.

Рекомендации по добавлению пакетов в приложения .NET см. в разделе Способы установки пакетов NuGet в статье Рабочий процесс использования пакета (документация по NuGet). Проверьте правильность версий пакета на сайте NuGet.org.

Пример приложения

Сведения о различных QuickGrid демонстрациях см. в разделе QuickGrid для Blazor примера приложения. Демонстрационный сайт размещен на страницах GitHub. Сайт загружается быстро благодаря статической предварительной подготовке с помощью проекта GitHub, поддерживаемого BlazorWasmPrerendering.Build сообществом.

QuickGrid Реализации

Чтобы реализовать QuickGrid компонент, выполните следующие действия.

• Укажите теги для компонента в Razor разметке QuickGrid (<QuickGrid>...</QuickGrid>).
• Назовите запрашиваемый источник данных для сетки. Используйте любой из следующих источников данных:
  • Items: значение IQueryable<TGridItem>NULL, где TGridItem тип данных, представленных каждой строкой в сетке.
  • ItemsProvider: обратный вызов, предоставляющий данные для сетки.
• Class: необязательное имя класса CSS. При условии имя класса включается в class атрибут отрисоченной таблицы.
• Theme: имя темы (значение по умолчанию: default). Это влияет на то, какие правила стилизации соответствуют таблице.
• Virtualize: если значение true, сетка отрисовывается с помощью виртуализации. Обычно это используется в сочетании с прокруткой и приводит к тому, что сетка извлекает и отрисовывает только данные вокруг текущего окна просмотра прокрутки. Это может значительно повысить производительность при прокрутке больших наборов данных. Если используется Virtualize, необходимо указать значение ItemSize и убедиться, что каждая строка отображается с постоянной высотой. Как правило, предпочтительнее не использовать Virtualize , если объем отрисовки данных мал или используется разбиение на страницы.
• ItemSize: применимо только при использовании Virtualize. ItemSize определяет ожидаемую высоту в пикселях для каждой строки, позволяя механизму виртуализации получить правильное количество элементов для сопоставления размера дисплея и обеспечить точную прокрутку.
• ItemKey: при необходимости определяет значение для @key каждой отрисованной строки. Как правило, это используется для указания уникального идентификатора, например значения первичного ключа для каждого элемента данных. Это позволяет сетке сохранять связь между элементами строк и элементами данных на основе их уникальных идентификаторов, даже если TGridItem экземпляры заменяются новыми копиями (например, после нового запроса к базовому хранилищу данных). Если этот параметр не задан, @key это TGridItem экземпляр.
• Pagination: при необходимости связывает этот TGridItem экземпляр с PaginationState моделью, что приводит к выборке и отрисовке только текущей страницы данных. Обычно это используется в сочетании с компонентом Paginator или другой логикой пользовательского интерфейса, которая отображает и обновляет предоставленный PaginationState экземпляр.
• В дочернем содержимом QuickGrid (RenderFragment) укажите PropertyColumn<TGridItem,TProp>столбцы, ячейки которых отображают TGridItem значения:
  • Property: определяет значение, отображаемое в ячейках этого столбца.
  • Format: необязательно указывает строку формата для значения. Использование Format требует TProp , чтобы тип был реализован IFormattable.
  • Sortable: указывает, должны ли данные сортироваться по этому столбцу. Значение по умолчанию может отличаться в зависимости от типа столбца. Например, можно сортировать по умолчанию, TemplateColumn<TGridItem> если указан любой SortBy параметр.
  • InitialSortDirection: указывает направление сортировки, если IsDefaultSortColumn есть true.
  • IsDefaultSortColumn: указывает, следует ли отсортировать этот столбец по умолчанию.
  • PlaceholderTemplate: при указании виртуализированные сетки используют этот шаблон для отрисовки ячеек, данные которых не были загружены.

Например, добавьте следующий компонент для отрисовки сетки.

Компонент предполагает, что режимInteractiveServer отрисовки интерактивного сервера наследуется от родительского компонента или применяется глобально к приложению, что обеспечивает интерактивные функции. В следующем примере единственным интерактивным компонентом является сортируемые столбцы.

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

Доступ к компоненту в браузере по относительному пути /promotion-grid.

Существуют не текущие планы расширения QuickGrid с функциями, которые полнофункционально предлагают коммерческие сетки, например иерархические строки, перетаскивание к переупорядочению столбцов или выборы диапазона, например excel. Если вам нужны расширенные функции, которые вы не хотите разрабатывать самостоятельно, продолжайте использовать сторонние сетки.

Настраиваемые атрибуты и стили

QuickGrid также поддерживает передачу пользовательских атрибутов и классов стилей в отрисованный элемент таблицы:

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

Источник данных Entity Framework Core (EF Core)

EF Core's DbContext предоставляет свойство для каждой DbSet<TEntity> таблицы в базе данных. Укажите свойство параметру Items .

В следующем примере в PeopleDbSet<TEntity> качестве источника данных используется (таблица):

@inject ApplicationDbContext AppDbContext

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

Вы также можете использовать любой оператор LINQ, поддерживаемый EF, чтобы отфильтровать данные перед передачей Items в параметр.

В следующем примере документы фильтруется по идентификатору категории:

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

QuickGrid распознает экземпляры, предоставляемые IQueryable EF, и знает, как асинхронно разрешать запросы для повышения эффективности.

Начните с добавления ссылки на Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter пакет NuGet.

Примечание.

Рекомендации по добавлению пакетов в приложения .NET см. в разделе Способы установки пакетов NuGet в статье Рабочий процесс использования пакета (документация по NuGet). Проверьте правильность версий пакета на сайте NuGet.org.

Вызовите AddQuickGridEntityFrameworkAdapter коллекцию служб в Program файле, чтобы зарегистрировать реализацию с поддержкой IAsyncQueryExecutor EF:

builder.Services.AddQuickGridEntityFrameworkAdapter();

Удаленные данные

В Blazor WebAssembly приложениях получение данных из JSвеб-API на основе on на сервере является общим требованием. Чтобы получить только данные, необходимые для текущей страницы или представления данных, и применить правила сортировки или фильтрации на сервере, используйте ItemsProvider этот параметр.

ItemsProvider также можно использовать в серверном Blazor приложении, если приложению требуется запрашивать внешнюю конечную точку или в других случаях, когда требования не охватываются IQueryable.

Укажите обратный вызов, соответствующий типу GridItemsProvider<TGridItem> делегата, где TGridItem тип данных, отображаемых в сетке. Обратный вызов присваивается параметру типа GridItemsProviderRequest<TGridItem>, который задает начальный индекс, максимальное число строк и порядок сортировки возвращаемых данных. Помимо возврата соответствующих элементов, общее количество элементов (totalItemCount) также требуется для правильной работы по страницам и виртуализации.

Следующий пример получает данные из общедоступной базы данных OpenFDA Food Enforcement.

Объект GridItemsProvider<TGridItem> преобразует GridItemsProviderRequest<TGridItem> запрос в базу данных OpenFDA. Параметры запроса превратятся в определенный формат URL-адреса, поддерживаемый внешним JSAPI ON. Выполнять сортировку и фильтрацию можно только через сортировку и фильтрацию, поддерживаемую внешним API. Конечная точка OpenFDA не поддерживает сортировку, поэтому ни один из столбцов не помечен как сортируемый. Однако она поддерживает пропуск записей (параметр) и ограничение возврата записей (skiplimitпараметра), поэтому компонент может включить виртуализацию и быстро прокручивать десятки тысяч записей.

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

Дополнительные сведения о вызове веб-API см. в статье "Вызов веб-API" из приложения ASP.NET CoreBlazor.

QuickGrid шаблон

Шаблон QuickGrid в компонентах шаблонов Razor Visual Studio, с которыми QuickGrid будут отображаться данные из базы данных.

Чтобы использовать шаблон, щелкните проект правой кнопкой мыши в Обозреватель решений и выберите "Добавить>новый шаблон". Откройте установленный общий>>Razor компонент. Выберите Razor компоненты с помощью Entity Framework (CRUD).

Шаблон создает базовые страницы создания, чтения, обновления и удаления (CRUD) на основе модели данных Entity Framework Core. Вы можете сформировать отдельные страницы или все страницы CRUD. Вы выбираете класс модели и DbContextпри необходимости создаете новый DbContext объект.

Компоненты с шаблонами Razor добавляются в папку проекта Pages в созданной папке с именем класса модели. Index Созданный компонент используется QuickGrid для отображения данных. Настройте созданные компоненты по мере необходимости и включите интерактивность для использования интерактивных функций, таких как сортировка и фильтрация.

Компоненты, созданные шаблоном, требуют отрисовки на стороне сервера (SSR), поэтому они не поддерживаются при выполнении в WebAssembly.