Condividi tramite

componente ASP.NET Core BlazorQuickGrid

  • Articolo

Nota

Questa non è la versione più recente di questo articolo. Per la versione corrente, vedere la versione .NET 9 di questo articolo.

Importante

Queste informazioni si riferiscono a un prodotto non definitive che può essere modificato in modo sostanziale prima che venga rilasciato commercialmente. Microsoft non riconosce alcuna garanzia, espressa o implicita, in merito alle informazioni qui fornite.

Per la versione corrente, vedere la versione .NET 9 di questo articolo.

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.

Nota

Per indicazioni sull'aggiunta di pacchetti alle app .NET, vedere gli articoli sotto Installare e gestire pacchetti in Flusso di lavoro dell'utilizzo di pacchetti (documentazione di NuGet). Confermare le versioni corrette del pacchetto all'indirizzo NuGet.org.

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:

  • Specificare i tag per il QuickGrid componente nel Razor markup (<QuickGrid>...</QuickGrid>).
  • Assegnare un nome a un'origine di dati querybile per la griglia. Usare una delle origini dati seguenti:
    • Items: valore nullable IQueryable<TGridItem>, dove TGridItem è il tipo di dati rappresentato da ogni riga nella griglia.
    • ItemsProvider: callback che fornisce dati per la griglia.
  • Class: nome facoltativo della classe CSS. Se specificato, il nome della classe viene incluso nell'attributo class della tabella sottoposta a rendering.
  • Theme: nome del tema (valore predefinito: default). Ciò influisce sulle regole di stile che corrispondono alla tabella.
  • Virtualize: se true, viene eseguito il rendering della griglia con la virtualizzazione. In genere viene usato insieme allo scorrimento e fa sì che la griglia recuperi e esegua il rendering solo dei dati intorno al viewport di scorrimento corrente. Ciò può migliorare notevolmente le prestazioni durante lo scorrimento tra set di dati di grandi dimensioni. Se si usa Virtualize, è necessario specificare un valore per ItemSize e assicurarsi che ogni riga esegua il rendering con un'altezza costante. In genere, è preferibile non usare Virtualize se la quantità di dati di cui è stato eseguito il rendering è ridotta o se si usa la paginazione.
  • ItemSize: applicabile solo quando si usa Virtualize. ItemSize definisce un'altezza prevista in pixel per ogni riga, consentendo al meccanismo di virtualizzazione di recuperare il numero corretto di elementi in modo che corrispondano alle dimensioni di visualizzazione e per garantire uno scorrimento accurato.
  • ItemKey: definisce facoltativamente un valore per in @key ogni riga sottoposta a rendering. In genere, viene usato per specificare un identificatore univoco, ad esempio un valore di chiave primaria, per ogni elemento di dati. Ciò consente alla griglia di mantenere l'associazione tra elementi di riga ed elementi di dati in base ai relativi identificatori univoci, anche quando le TGridItem istanze vengono sostituite da nuove copie, ad esempio dopo una nuova query sull'archivio dati sottostante. Se non è impostato, è @key l'istanza TGridItem di .
  • OverscanCount: definisce il numero di elementi aggiuntivi di cui eseguire il rendering prima e dopo l'area visibile per ridurre la frequenza di rendering durante lo scorrimento. Anche se valori più elevati possono migliorare la fluidità dello scorrimento eseguendo il rendering di più elementi sullo schermo, un valore più alto può anche comportare un aumento dei tempi di caricamento iniziali. È consigliabile trovare un equilibrio in base alle dimensioni del set di dati e ai requisiti dell'esperienza utente. Il valore predefinito è 3. Disponibile solo quando si usa Virtualize.
  • Pagination: collega facoltativamente questa TGridItem istanza a un PaginationState modello, causando il recupero della griglia e il rendering solo della pagina corrente di dati. Viene in genere usato insieme a un Paginator componente o a un'altra logica dell'interfaccia utente che visualizza e aggiorna l'istanza fornita PaginationState .
  • QuickGrid Nel contenuto figlio (RenderFragment) specificare PropertyColumn<TGridItem,TProp>s, che rappresentano le colonne le cui celle visualizzano TGridItem i valori:
    • Property: definisce il valore da visualizzare nelle celle di questa colonna.
    • Format: specifica facoltativamente una stringa di formato per il valore. Per usare Format è necessario che il TProp tipo implementi IFormattable.
    • Sortable: indica se i dati devono essere ordinabili in base a questa colonna. Il valore predefinito può variare in base al tipo di colonna. Ad esempio, un TemplateColumn<TGridItem> oggetto viene ordinato se viene specificato un SortBy parametro.
    • InitialSortDirection: indica la direzione di ordinamento se IsDefaultSortColumn è true.
    • IsDefaultSortColumn: indica se questa colonna deve essere ordinata per impostazione predefinita.
    • PlaceholderTemplate: se specificato, le griglie virtualizzate usano questo modello per eseguire il rendering delle celle i cui dati non sono stati caricati.
    • HeaderTemplate: modello facoltativo per la cella di intestazione di questa colonna. Se non specificato, il modello di intestazione predefinito include i Titlepulsanti , insieme a eventuali indicatori di ordinamento e opzioni applicabili.
    • Title: testo del titolo per la colonna. Il rendering del titolo viene eseguito automaticamente se HeaderTemplate non viene usato.
  • Specificare i tag per il QuickGrid componente nel Razor markup (<QuickGrid>...</QuickGrid>).
  • Assegnare un nome a un'origine di dati querybile per la griglia. Usare una delle origini dati seguenti:
    • Items: valore nullable IQueryable<TGridItem>, dove TGridItem è il tipo di dati rappresentato da ogni riga nella griglia.
    • ItemsProvider: callback che fornisce dati per la griglia.
  • Class: nome facoltativo della classe CSS. Se specificato, il nome della classe viene incluso nell'attributo class della tabella sottoposta a rendering.
  • Theme: nome del tema (valore predefinito: default). Ciò influisce sulle regole di stile che corrispondono alla tabella.
  • Virtualize: se true, viene eseguito il rendering della griglia con la virtualizzazione. In genere viene usato insieme allo scorrimento e fa sì che la griglia recuperi e esegua il rendering solo dei dati intorno al viewport di scorrimento corrente. Ciò può migliorare notevolmente le prestazioni durante lo scorrimento tra set di dati di grandi dimensioni. Se si usa Virtualize, è necessario specificare un valore per ItemSize e assicurarsi che ogni riga esegua il rendering con un'altezza costante. In genere, è preferibile non usare Virtualize se la quantità di dati di cui è stato eseguito il rendering è ridotta o se si usa la paginazione.
  • ItemSize: applicabile solo quando si usa Virtualize. ItemSize definisce un'altezza prevista in pixel per ogni riga, consentendo al meccanismo di virtualizzazione di recuperare il numero corretto di elementi in modo che corrispondano alle dimensioni di visualizzazione e per garantire uno scorrimento accurato.
  • ItemKey: definisce facoltativamente un valore per in @key ogni riga sottoposta a rendering. In genere, viene usato per specificare un identificatore univoco, ad esempio un valore di chiave primaria, per ogni elemento di dati. Ciò consente alla griglia di mantenere l'associazione tra elementi di riga ed elementi di dati in base ai relativi identificatori univoci, anche quando le TGridItem istanze vengono sostituite da nuove copie, ad esempio dopo una nuova query sull'archivio dati sottostante. Se non è impostato, è @key l'istanza TGridItem di .
  • Pagination: collega facoltativamente questa TGridItem istanza a un PaginationState modello, causando il recupero della griglia e il rendering solo della pagina corrente di dati. Viene in genere usato insieme a un Paginator componente o a un'altra logica dell'interfaccia utente che visualizza e aggiorna l'istanza fornita PaginationState .
  • QuickGrid Nel contenuto figlio (RenderFragment) specificare PropertyColumn<TGridItem,TProp>s, che rappresentano le colonne le cui celle visualizzano TGridItem i valori:
    • Property: definisce il valore da visualizzare nelle celle di questa colonna.
    • Format: specifica facoltativamente una stringa di formato per il valore. Per usare Format è necessario che il TProp tipo implementi IFormattable.
    • Sortable: indica se i dati devono essere ordinabili in base a questa colonna. Il valore predefinito può variare in base al tipo di colonna. Ad esempio, un TemplateColumn<TGridItem> oggetto viene ordinato se viene specificato un SortBy parametro.
    • InitialSortDirection: indica la direzione di ordinamento se IsDefaultSortColumn è true.
    • IsDefaultSortColumn: indica se questa colonna deve essere ordinata per impostazione predefinita.
    • PlaceholderTemplate: se specificato, le griglie virtualizzate usano questo modello per eseguire il rendering delle celle i cui dati non sono stati caricati.
    • HeaderTemplate: modello facoltativo per la cella di intestazione di questa colonna. Se non specificato, il modello di intestazione predefinito include i Titlepulsanti , insieme a eventuali indicatori di ordinamento e opzioni applicabili.
    • Title: testo del titolo per la colonna. Il rendering del titolo viene eseguito automaticamente se HeaderTemplate non viene usato.

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.

Nota

Per indicazioni sull'aggiunta di pacchetti alle app .NET, vedere gli articoli sotto Installare e gestire pacchetti in Flusso di lavoro dell'utilizzo di pacchetti (documentazione di NuGet). Confermare le versioni corrette del pacchetto all'indirizzo NuGet.org.

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

Per un esempio funzionante, vedere le risorse seguenti:

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.

Fare clic con il pulsante destro del mouse sulla Components/Pages cartella e scegliere Aggiungi>nuovo elemento con scaffolding.

Con la finestra di dialogo Aggiungi nuovo elemento di scaffolding aperta a Componente comuneBlazorRazor>> installato>, selezionare Razor Componenti tramite Entity Framework (CRUD). Seleziona il pulsante Aggiungi.

CRUD è l'acronimo di Create, Read, Update e Delete. Lo scaffolder produce componenti di creazione, modifica, eliminazione, dettagli e indice per l'app.

Completare la finestra di dialogo Aggiungi Razor componenti usando Entity Framework (CRUD):

  • L'elenco a discesa Modello include altri modelli per la creazione, la modifica, l'eliminazione, i dettagli e i componenti elenco specifici. Questo elenco a discesa risulta utile solo quando è sufficiente creare un tipo specifico di componente sottoposto a scaffolding in una classe modello. Lasciare l'elenco a discesa Modello impostato su CRUD per eseguire lo scaffolding di un set completo di componenti.
  • Nell'elenco a discesa Classe modello selezionare la classe del modello. Viene creata una cartella per i componenti generati dal nome del modello (se la classe del modello è denominata , la cartella viene denominata MovieMoviePagesautomaticamente ).
  • Per La classe DbContext selezionare un contesto di database esistente o selezionare il + pulsante (segno più) e la finestra di dialogo Modale Aggiungi contesto dati per aggiungere un nuovo contesto di database.
  • Al termine della finestra di dialogo del modello, per impostazione predefinita l'elenco a discesa Provider di database è SQL Server. È possibile selezionare il provider appropriato per il database in uso. Le opzioni includono SQL Server, SQLite, PostgreSQL e Azure Cosmos DB.
  • Selezionare Aggiungi.

Per un esempio di uso dello QuickGrid scaffolder, vedere Creare un'app Blazor di database di film (Panoramica).