Componente ASP.NET Core BlazorQuickGrid

O componente QuickGrid é um componente Razor para exibir dados de forma rápida e eficiente em forma de tabela. QuickGrid fornece um componente de grade de dados simples e conveniente para cenários comuns de renderização de grade e serve como uma arquitetura de referência e linha de base de desempenho para a criação de componentes de grade de dados. QuickGrid é altamente otimizado e usa técnicas avançadas para alcançar um desempenho de renderização ideal.

Embalagem

Adicione uma referência de pacote para o pacote Microsoft.AspNetCore.Components.QuickGrid.

Observação

Para obter orientação sobre como adicionar pacotes a aplicativos .NET, consulte os artigos em Instalar e gerenciar pacotes em Fluxo de trabalho de consumo de pacotes (documentação do NuGet). Confirme as versões corretas do pacote em NuGet.org.

Aplicativo de exemplo

Para várias demonstrações QuickGrid, consulte o QuickGrid para a aplicação de exemplo Blazor. O site de demonstração está hospedado nas páginas do GitHub. O site carrega rapidamente graças à pré-renderização estática usando o projeto BlazorWasmPrerendering.Build GitHub mantido pela comunidade.

QuickGrid implementação

Para implementar um componente QuickGrid:

• Especifique etiquetas para o componente QuickGrid na marcação Razor (<QuickGrid>...</QuickGrid>).
• Indique uma fonte de dados consultável para a grelha. Use ou de uma das seguintes fontes de dados:
  • Items: Um IQueryable<TGridItem>anulável , onde TGridItem é o tipo de dados representado por cada linha na grade.
  • ItemsProvider: Um retorno de chamada que fornece dados para a grelha.
• Class: Um nome de classe CSS opcional. Se fornecido, o nome da classe é incluído no atributo class da tabela renderizada.
• Theme: Um nome de tema (valor padrão: default). Isso afeta quais regras de estilo correspondem à tabela.
• Virtualize: Se verdadeiro, a grelha é renderizada com virtualização. Isso normalmente é usado em conjunto com a rolagem e faz com que a grelha busque e renderize apenas os dados ao redor da janela de visualização de rolagem atual. Isso pode melhorar muito o desempenho ao rolar por grandes conjuntos de dados. Se você usar Virtualize, você deve fornecer um valor para ItemSize e deve garantir que cada linha seja renderizada com uma altura constante. Geralmente, é preferível não usar Virtualize se a quantidade de dados renderizados for pequena ou se você estiver usando paginação.
• ItemSize: Aplicável apenas quando se utiliza Virtualize. ItemSize define uma altura esperada em pixels para cada linha, permitindo que o mecanismo de virtualização busque o número correto de itens para corresponder ao tamanho da tela e garantir uma rolagem precisa.
• ItemKey: Opcionalmente, define um valor para @key em cada linha renderizada. Normalmente, isso é usado para especificar um identificador exclusivo, como um valor de chave primária, para cada item de dados. Isso permite que a grade preserve a associação entre elementos de linha e itens de dados com base em seus identificadores exclusivos, mesmo quando as instâncias TGridItem são substituídas por novas cópias (por exemplo, após uma nova consulta no armazenamento de dados subjacente). Se não estiver definido, a instância @key é a TGridItem.
• OverscanCount: Define quantos itens adicionais renderizar antes e depois da região visível para reduzir a frequência de renderização durante a rolagem. Embora valores mais altos possam melhorar a suavidade da rolagem ao renderizar mais itens fora da tela, um valor mais alto também pode resultar em um aumento nos tempos de carregamento iniciais. Recomenda-se encontrar um equilíbrio com base no tamanho do conjunto de dados e nos requisitos de experiência do usuário. O valor padrão é 3. Disponível apenas quando se utiliza Virtualize.
• Pagination: Opcionalmente, vincula essa instância TGridItem a um modelo PaginationState, fazendo com que a grade busque e renderize apenas a página atual de dados. Isso normalmente é usado em conjunto com um componente Paginator ou alguma outra lógica de interface do usuário que exibe e atualiza a instância de PaginationState fornecida.
• No QuickGrid conteúdo filho (RenderFragment), especifique PropertyColumn<TGridItem,TProp>s, que representam TGridItem colunas cujas células exibem valores:
  • Property: Define o valor a ser exibido nas células desta coluna.
  • Format: Opcionalmente, especifica uma cadeia de caracteres de formato para o valor. Para usar Format, é necessário que o tipo TProp implemente IFormattable.
  • Sortable: Indica se os dados devem ser classificáveis por esta coluna. O valor padrão pode variar de acordo com o tipo de coluna. Por exemplo, um TemplateColumn<TGridItem> é ordenado quando qualquer parâmetro SortBy é especificado.
  • InitialSortDirection: Indica a direção de ordenação se IsDefaultSortColumn estiver true.
  • IsDefaultSortColumn: Indica se esta coluna deve ser classificada por padrão.
  • PlaceholderTemplate: Se especificado, as grades virtualizadas usam esse modelo para renderizar células cujos dados não foram carregados.
  • HeaderTemplate: Um modelo opcional para a célula de cabeçalho desta coluna. Se não for especificado, o modelo de cabeçalho padrão incluirá o Title, juntamente com quaisquer indicadores de classificação e botões de opções aplicáveis.
  • Title: Texto do título da coluna. O título é renderizado automaticamente se HeaderTemplate não for usado.

Por exemplo, adicione o seguinte componente para renderizar uma grade.

Para Blazor Web Apps, o componente QuickGrid deve adotar um modo de renderização interativo para habilitar recursos interativos, como paginação e classificação.

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

Acesse o componente num navegador no caminho relativo /promotion-grid.

Atualmente, não há planos para expandir o QuickGrid com funcionalidades que as grelhas comerciais completas tendem a oferecer, como por exemplo, linhas hierárquicas, colunas que podem ser arrastadas para reordenar ou seleções de intervalo tipo Excel. Se você precisar de recursos avançados que não deseja desenvolver por conta própria, continue usando grades de terceiros.

Ordenar por coluna

O componente QuickGrid pode classificar itens por colunas. No Blazor Web Apps, a classificação requer que o componente adote um modo de renderização interativo .

Adicione Sortable="true" (Sortable) à tag PropertyColumn<TGridItem,TProp>:

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

No aplicativo em execução, classifique a coluna QuickGrid selecionando o título da coluna renderizada.

Itens de página com um componente Paginator

O componente QuickGrid pode paginar dados da fonte de dados. Em Blazor Web Apps, a paginação requer que o componente adote um modo de renderização interativo .

Adicione uma instância PaginationState ao bloco @code do componente. Defina o ItemsPerPage para o número de itens a serem exibidos por página. No exemplo a seguir, a instância é nomeada paginatione dez itens por página são definidos:

PaginationState pagination = new PaginationState { ItemsPerPage = 10 };

Defina a propriedade Pagination do componente QuickGrid como pagination:

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

Para fornecer uma interface do usuário para paginação, adicione um componente Paginator acima ou abaixo do componente QuickGrid. Defina o Paginator.State para pagination:

<Paginator State="pagination" />

No aplicativo em execução, percorra os itens usando um componente Paginator renderizado.

O QuickGrid renderiza linhas vazias adicionais para preencher a página final de dados quando usado com um componente Paginator. No .NET 9 ou posterior, células de dados vazias (<td></td>) são adicionadas às linhas vazias. As linhas vazias destinam-se a facilitar a renderização do QuickGrid com altura e estilo de linha estáveis em todas as páginas.

Aplicar estilos de linha

Aplique estilos a linhas usando o isolamento CSS , que pode incluir a possibilidade de estilar linhas vazias para componentes QuickGrid que dados de página com um componente Paginator.

Envolva o componente QuickGrid em um elemento de bloco de invólucro, por exemplo, um <div>:

+ <div>
    <QuickGrid ...>
        ...
    </QuickGrid>
+ </div>

Aplique um estilo de linha com o pseudo-elemento ::deep. No exemplo a seguir, a altura da linha é definida como 2em, inclusive para linhas de dados vazias.

{COMPONENT}.razor.css:

::deep tr {
    height: 2em;
}

Como alternativa, use a seguinte abordagem de estilo CSS:

• Exibir células de linha preenchidas com dados.
• Não exiba células de linha vazias, evitando assim que as bordas dessas células sejam renderizadas pelo estilo do Bootstrap.

{COMPONENT}.razor.css:

::deep tr:has(> td:not(:empty)) > td {
    display: table-cell;
}

::deep td:empty {
    display: none;
}

Para obter mais informações sobre como usar ::deeppseudoelementos com isolamento CSS, consulte ASP.NET Core Blazor CSS isolation.

Atributos e estilos personalizados

O QuickGrid também oferece suporte à passagem de atributos personalizados e classes de estilo (Class) para o elemento da tabela renderizada:

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

Fonte de dados do Entity Framework Core (EF Core)

Use o padrão de fábrica para resolver um contexto de banco de dados EF Core que fornece dados para um componente QuickGrid. Para obter mais informações sobre por que o padrão de fábrica é recomendado, consulte ASP.NET Core Blazor com o Entity Framework Core (EF Core).

Uma fábrica de contexto de banco de dados (IDbContextFactory<TContext>) é injetada no componente com a diretiva @inject. A abordagem de fábrica requer o descarte do contexto do banco de dados, de modo que o componente implementa a interface IAsyncDisposable com a diretiva @implements. O provedor de item para o componente QuickGrid é um DbSet<T> obtido a partir do contexto de banco de dados criado (CreateDbContext) da fábrica de contexto de banco de dados injetado.

O QuickGrid reconhece instâncias de IQueryable fornecidas pelo EF e sabe como resolver consultas de forma assíncrona para obter eficiência.

Adicione uma referência de pacote para o pacote NuGet Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter.

Observação

Para obter instruções sobre como adicionar pacotes a aplicações .NET, consulte os artigos em Instalar e gerir pacotes em Fluxo de trabalho de consumo de pacotes (documentação do NuGet). Confirme as versões corretas do pacote em NuGet.org.

Chame AddQuickGridEntityFrameworkAdapter na coleção de serviços no ficheiro Program para registar uma implementação compatível com EF de IAsyncQueryExecutor.

builder.Services.AddQuickGridEntityFrameworkAdapter();

O exemplo a seguir usa um ExampleTableDbSet<TEntity> (tabela) de um contexto de banco de dados AppDbContext (context) como a fonte de dados para um componente QuickGrid:

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

No bloco de código (@code) do exemplo anterior:

• O campo context contém o contexto do banco de dados, digitado como um AppDbContext.
• O método de ciclo de vida OnInitialized atribui um novo contexto de banco de dados (CreateDbContext) ao campo context da fábrica injetada (DbFactory).
• O método DisposeAsync assíncrono descarta o contexto do banco de dados quando o componente é descartado.

Você também pode usar qualquer operador LINQ suportado pelo EF para filtrar os dados antes de passá-los para o parâmetro Items.

O exemplo a seguir filtra filmes por um título de filme inserido em uma caixa de pesquisa. O contexto do banco de dados é BlazorWebAppMoviesContexte o modelo é Movie. A propriedade Title do filme é utilizada na operação de filtragem.

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

Para obter um exemplo prático, consulte os seguintes recursos:

• Tutorial: Criar um Aplicativo de Banco de Dados de Filmes Blazor
• Blazor aplicativo de exemplo de banco de dados de filmes: Selecione a pasta da versão mais recente no repositório. A pasta de exemplo para o projeto do tutorial é chamada BlazorWebAppMovies.

Suporte a nomes de exibição

Um título de coluna pode ser atribuído usando ColumnBase<TGridItem>.Title na tag do PropertyColumn<TGridItem,TProp>. No exemplo de filme a seguir, a coluna recebe o nome "Release Date" para os dados de data de lançamento do filme.

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

No entanto, gerir títulos de coluna (nomes) a partir de propriedades de modelo associado geralmente é uma escolha melhor para a manutenção de uma aplicação. Um modelo pode controlar o nome de exibição de uma propriedade com o atributo [Display]. No exemplo a seguir, o modelo especifica um nome de exibição de data de lançamento do filme de "Release Date" para sua propriedade ReleaseDate:

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

Para permitir que o componente QuickGrid utilize o DisplayAttribute.Name, subclasse PropertyColumn<TGridItem,TProp> dentro do componente ou numa classe separada.

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

Utilize a subclasse no componente QuickGrid. No exemplo a seguir, o DisplayNameColumn anterior é usado. O nome "Release Date" é fornecido pelo atributo [Display] no modelo, portanto, não há necessidade de especificar uma Title:

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

O atributo [DisplayName] também é suportado:

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

No entanto, o atributo [Display] é recomendado porque disponibiliza propriedades adicionais. Por exemplo, o atributo [Display] oferece a capacidade de atribuir um tipo de recurso para localização.

Dados remotos

Em aplicativos Blazor WebAssembly, buscar dados de uma API da Web baseada em JSON em um servidor é um requisito comum. Para buscar apenas os dados necessários para a página/viewport de dados atual e aplicar regras de classificação ou filtragem no servidor, use o parâmetro ItemsProvider.

ItemsProvider também pode ser usado numa aplicação Blazor no lado do servidor se a aplicação precisar consultar um ponto de extremidade externo ou noutros casos em que os requisitos não são abrangidos por um IQueryable.

Forneça um callback correspondente ao tipo de delegado GridItemsProvider<TGridItem>, onde TGridItem é o tipo de dados exibidos na grelha. O retorno de chamada recebe um parâmetro do tipo GridItemsProviderRequest<TGridItem>, que especifica o índice inicial, a contagem máxima de linhas e a ordem de classificação dos dados a serem retornados. Além de retornar os itens correspondentes, uma contagem total de itens (totalItemCount) também é necessária para que a paginação e a virtualização funcionem corretamente.

O exemplo a seguir obtém dados da base de dados pública OpenFDA Food Enforcement.

O GridItemsProvider<TGridItem> converte o GridItemsProviderRequest<TGridItem> em uma consulta no banco de dados OpenFDA. Os parâmetros de consulta são convertidos para o formato de URL específico suportado pela API JSON externa. Só é possível realizar a classificação e filtragem por meio da classificação e filtragem suportadas pela API externa. O endpoint OpenFDA não suporta ordenação, portanto, nenhuma coluna está marcada como ordenável. No entanto, ele suporta ignorar registros (parâmetroskip) e limitar o retorno de registros (parâmetrolimit), para que o componente possa habilitar a virtualização e percorrer rapidamente dezenas de milhares de registros.

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

Para obter mais informações sobre como chamar APIs da Web, consulte Chamar uma API da Web de um aplicativo ASP.NET Core Blazor.

QuickGrid montador de andaimes

O QuickGrid scaffolder estrutura os componentes Razor com QuickGrid a fim de mostrar dados de uma base de dados.

A ferramenta scaffolder gera páginas básicas de Criar, Consultar, Atualizar e Remover (CRUD) com base num modelo de dados do Entity Framework Core. Você pode criar um andaime em páginas individuais ou em todas as páginas CRUD. Selecione a classe de modelo e o DbContext, criando opcionalmente um novo DbContext se necessário.

Os componentes estruturados Razor são adicionados ao projeto numa pasta gerada com o nome da classe de modelo. O componente Index gerado usa um componente QuickGrid para exibir os dados. Personalize os componentes gerados conforme necessário e habilite a interatividade para aproveitar os recursos interativos, como de paginação, de classificação e filtragem.

Os componentes produzidos pelo scaffolder requerem renderização do lado do servidor (SSR), portanto, eles não são suportados quando executados no WebAssembly.

Visual Studio

Clique com o botão direito do mouse na pasta Components/Pages e selecione Adicionar>novo item andaime.

Com a caixa de diálogo Adicionar Novo Item de Andaime aberta para Instalada>Comum>Blazor>Razorde Componentes, selecione ComponentesRazor usando o Entity Framework (CRUD). Selecione o botão Adicionar.

CRUD é um acrônimo para Create, Read, Update e Delete. O scaffolder produz componentes de criação, edição, exclusão, detalhes e índice para o aplicativo.

Complete a caixa de diálogo Adicionar componentes Razor usando o Entity Framework (CRUD):

• A lista suspensa Template inclui outros modelos para especificamente criar, editar, excluir, detalhar e listar componentes. Esta lista suspensa é útil quando se precisa apenas criar um tipo específico de componente estruturado automaticamente para uma classe de modelo. Deixe a lista suspensa Modelo definida como CRUD para montar um conjunto completo de componentes.
• Na lista suspensa classe Model, selecione a classe do modelo. Uma pasta é criada para os componentes gerados a partir do nome do modelo (se a classe de modelo for nomeada Movie, a pasta será automaticamente nomeada MoviePages).
• Para classe DbContext, selecione um contexto de banco de dados existente ou selecione o botão + (sinal de adição) e caixa de diálogo modal Add Data Context para adicionar um novo contexto de banco de dados.
• Depois de fechar a caixa de diálogo do modelo, a lista suspensa do provedor de banco de dados ,, passa a ter SQL Servercomo padrão. Você pode selecionar o provedor apropriado para o banco de dados que está usando. As opções incluem SQL Server, SQLite, PostgreSQL e Azure Cosmos DB.
• Selecione Adicionar.

Cole todos os comandos a seguir no prompt (>) do Terminal (Terminal menu >Novo Terminal) aberto no diretório raiz do projeto. Quando você cola vários comandos, aparece um aviso informando que vários comandos serão executados. Dispense o aviso e prossiga com a operação de colagem.

Quando você cola vários comandos, todos os comandos são executados, exceto o último. O último comando não é executado até que você pressione Enter no teclado.

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

Importante

Depois que os primeiros oito comandos forem executados, certifique-se de pressionar Enter no teclado para executar o último comando.

Os comandos anteriores adicionam:

• Ferramentas de interface de linha de comando (CLI) para EF Core
• aspnet-codegenerator ferramenta de andaimes
• Ferramentas de tempo de design para EF Core
• Os fornecedores SQLite e SQL Server que têm o pacote EF Core como dependência
• Microsoft.VisualStudio.Web.CodeGeneration.Design para andaimes

No Terminal, execute o seguinte comando para montar um conjunto completo de componentes com o modelo CRUD:

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

Observação

O comando anterior é um comando da CLI do .NET, e os comandos da CLI do .NET são executados quando inseridos num prompt do PowerShell , que é o shell de comando padrão do Terminaldo VS Code .

A tabela a seguir explica as opções do gerador de código ASP.NET Core no comando anterior.

Opção	Espaço reservado	Descrição
-dbProvider	{PROVIDER}	Provedor de banco de dados a ser usado. As opções incluem sqlserver (padrão), sqlite, cosmos, postgres.
-dc	{DB CONTEXT CLASS}	A classe DbContext a ser usada, incluindo o namespace.
-m	{MODEL}	O nome da classe de modelo.
-outDir	{PATH}	O diretório de saída para os componentes gerados. Uma pasta é criada a partir do nome do modelo no diretório de saída para armazenar os componentes (se a classe de modelo for nomeada Movie, a pasta será automaticamente nomeada MoviePages). Normalmente, o caminho é Components/Pages para um Blazor Web App ou Pages para uma aplicação Blazor WebAssembly autónoma.

Para as opções adicionais do provedor de Blazor, use a opção de ajuda da CLI do .NET (-h|--help):

dotnet aspnet-codegenerator blazor -h

Cole todos os comandos a seguir no prompt (>) de um shell de comando aberto no diretório raiz do projeto. Quando você cola vários comandos, aparece um aviso informando que vários comandos serão executados. Dispense o aviso e prossiga com a operação de colagem.

Quando você cola vários comandos, todos os comandos são executados, exceto o último. O último comando não é executado até que você pressione Enter no teclado.

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

Importante

Depois que os primeiros oito comandos forem executados, certifique-se de pressionar Enter no teclado para executar o último comando.

Os comandos anteriores adicionam:

• Ferramentas de interface de linha de comando (CLI) para EF Core
• aspnet-codegenerator ferramenta de andaimes
• Ferramentas de tempo de design para EF Core
• Os provedores SQLite e SQL Server com o pacote EF Core como dependência
• Microsoft.VisualStudio.Web.CodeGeneration.Design para andaimes.

Em um shell de comando, execute o seguinte comando para criar um conjunto completo de componentes com o modelo CRUD:

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

A tabela a seguir explica as opções do gerador de código ASP.NET Core no comando anterior.

Opção	Espaço reservado	Descrição
-dbProvider	{PROVIDER}	Provedor de banco de dados a ser usado. As opções incluem sqlserver (padrão), sqlite, cosmos, postgres.
-dc	{DB CONTEXT CLASS}	A classe DbContext a usar, incluindo o namespace.
-m	{MODEL}	O nome da classe de modelo.
-outDir	{PATH}	O diretório de saída para os componentes gerados. Uma pasta é criada a partir do nome do modelo no diretório de saída para armazenar os componentes (se a classe de modelo for nomeada Movie, a pasta será automaticamente nomeada MoviePages). Normalmente, o caminho é Components/Pages para um Blazor Web App ou Pages para um aplicativo Blazor WebAssembly autónomo.

Para opções adicionais do fornecedor Blazor, use a opção de ajuda da CLI do .NET (-h|--help):

dotnet aspnet-codegenerator blazor -h

Para obter um exemplo de uso do gerador de estrutura QuickGrid, consulte Criar uma aplicação de base de dados de filmes Blazor (Visão Geral).