Finora abbiamo sempre visto QuickGrid dal punto di vista della consultazione dati. Questo perché, fondamentalmente, questa griglia è un componente read only, senza supporto nativo alla scrittura.
Tuttavia, se dobbiamo creare delle pagine CRUD piuttosto standard e se stiamo utilizzando Entity Framework (e pertanto siamo in un contesto di Server Interactivity), possiamo usare lo scaffolding di Visual Studio per generare queste pagine automaticamente.
Con un click sul tasto destro su una directory qualsiasi del progetto Blazor, dobbiamo selezionare Add -> New Scaffolded Item, e successivamente Razor Pages using Entity Framework:

Nella successiva pagina del Wizard, dobbiamo indicare quale entity vogliamo gestire e, ovviamente, il DbContext da utilizzare:

A questo punto, lo scaffolder creerà una serie di pagine per le tipiche operazioni CRUD: Index, Edit, Create, Details e Delete.
Per esempio, la pagina Index conterrà la lista delle nostre entity, ovviamente basata su QuickGrid - e che potremo personalizzare secondo le nostre necessità:
@page "/shares" @using Microsoft.AspNetCore.Components.QuickGrid @inject BlazorQuickGrid.Data.MyContext DB @using BlazorQuickGrid.Data <PageTitle>Index</PageTitle> <h1>Index</h1> <p> <a href="shares/create">Create New</a></p> <QuickGrid Class="table" Items="DB.Shares"> <PropertyColumn Property="share => share.CompanyName" /> <PropertyColumn Property="share => share.Value" /> <TemplateColumn Context="share"> <a href="@($"shares/edit?id={share.Id}")">Edit</a> | <a href="@($"shares/details?id={share.Id}")">Details</a> | <a href="@($"shares/delete?id={share.Id}")">Delete</a> </TemplateColumn> </QuickGrid>
Il risultato finale, seppure magari un po' semplicistico, ci permette di risparmiare un sacco di tempo ed è comunque funzionale - per esempio - per realizzare velocemente un back office:

Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Creare una custom property in GitHub
Usare le navigation property in QuickGrid di Blazor
Effettuare il binding di date in Blazor
Supporto ai tipi DateOnly e TimeOnly in Entity Framework Core
Sfruttare gli embedding e la ricerca vettoriale con Azure SQL Database
Combinare Container Queries e Media Queries
Implementare l'infinite scroll con QuickGrid in Blazor Server
Gestione CSS in Blazor con .NET 9
Filtrare i dati di una QuickGrid in Blazor con una drop down list
Utilizzare WhenEach per processare i risultati di una lista di task
Migliorare la scalabilità delle Azure Function con il Flex Consumption
I più letti di oggi
- Implementare l'infinite scroll con QuickGrid in Blazor Server
- #vs2017 sarà rilasciato il 07/03, in concomitanza con i suoi 20 anni https://aspit.co/bfn
- Ondata di novità per Windows Azure
- Novità per Win CE: .NET compact framework e SQL Server CE 2.0
- Presentata la nuova versione di C#
- Microsoft Security Bulletin MS05-013
- Rilasciato SQL Server 2005 in italiano
- Per la settimana prossima la beta1 del primo Service Pack di VS 2005
- SSL Certificates for everyone on Azure
- Repository con code-first di Entity Framework