componente ASP.NET Core BlazorQuickGrid

Il QuickGrid componente è un Razor componente per la visualizzazione rapida ed efficiente dei dati in formato tabulare. QuickGrid fornisce un componente griglia di dati semplice e pratico per scenari comuni di rendering della griglia e funge da architettura di riferimento e baseline delle prestazioni per la compilazione di componenti della griglia dati. QuickGrid è altamente ottimizzato e usa tecniche avanzate per ottenere prestazioni di rendering ottimali.

Pacchetto

Aggiungere un riferimento al Microsoft.AspNetCore.Components.QuickGrid pacchetto.

Esempio di app

Per varie QuickGrid dimostrazioni, vedi QuickGrid per Blazor l'app di esempio. Il sito demo è ospitato in GitHub Pages. Il sito viene caricato rapidamente grazie al prerendering statico usando il progetto GitHub gestito dalla BlazorWasmPrerendering.Build community.

QuickGrid implementazione

Per implementare un QuickGrid componente:

Ad esempio, aggiungere il componente seguente per eseguire il rendering di una griglia.

Per Blazor Web Apps, il QuickGrid componente deve adottare una modalità di rendering interattiva per abilitare funzionalità interattive, ad esempio il paging e l'ordinamento.

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

Accedere al componente in un browser nel percorso /promotion-gridrelativo .

Non esistono piani correnti per l'estensione QuickGrid con funzionalità che le griglie commerciali complete tendono a offrire, ad esempio, righe gerarchiche, colonne di trascinamento del riordinamento o selezioni di intervalli simili a Excel. Se sono necessarie funzionalità avanzate che non si desidera sviluppare autonomamente, continuare a usare griglie di terze parti.

Ordina per colonna

Il QuickGrid componente può ordinare gli elementi in base alle colonne. In Blazor Web Apps, l'ordinamento richiede al componente di adottare una modalità di rendering interattiva.

Aggiungere Sortable="true" (Sortable) al PropertyColumn<TGridItem,TProp> tag:

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

Nell'app in esecuzione ordinare la QuickGrid colonna selezionando il titolo della colonna sottoposta a rendering.

Elementi di pagina con un Paginator componente

Il QuickGrid componente può paginare i dati dall'origine dati. In Blazor Web Apps, il paging richiede al componente di adottare una modalità di rendering interattiva.

Aggiungere un'istanza PaginationState al blocco del @code componente. Impostare su ItemsPerPage numero di elementi da visualizzare per pagina. Nell'esempio seguente l'istanza è denominata paginatione vengono impostati dieci elementi per pagina:

PaginationState pagination = new PaginationState { ItemsPerPage = 10 };

Impostare la QuickGrid proprietà del Pagination componente su pagination:

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

Per fornire un'interfaccia utente per la paginazione, aggiungere un Paginator componente sopra o sotto il QuickGrid componente. Impostare su Paginator.State pagination:

<Paginator State="pagination" />

Nell'app in esecuzione, scorrere gli elementi usando un componente sottoposto a Paginator rendering.

Attributi e stili personalizzati

QuickGrid supporta anche il passaggio di attributi personalizzati e classi di stile (Class) all'elemento tabella di cui è stato eseguito il rendering:

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

Origine dati Entity Framework Core (EF Core)

Usare il modello factory per risolvere un EF Core contesto di database che fornisce dati a un QuickGrid componente. Per altre informazioni sul motivo per cui è consigliabile usare il modello factory, vedere ASP.NET Core con Entity Framework Core ().For more information on why the factory pattern is recommended, see ASP.NET Core Blazor with Entity Framework Core (EF Core).

Una factory del contesto del database (IDbContextFactory<TContext>) viene inserita nel componente con la @inject direttiva . L'approccio factory richiede l'eliminazione del contesto del database, quindi il componente implementa l'interfaccia IAsyncDisposable con la @implements direttiva . Il provider di elementi per il QuickGrid componente viene DbSet<T> ottenuto dal contesto di database creato (CreateDbContext) della factory del contesto di database inserita.

QuickGrid riconosce le istanze fornite da IQueryable ENTITY e sa come risolvere le query in modo asincrono per ottenere efficienza.

Aggiungere un riferimento al Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter pacchetto NuGet.

Chiamare AddQuickGridEntityFrameworkAdapter la raccolta di servizi nel Program file per registrare un'implementazione compatibile con IAsyncQueryExecutor Entity Framework:

builder.Services.AddQuickGridEntityFrameworkAdapter();

Nell'esempio seguente viene usata una ExampleTable DbSet<TEntity> (tabella) da un AppDbContext contesto di database (context) come origine dati per un QuickGrid componente:

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

Nel blocco di codice (@code) dell'esempio precedente:

• Il context campo contiene il contesto del database, digitato come .AppDbContext
• Il OnInitialized metodo del ciclo di vita assegna un nuovo contesto di database (CreateDbContext) al context campo dalla factory inserita (DbFactory).
• Il metodo asincrono DisposeAsync elimina il contesto del database quando il componente viene eliminato.

È anche possibile usare qualsiasi operatore LINQ supportato da EF per filtrare i dati prima di passarli al Items parametro .

L'esempio seguente filtra i film in base al titolo di un film immesso in una casella di ricerca. Il contesto del database è BlazorWebAppMoviesContexte il modello è Movie. La proprietà del Title filmato viene utilizzata per l'operazione di filtro.

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

Supporto dei nomi visualizzati

È possibile assegnare un titolo di colonna usando ColumnBase<TGridItem>.Title il PropertyColumn<TGridItem,TProp>tag del . Nell'esempio di film seguente, alla colonna viene assegnato il nome "Release Date" per i dati relativi alla data di rilascio del film della colonna:

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

Tuttavia, la gestione dei titoli delle colonne (nomi) dalle proprietà del modello associato è in genere una scelta migliore per la gestione di un'app. Un modello può controllare il nome visualizzato di una proprietà con l'attributo [Display]. Nell'esempio seguente, il modello specifica il nome visualizzato della data di rilascio del film "Release Date" per la relativa ReleaseDate proprietà:

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

Per consentire al QuickGrid componente di usare la DisplayAttribute.Namesottoclasse PropertyColumn<TGridItem,TProp> , nel componente o in una classe separata:

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

Usare la sottoclasse nel QuickGrid componente. Nell'esempio seguente viene usato il precedente DisplayNameColumn . Il nome "Release Date" viene fornito dall'attributo [Display] nel modello, quindi non è necessario specificare un Titleoggetto :

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

L'attributo [DisplayName] è supportato anche:

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

Tuttavia, l'attributo [Display] è consigliato perché rende disponibili proprietà aggiuntive. Ad esempio, l'attributo [Display] offre la possibilità di assegnare un tipo di risorsa per la localizzazione.

Dati remoti

Nelle Blazor WebAssembly app, il recupero di dati da un'API Web basata su JSON in un server è un requisito comune. Per recuperare solo i dati necessari per la pagina/viewport corrente dei dati e applicare regole di ordinamento o filtro nel server, usare il ItemsProvider parametro .

ItemsProvider può essere usato anche in un'app lato Blazor server se l'app è necessaria per eseguire query su un endpoint esterno o in altri casi in cui i requisiti non sono coperti da un oggetto IQueryable.

Fornire un callback corrispondente al GridItemsProvider<TGridItem> tipo delegato, dove TGridItem è il tipo di dati visualizzato nella griglia. Al callback viene assegnato un parametro di tipo GridItemsProviderRequest<TGridItem>, che specifica l'indice iniziale, il numero massimo di righe e l'ordinamento dei dati da restituire. Oltre a restituire gli elementi corrispondenti, è necessario anche un conteggio totale degli elementi (totalItemCount) per il corretto funzionamento del paging e della virtualizzazione.

Nell'esempio seguente viene ottenuto dati dal database OpenFDA Food Enforcement pubblico.

GridItemsProvider<TGridItem> Converte l'oggetto GridItemsProviderRequest<TGridItem> in una query sul database OpenFDA. I parametri di query vengono convertiti nel formato url specifico supportato dall'API JSON esterna. È possibile eseguire l'ordinamento e il filtro solo tramite l'ordinamento e il filtro supportati dall'API esterna. L'endpoint OpenFDA non supporta l'ordinamento, quindi nessuna delle colonne viene contrassegnata come ordinabile. Tuttavia, supporta l'omissione di record (skip parametro) e la limitazione della restituzione di record (limit parametro ), in modo che il componente possa abilitare la virtualizzazione e scorrere rapidamente decine di migliaia di record.

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

Per altre informazioni sulla chiamata di API Web, vedere Chiamare un'API Web da un'app ASP.NET CoreBlazor.

QuickGrid scaffolder

Lo QuickGrid scaffolder scaffolding dei Razor componenti con QuickGrid per visualizzare i dati da un database.

Lo scaffolder genera pagine crud (Create, Read, Update, Delete) di base basate su un modello di dati Entity Framework Core. È possibile eseguire lo scaffolding di singole pagine o di tutte le pagine CRUD. Selezionare la classe del modello e DbContext, facoltativamente creando un nuovo DbContext oggetto, se necessario.

I componenti scaffolding Razor vengono aggiunti al progetto in una cartella generata denominata dopo la classe del modello. Il componente generato Index usa un QuickGrid componente per visualizzare i dati. Personalizzare i componenti generati in base alle esigenze e abilitare l'interattività per sfruttare le funzionalità interattive, ad esempio il paging, l'ordinamento e il filtro.

I componenti prodotti dallo scaffolder richiedono il rendering lato server (SSR), quindi non sono supportati durante l'esecuzione in WebAssembly.

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

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

dotnet aspnet-codegenerator blazor -h

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

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

dotnet aspnet-codegenerator blazor -h