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
Gestire codice JavaScript con code splitting e lazy loading
Utilizzare i variable font nel CSS
Recuperare automaticamente un utente e aggiungerlo ad un gruppo di Azure DevOps
Gestione CSS in Blazor con .NET 9
Gestione file Javascript in Blazor con .NET 9
Autenticazione di git tramite Microsoft Entra ID in Azure DevOps
Configurare automaticamente un webhook in Azure DevOps
Generare HTML a runtime a partire da un componente Razor in ASP.NET Core
Creare una libreria CSS universale: i bottoni
Eseguire query in contemporanea con EF
Creare una libreria CSS universale: Cards
Recuperare App Service cancellati su Azure
I più letti di oggi
- .NET Conference Italia 2024 - Milano
- Configurare automaticamente un webhook in Azure DevOps
- Definire lo stile CSS in base alle dimensioni del container
- AngularJS per lo sviluppatore ASP.NET
- DevOps for any developer with GitHub
- Visual Studio Code: costruire web app per Windows, Linux e MacOSX
- Migrate and Modernize your .NET Applications on Azure