daohualiuxiang
/
AspNetCore.Docs
mirror of https://github.com/dotnet/AspNetCore.Docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
AspNetCore.Docs/aspnetcore/blazor/components/quickgrid.md

12 KiB
Raw Blame History

title author description monikerRange ms.author ms.custom ms.date uid
ASP.NET Core Blazor QuickGrid component guardrex The QuickGrid component is a Razor component for quickly and efficiently displaying data in tabular form. >= aspnetcore-7.0 riande mvc 02/09/2024 blazor/components/quickgrid

ASP.NET Core Blazor QuickGrid component

[!INCLUDE]

:::moniker range=">= aspnetcore-8.0"

The QuickGrid component is a Razor component for quickly and efficiently displaying data in tabular form. QuickGrid provides a simple and convenient data grid component for common grid rendering scenarios and serves as a reference architecture and performance baseline for building data grid components. QuickGrid is highly optimized and uses advanced techniques to achieve optimal rendering performance.

Package

Add a package reference for the Microsoft.AspNetCore.Components.QuickGrid package.

[!INCLUDE]

Sample app

For various QuickGrid demonstrations, see the QuickGrid for Blazor sample app. The demo site is hosted on GitHub Pages. The site loads fast thanks to static prerendering using the community-maintained BlazorWasmPrerendering.Build GitHub project.

QuickGrid implementation

To implement a QuickGrid component:

For example, add the following component to render a grid.

The component assumes that the Interactive Server render mode (InteractiveServer) is inherited from a parent component or applied globally to the app, which enables interactive features. For the following example, the only interactive feature is sortable columns.

PromotionGrid.razor:

:::code language="razor" source="~/../blazor-samples/8.0/BlazorSample_BlazorWebApp/Components/Pages/PromotionGrid.razor":::

For an example that uses an xref:System.Linq.IQueryable with Entity Framework Core as the queryable data source, see the SampleQuickGridComponent component in the ASP.NET Core Basic Test App (dotnet/aspnetcore GitHub repository).

[!INCLUDE]

To use Entity Framework (EF) Core as the data source:

QuickGrid supports passing custom attributes to the rendered table element:

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

:::moniker-end

:::moniker range="< aspnetcore-8.0"

The QuickGrid component is an experimental Razor component for quickly and efficiently displaying data in tabular form. QuickGrid provides a simple and convenient data grid component for common grid rendering scenarios and serves as a reference architecture and performance baseline for building data grid components. QuickGrid is highly optimized and uses advanced techniques to achieve optimal rendering performance.

To get started with QuickGrid:

Add a prerelease package reference for the Microsoft.AspNetCore.Components.QuickGrid package. If using the .NET CLI to add the package reference, include the --prerelease option when you execute the dotnet add package command.

[!INCLUDE]

[!NOTE] Because the Microsoft.AspNetCore.Components.QuickGrid package is an experimental package for .NET 7, the package remains in prerelease status forever for .NET 7 Blazor apps. The package reached production status for .NET 8 or later. For more information, see an 8.0 or later version of this article.

Add the following component to render a grid.

PromotionGrid.razor:

@page "/promotion-grid"
@using Microsoft.AspNetCore.Components.QuickGrid

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

:::moniker-end

Access the component in a browser at the relative path /promotion-grid.

There aren't current plans to extend QuickGrid with features that full-blown commercial grids tend to offer, for example, hierarchical rows, drag-to-reorder columns, or Excel-like range selections. If you require advanced features that you don't wish to develop on your own, continue using third-party grids.

QuickGrid scaffolder

The QuickGrid scaffolder in Visual Studio scaffolds Razor components with QuickGrid to display data from a database.

To use the scaffolder, right-click the project in Solution Explorer and select Add > New Scaffolded Item. Open Installed > Common > Razor Component. Select Razor Components using Entity Framework (CRUD).

The scaffolder generates basic Create, Read, Update, and Delete (CRUD) pages based on an Entity Framework Core data model. You can scaffold individual pages or all of the CRUD pages. You select the model class and the DbContext, optionally creating a new DbContext if needed.

The scaffolded Razor components are added to the project's Pages folder in a generated folder named after the model class. The generated Index component uses QuickGrid to display the data. Customize the generated components as needed and enable interactivity to take advantage of interactive features, such as sorting and filtering.

The components produced by the scaffolder require server-side rendering (SSR), so they aren't supported when running on WebAssembly.