Utilizzare QuickGrid di Blazor con Entity Framework

di Marco De Sanctis, in ASP.NET Core,

Negli scorsi script ci siamo occupati di QuickGrid, un componente di Blazor che permette di realizzare facilmente interfacce tabellari.

Nel caso in cui stiamo utilizzando Blazor Server (o la nuova server interactivity delle Blazor Web App), possiamo integrare la nostra pagina direttamente con Entity Framework, così da rendere davvero minimale il codice da scrivere. Per esempio, immaginiamo di avere un DbContext come il seguente, in cui sono definite due classi Share e Industry:

public class MyContext : DbContext
{
    public MyContext(DbContextOptions<MyContext> options)
        : base(options)
    {
    }

    // Id, CompanyName, Value, Industry
    public DbSet<Share> Shares { get; set; }

    // Id, Name
    public DbSet<Industry> Industries { get; set; }
}

Come al solito, dobbiamo come prima cosa registrare il DbContext nell'IoC container di ASP.NET Core:

public static void Main(string[] args)
{
    var builder = WebApplication.CreateBuilder(args);

    builder.Services.AddDbContext<MyContext>(options => 
    {
        options.UseSqlServer(builder.Configuration.GetConnectionString("MyContext"));
    })
    .AddQuickGridEntityFrameworkAdapter();

   // .. altro codice qui ..
}

Nel codice in alto, dopo aver invocato AddDbContext e passato la connection string per il nostro database, abbiamo anche aggiunto un servizio particolare, AddQuickGridEntityFrameworkAdapter, che permette a QuickGrid di riconoscere il particolare IQueryable restituito da Entity Framework, così che possa eseguirne le query in maniera asincrona massimizzando l'efficienza del nostro codice.

Questo metodo è definito in un particolare package chiamato EntityFrameworkAdapter che dobbiamo aggiungere alle reference del progetto, ovviamente insieme a quello di QuickGrid:

dotnet add package Microsoft.AspNetCore.Components.QuickGrid
dotnet add package Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter

A questo punto il gioco è fatto: tutto ciò che dobbiamo fare è iniettare in pagina il DbContext e collegarlo alla grid stessa, passando il DbSet desiderato:

@page "/companies"
@inject MyContext data

<QuickGrid Items="data.Shares" Pagination="@pagination">
    <PropertyColumn Title="Company" Property="@(x => x.CompanyName)" Sortable="true" />
    <PropertyColumn Title="Value" Property="@(x => x.Value)" Format="c" Sortable="true" />
</QuickGrid>

<Paginator State="@pagination" />

@code {
  private PaginationState pagination = new PaginationState();
}

La griglia dello snippet supporta la paginazione e il sorting: come possiamo verificare dal log di ASP.NET Core, entrambe queste funzionalità sono implementate lato database, sfruttando le peculiarità di Entity Framework e IQueryable.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi