Leer en inglés

Compartir a través de

Componentes BlazorQuickGrid de ASP.NET Core

  • Artículo

Nota

Esta no es la versión más reciente de este artículo. Para la versión actual, consulte la versión de .NET 9 de este artículo.

Importante

Esta información hace referencia a un producto en versión preliminar, el cual puede sufrir importantes modificaciones antes de que se publique la versión comercial. Microsoft no proporciona ninguna garantía, expresa o implícita, con respecto a la información proporcionada aquí.

Para la versión actual, consulte la versión de .NET 9 de este artículo.

El componente QuickGrid es un componente de Razor para mostrar datos de forma rápida y eficaz en formato tabular. QuickGrid proporciona un componente de la cuadrícula de datos que resulta conveniente y simple para escenarios de representación de cuadrículas comunes y sirve de arquitectura de referencia y línea de base de rendimiento para crear componentes de cuadrícula de datos. QuickGrid está altamente optimizado y usa técnicas avanzadas para lograr un rendimiento óptimo de representación.

Paquete

Agregue una referencia de paquete para el paquete Microsoft.AspNetCore.Components.QuickGrid.

Nota

Para obtener instrucciones sobre cómo agregar paquetes a aplicaciones .NET, consulta los artículos de Instalación y administración de paquetes en Flujo de trabajo de consumo de paquetes (documentación de NuGet). Confirme las versiones correctas del paquete en NuGet.org.

Aplicación de ejemplo

Para ver varias demostraciones de QuickGrid, consulte QuickGrid para aplicación de ejemplo Blazor. El sitio de demostración se hospeda en GitHub Pages. El sitio se carga rápidamente gracias a la representación previa estática mediante el proyecto de GitHub BlazorWasmPrerendering.Build mantenido por la comunidad.

QuickGrid implementación

Para implementar un componente QuickGrid:

  • Especifique etiquetas para el componente QuickGrid en el marcado Razor (<QuickGrid>...</QuickGrid>).
  • Asigna un nombre a un origen de datos consultable para la cuadrícula. Usa cualquiera de los siguientes orígenes de datos:
    • Items: IQueryable<TGridItem> que admite un valor NULL, donde TGridItem es el tipo de datos representado por cada fila de la cuadrícula.
    • ItemsProvider: devolución de llamada que proporciona datos para la cuadrícula.
  • Class: un nombre de clase CSS opcional. Si se proporciona, el nombre de clase se incluye en el atributo class de la tabla representada.
  • Theme: un nombre de tema (valor predeterminado: default). Esto afecta a las reglas de estilo que coinciden con la tabla.
  • Virtualize: Si es verdadero, la cuadrícula se representa con virtualización. Esta acción se lleva a cabo normalmente junto con el desplazamiento y hace que la cuadrícula capture y represente solo los datos alrededor de la ventanilla de desplazamiento actual. Esto puede hacer que el rendimiento mejore considerablemente al desplazarse por grandes conjuntos de datos. Si usas Virtualize, debes proporcionar un valor para ItemSize y debes asegurarte de que cada fila se representa con un alto constante. Por lo general, es preferible no usar Virtualize si la cantidad de datos representados es pequeña o si usa paginación.
  • ItemSize: solo es aplicable cuando se usa Virtualize. ItemSize define una altura esperada en píxeles para cada fila, lo que permite que el mecanismo de virtualización obtenga el número correcto de elementos para que coincida con el tamaño de pantalla y para garantizar un desplazamiento preciso.
  • ItemKey: define opcionalmente un valor para @key en cada fila representada. Normalmente, se usa para especificar un identificador único, como un valor de clave principal, para cada elemento de datos. Esto permite que la cuadrícula conserve la asociación entre elementos de fila y elementos de datos en función de sus identificadores únicos, incluso cuando las instancias TGridItem se reemplazan por nuevas copias (por ejemplo, después de una nueva consulta en el almacén de datos subyacente). Si no se establece, @key es la instancia de TGridItem.
  • OverscanCount: define el número de elementos adicionales que se van a representar antes y después de la región visible para reducir la frecuencia de representación durante el desplazamiento. Aunque los valores más altos pueden mejorar la suavidad del desplazamiento representando más elementos fuera de pantalla, un valor mayor también puede dar lugar a un aumento en los tiempos de carga iniciales. Se recomienda encontrar un equilibrio en función del tamaño del conjunto de datos y los requisitos de experiencia del usuario. El valor predeterminado es 3. Solo disponible al usar Virtualize.
  • Pagination: opcionalmente vincula esta instancia TGridItem con un modelo PaginationState, lo que hace que la cuadrícula capture y represente solo la página actual de datos. Normalmente se usa junto con un componente Paginator o con alguna otra lógica de interfaz de usuario que muestra y actualiza la instancia PaginationState proporcionada.
  • En el contenido secundario QuickGrid (RenderFragment), especifique PropertyColumn<TGridItem,TProp>, que representan columnas TGridItem cuyas celdas muestran valores:
    • Property: define el valor que se va a mostrar en las celdas de esta columna.
    • Format: opcionalmente especifica una cadena de formato para el valor. El uso de Format requiere que el tipo TProp implemente IFormattable.
    • Sortable: indica si esta columna debe poder ordenar los datos. El valor predeterminado puede variar según el tipo de columna. Por ejemplo, TemplateColumn<TGridItem> se ordena si se especifica algún parámetro SortBy.
    • InitialSortDirection: indica la dirección de ordenación si IsDefaultSortColumn es true.
    • IsDefaultSortColumn: indica si esta columna debe ordenarse de forma predeterminada.
    • PlaceholderTemplate: si se especifica, las cuadrículas virtualizadas usan esta plantilla para representar celdas cuyos datos no se han cargado.
    • HeaderTemplate: plantilla opcional para la celda de encabezado de esta columna. Si no se especifica, la plantilla de encabezado predeterminada incluye el Title, junto con los indicadores de ordenación y los botones de opciones aplicables.
    • Title: texto del título de la columna. El título se representa automáticamente si no se usa HeaderTemplate.
  • Especifique etiquetas para el componente QuickGrid en el marcado Razor (<QuickGrid>...</QuickGrid>).
  • Asigna un nombre a un origen de datos consultable para la cuadrícula. Usa cualquiera de los siguientes orígenes de datos:
    • Items: Un IQueryable<TGridItem> que puede ser nulo, donde TGridItem es el tipo de datos representado por cada fila de la cuadrícula.
    • ItemsProvider: devolución de llamada que proporciona datos para la cuadrícula.
  • Class: un nombre de clase CSS opcional. Si se proporciona, el nombre de clase se incluye en el atributo class de la tabla representada.
  • Theme: un nombre de tema (valor predeterminado: default). Las reglas de estilo que coinciden con la tabla se ven afectadas por esto.
  • Virtualize: Si es verdadero, la cuadrícula se representa con virtualización. Esta acción se lleva a cabo normalmente junto con el desplazamiento y hace que la cuadrícula capture y represente solo los datos alrededor de la ventanilla de desplazamiento actual. Esto puede hacer que el rendimiento mejore considerablemente al desplazarse por grandes conjuntos de datos. Si usas Virtualize, debes proporcionar un valor para ItemSize y debes asegurarte de que cada fila se representa con un alto constante. Por lo general, es preferible no usar Virtualize si la cantidad de datos representados es pequeña o si usa paginación.
  • ItemSize: solo es aplicable cuando se usa Virtualize. ItemSize define una altura esperada en píxeles para cada fila, lo que permite que el mecanismo de virtualización obtenga el número correcto de elementos para coincidir con el tamaño de la pantalla y garantizar un desplazamiento preciso.
  • ItemKey: define opcionalmente un valor para @key en cada fila representada. Normalmente, se usa para especificar un identificador único, como un valor de clave principal, para cada elemento de datos. Esto permite que la cuadrícula conserve la asociación entre elementos de fila y elementos de datos en función de sus identificadores únicos, incluso cuando las instancias TGridItem se reemplazan por nuevas copias (por ejemplo, después de una nueva consulta en el almacén de datos subyacente). Si no se establece, @key es la instancia de TGridItem.
  • Pagination: opcionalmente vincula esta instancia TGridItem con un modelo PaginationState, lo que hace que la cuadrícula capture y represente solo la página actual de datos. Normalmente se usa junto con un componente Paginator o con alguna otra lógica de interfaz de usuario que muestra y actualiza la instancia PaginationState proporcionada.
  • En el contenido secundario QuickGrid (RenderFragment), especifique PropertyColumn<TGridItem,TProp>, que representan columnas TGridItem cuyas celdas muestran valores:
    • Property: define el valor que se va a mostrar en las celdas de esta columna.
    • Format: opcionalmente especifica una cadena de formato para el valor. El uso de Format requiere que el tipo TProp implemente IFormattable.
    • Sortable: indica si esta columna debe poder ordenar los datos. El valor predeterminado puede variar según el tipo de columna. Por ejemplo, TemplateColumn<TGridItem> se ordena si se especifica algún parámetro SortBy.
    • InitialSortDirection: indica la dirección de ordenación si IsDefaultSortColumn es true.
    • IsDefaultSortColumn: indica si esta columna debe ordenarse de forma predeterminada.
    • PlaceholderTemplate: si se especifica, las cuadrículas virtualizadas usan esta plantilla para representar celdas cuyos datos no se han cargado.
    • HeaderTemplate: plantilla opcional para la celda de encabezado de esta columna. Si no se especifica, la plantilla de encabezado predeterminada incluye el Title, junto con los indicadores de ordenación y los botones de opciones aplicables.
    • Title: texto del título de la columna. El título se representa automáticamente si no se usa HeaderTemplate.

Por ejemplo, agrega el siguiente componente para representar una cuadrícula.

Para Blazor Web App, el componente QuickGrid debe adoptar un modo de representación interactivo para habilitar características interactivas, como la paginación y la ordenación.

PromotionGrid.razor:

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

Accede al componente en un explorador en la ruta de acceso relativa /promotion-grid.

En este momento, no se prevén ampliaciones de QuickGrid con características que las cuadrículas comerciales totalmente desarrolladas tienden a ofrecer, por ejemplo: filas jerárquicas, columnas que se pueden arrastrar para reorganizar o selecciones de intervalos similares a Excel. Si necesita características avanzadas que no desea desarrollar por su cuenta, siga usando cuadrículas de terceros.

Ordenar por columna

El componente QuickGrid puede ordenar los elementos por columnas. En Blazor Web App, la ordenación requiere que el componente adopte un modo de representación interactivo.

Agregue Sortable="true" (Sortable) a la etiqueta PropertyColumn<TGridItem,TProp>:

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

En la aplicación en ejecución, ordene la columna QuickGrid seleccionando el título de la columna representada.

Elementos de página con un componente Paginator

El componente QuickGrid puede paginar datos del origen de datos. En Blazor Web App, la paginación requiere que el componente adopte un modo de representación interactivo.

Agregue una instancia PaginationState al bloque @code del componente. Establezca el ItemsPerPage en el número de elementos que se van a mostrar por página. En el ejemplo siguiente, la instancia se denomina pagination y se establecen diez elementos por página:

C# 
PaginationState pagination = new PaginationState { ItemsPerPage = 10 };

Establezca la propiedad QuickGrid del componente Pagination en pagination:

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

Para proporcionar una interfaz de usuario para la paginación, agrega un componente Paginator encima o debajo del componente QuickGrid. Establezca el Paginator.State en pagination:

razor 
<Paginator State="pagination" />

En la aplicación en ejecución, pagine los elementos utilizando un componente Paginator renderizado.

QuickGrid representa filas vacías adicionales para rellenar la página final de datos cuando se usa con un componente de Paginator. En .NET 9 o posterior, las celdas de datos vacías (<td></td>) se agregan a las filas vacías. Las filas vacías están diseñadas para facilitar la representación del QuickGrid con una altura de fila constante y un estilo en todas las páginas.

Aplicar estilos de fila

Aplicar estilos a las filas utilizando aislamiento CSS, lo que puede incluir el estilo de filas vacías para QuickGridcomponentes que paginen datos con un componente Paginator.

Encapsula el componente QuickGrid en un elemento de bloque de contenedor, por ejemplo, un <div>:

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

Aplique un estilo de fila con el pseudo-elemento ::deep. En el ejemplo siguiente, el alto de fila se establece en 2em, incluido para las filas de datos vacías.

{COMPONENT}.razor.css:

css 
::deep tr {
    height: 2em;
}

Como alternativa, use el siguiente enfoque de estilo CSS:

  • Mostrar celdas de fila rellenadas con datos.
  • No muestre las celdas de fila vacías, lo que evita que los bordes de las celdas de fila vacías se muestren según el estilo de Bootstrap.

{COMPONENT}.razor.css:

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

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

Para obtener más información sobre el uso de ::deeppseudoelementos con el aislamiento de CSS, consulte ASP.NET Core Blazor Aislamiento de CSS.

Atributos y estilos personalizados

QuickGrid también admite el paso de atributos personalizados y clases de estilo (Class) al elemento de tabla representado:

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

Estilizar una fila de la tabla según el elemento de la fila

Aplique una clase de hoja de estilos a una fila de la cuadrícula en función del elemento de fila mediante el parámetro RowClass.

En el ejemplo siguiente:

  • Un elemento de fila se representa mediante el registro Person. Un registro Person incluye una propiedad FirstName.
  • El método GetRowCssClass aplica los estilos de clase highlight-row a cualquier fila donde el nombre de la persona sea "Julie".
razor 
<QuickGrid ... RowClass="GetRowCssClass">
    ...
</QuickGrid>

@code {
    private record Person(int PersonId, string FirstName, string LastName);

    private string GetRowCssClass(Person person) =>
        person.FirstName == "Julie" ? "highlight-row" : null;
}

Origen de datos de Entity Framework Core (EF Core)

Use el patrón de fábrica para resolver un contexto de base de datos de EF Core que proporciona datos a un componente de QuickGrid. Para obtener más información sobre por qué se recomienda el patrón de fábrica, vea ASP.NET Core Blazor con Entity Framework Core (EF Core).

Un generador de contextos de base de datos (IDbContextFactory<TContext>) se inserta en el componente con la directiva @inject. El enfoque de fábrica requiere la eliminación del contexto de la base de datos, por lo que el componente implementa la interfaz IAsyncDisposable con la directiva @implements. El proveedor de elementos del componente QuickGrid es un DbSet<T> obtenido del contexto de base de datos creado (CreateDbContext) del generador de contexto de base de datos insertado.

QuickGrid reconoce las instancias de IQueryable proporcionadas por EF y sabe cómo resolver consultas de forma asincrónica para mejorar la eficacia.

Agregue una referencia de paquete para el Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapterpaquete NuGet.

Nota

Para obtener instrucciones sobre cómo agregar paquetes a aplicaciones .NET, consulta los artículos de Instalación y administración de paquetes en Flujo de trabajo de consumo de paquetes (documentación de NuGet). Confirme las versiones correctas del paquete en NuGet.org.

Llame a AddQuickGridEntityFrameworkAdapter en la colección de servicios en el archivo Program para registrar una implementación de IAsyncQueryExecutor compatible con EF:

C# 
builder.Services.AddQuickGridEntityFrameworkAdapter();

En el ejemplo siguiente se usa un ExampleTableDbSet<TEntity> (tabla) de un contexto de base de datos de AppDbContext (context) como origen de datos para un componente de QuickGrid:

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

En el bloque de código (@code) del ejemplo anterior:

  • El campo context contiene el contexto de la base de datos, escrito como un AppDbContext.
  • El método del ciclo de vida OnInitialized asigna un nuevo contexto de base de datos (CreateDbContext) al campo context desde la fábrica inyectada (DbFactory).
  • El método asincrónico DisposeAsync elimina el contexto de la base de datos cuando se elimina el componente.

También puede usar cualquier operador LINQ compatible con EF para filtrar los datos antes de pasarlos al parámetro Items.

En el ejemplo siguiente se filtran las películas por un título de película escrito en un cuadro de búsqueda. El contexto de la base de datos es BlazorWebAppMoviesContext, y el modelo es Movie. La propiedad Title de la película se utiliza para la operación de filtrado.

razor 
@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 obtener un ejemplo de trabajo, consulte los siguientes recursos:

Compatibilidad con nombres para mostrar

Se puede asignar un título de columna mediante ColumnBase<TGridItem>.Title en la etiqueta de PropertyColumn<TGridItem,TProp>. En el ejemplo de película siguiente, a la columna se le asigna el nombre "Release Date" para los datos de fecha de lanzamiento de películas de la columna:

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

Sin embargo, la gestión de los títulos de columna (nombres) a partir de las propiedades del modelo enlazadas suele ser una mejor opción para el mantenimiento de una aplicación. Un modelo puede controlar el nombre visible de una propiedad con el atributo [Display]. En el siguiente ejemplo, el modelo especifica un nombre para mostrar de fecha de lanzamiento de película de "Release Date" para su propiedad ReleaseDate:

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

Para permitir que el componente QuickGrid use la propiedad DisplayAttribute.Name, la subclase PropertyColumn<TGridItem,TProp>, ya sea en el componente o en una clase independiente. Llame al método GetName para devolver el valor de DisplayAttribute.Name localizado si un DisplayName no localizado (atributo [DisplayName]) no contiene el valor:

C# 
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>().GetName() ??
                memberInfo.Name;
        }

        base.OnParametersSet();
    }
}

Use la subclase en el componente QuickGrid. En el siguiente ejemplo, se usa el DisplayNameColumn anterior. El nombre "Release Date" lo proporciona el atributo [Display] en el modelo, por lo que no es necesario especificar un Title:

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

El [DisplayName] atributo también se admite.

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

Sin embargo, se recomienda el atributo [Display] porque hace que haya propiedades adicionales disponibles. Por ejemplo, el atributo [Display] ofrece la capacidad de asignar un tipo de recurso para la localización.

Datos remotos

En aplicaciones Blazor WebAssembly, capturar datos de una API web basada en JSON en un servidor es un requisito común. Para capturar solo los datos necesarios para la página o ventanilla actuales de los datos y aplicar reglas de ordenación o filtrado en el servidor, use el parámetro ItemsProvider.

ItemsProvider también se puede usar en una aplicación de Blazor del lado servidor si la aplicación es necesaria para consultar un punto de conexión externo o en otros casos en los que un IQueryable no cubre los requisitos.

Proporcione una devolución de llamada que coincida con el tipo de delegado GridItemsProvider<TGridItem>, donde TGridItem es el tipo de datos que se muestran en la cuadrícula. La devolución de llamada recibe un parámetro de tipo GridItemsProviderRequest<TGridItem>, que especifica el índice de inicio, el número máximo de filas y el orden de ordenación de los datos que se van a devolver. Además de devolver los elementos coincidentes, también se requiere un recuento total de elementos (totalItemCount) para que la paginación y la virtualización funcionen correctamente.

En el ejemplo siguiente se obtienen datos de la base de datos pública OpenFDA Food Enforcement.

El GridItemsProvider<TGridItem> convierte el GridItemsProviderRequest<TGridItem> en una consulta en la base de datos de OpenFDA. Los parámetros de consulta se traducen en el formato de dirección URL determinado admitido por la API JSON externa. Solo es posible realizar la ordenación y el filtrado mediante la ordenación y el filtrado admitidos por la API externa. El punto de conexión de OpenFDA no admite la ordenación, por lo que ninguna de las columnas se marca como ordenable. Sin embargo, admite la omisión de registros (parámetro skip) y la limitación del retorno de registros (parámetro limit), por lo que el componente puede habilitar la virtualización y desplazarse rápidamente a través de decenas de miles de registros.

FoodRecalls.razor:

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 obtener más información sobre cómo llamar a las API web, consulta Llamada a una API web desde una aplicación Blazor de ASP.NET Core.

QuickGrid scaffolder

El scaffolder QuickGrid agrupa componentes Razor con QuickGrid para mostrar datos de una base de datos.

El scaffolder genera páginas básicas de Crear, Leer, Actualizar y Eliminar (CRUD) basadas en un modelo de datos de Entity Framework Core. Puede aplicar scaffolding a páginas individuales o a todas las páginas CRUD. Selecciona la clase de modelo y el DbContext, creando opcionalmente un nuevo DbContext si es necesario.

Los componentes del scaffold Razor se añaden al proyecto en una carpeta generada con el nombre de la clase modelo. El componente generado Index usa un componente QuickGrid para mostrar los datos. Personaliza los componentes generados según sea necesario y habilita la interactividad para sacar provecho de las características interactivas, como la paginación, la ordenación y el filtrado.

Los componentes generados por el proveedor de scaffolding necesitan la representación del lado servidor (SSR), por lo que no se admiten al ejecutarse en WebAssembly.

Haz clic con el botón derecho en la carpeta Components/Pages y selecciona Agregar>Nuevo elemento estructurado.

Con el diálogo abierto Añadir nuevo elemento Scaffold a Instalado>Común>Blazor>Razor Componente, seleccione Razor Components con Entity Framework (CRUD). Selecciona el botón Agregar.

CRUD es el acrónimo de Crear, leer, actualizar y eliminar. El scaffolder produce componentes de creación, edición, borrado, detalles e índice para la app.

Completa el cuadro de diálogo Agregar componentes Razor mediante Entity Framework (CRUD):

  • La lista desplegable Plantilla incluye otras plantillas para crear específicamente componentes de creación, edición, eliminación, detalles y listas. Esta lista desplegable es útil cuando solo necesitas crear un tipo específico de componente scaffolded a una clase modelo. Deje la lista desplegable Plantillas en CRUD para crear un conjunto completo de componentes.
  • En la lista desplegable Clase de modelo, selecciona la clase de modelo. Se crea una carpeta para los componentes generados a partir del nombre del modelo (si la clase de modelo se denomina Movie, la carpeta se denomina MoviePagesautomáticamente).
  • Para la clase DbContext, tome cualquiera de los enfoques siguientes:
    • Seleccione una clase DbContext existente que sabe que tiene un registro de proveedor de fábrica (AddDbContextFactory).
    • Seleccione el botón + (signo más) y use el cuadro de diálogo modal Agregar contexto de datos para proporcionar un nuevo nombre de clase DbContext, que registra la clase con un proveedor de fábrica en lugar de usar el tipo de contexto directamente como registro de servicio.
  • Una vez que se cierra el cuadro de diálogo del modelo, la lista desplegable Proveedor de base de datos tiene como valor predeterminado SQL Server. Puedes seleccionar el proveedor adecuado para la base de datos que estás usando. Las opciones incluyen SQL Server, SQLite, PostgreSQL y Azure Cosmos DB.
  • Selecciona Agregar.

Para ver un ejemplo de uso del scaffolder QuickGrid, consulte Compilar una aplicación de base de datos Blazor de películas (Vista general).

Varias consultas de EF Core simultáneas desencadenan System.InvalidOperationException

Varias consultas de EF Core simultáneas pueden desencadenar el siguiente System.InvalidOperationException:

System.InvalidOperationException: se inició una segunda operación en esta instancia de contexto antes de que se complete una operación anterior. Esto suele deberse a subprocesos diferentes que usan simultáneamente la misma instancia de DbContext. Para más información sobre cómo evitar problemas de threading con DbContext, ver https://go.microsoft.com/fwlink/?linkid=2097913..

Este escenario está programado para mejorar en una próxima versión de ASP.NET Core. Para obtener más información, vea [Blazor] Mejorar la experiencia con QuickGrid y EF Core (dotnet/aspnetcore #58716).

Mientras tanto, puede abordar el problema utilizando un ItemsProvider con un token de cancelación. El token de cancelación evita las consultas simultáneas al cancelar la solicitud anterior cuando se emite una nueva solicitud.

Considere el siguiente ejemplo, que se basa en la base de datos de películas Index componente para el tutorial de Compilar una aplicación de base de datos Blazor de películas (Vista general). La versión más simple de la aplicación se puede ver en la aplicación de ejemplo del artículo. El componente Index incorporado en la aplicación se reemplaza por el siguiente componente.

Components/Pages/MoviePages/Index.razor:

razor 
@page "/movies"
@rendermode InteractiveServer
@using Microsoft.EntityFrameworkCore
@using Microsoft.AspNetCore.Components.QuickGrid
@using BlazorWebAppMovies.Models
@using BlazorWebAppMovies.Data
@inject IDbContextFactory<BlazorWebAppMovies.Data.BlazorWebAppMoviesContext> DbFactory

<PageTitle>Index</PageTitle>

<h1>Index</h1>

<div>
    <input type="search" @bind="titleFilter" @bind:event="oninput" />
</div>

<p>
    <a href="movies/create">Create New</a>
</p>

<div>
    <QuickGrid Class="table" TGridItem="Movie" ItemsProvider="GetMovies"
            ItemKey="(x => x.Id)" Pagination="pagination">
        <PropertyColumn Property="movie => movie.Title" Sortable="true" />
        <PropertyColumn Property="movie => movie.ReleaseDate" Title="Release Date" />
        <PropertyColumn Property="movie => movie.Genre" />
        <PropertyColumn Property="movie => movie.Price" />
        <PropertyColumn Property="movie => movie.Rating" />

        <TemplateColumn Context="movie">
            <a href="@($"movies/edit?id={movie.Id}")">Edit</a> |
            <a href="@($"movies/details?id={movie.Id}")">Details</a> |
            <a href="@($"movies/delete?id={movie.Id}")">Delete</a>
        </TemplateColumn>
    </QuickGrid>
</div>

<Paginator State="pagination" />

@code {
    private BlazorWebAppMoviesContext context = default!;
    private PaginationState pagination = new PaginationState { ItemsPerPage = 5 };
    private string titleFilter = string.Empty;

    public async ValueTask<GridItemsProviderResult<Movie>> GetMovies(GridItemsProviderRequest<Movie> request)
    {
        using var context = DbFactory.CreateDbContext();
        var totalCount = await context.Movie.CountAsync(request.CancellationToken);
        IQueryable<Movie> query = context.Movie.OrderBy(x => x.Id);
        query = request.ApplySorting(query).Skip(request.StartIndex);

        if (request.Count.HasValue)
        {
            query = query.Take(request.Count.Value);
        }

        var items = await query.ToArrayAsync(request.CancellationToken);

        var result = new GridItemsProviderResult<Movie>
        {
            Items = items,
            TotalItemCount = totalCount
        };

        return result;
    }
}