Dela via

ASP.NET Core BlazorQuickGrid-komponent

  • Artikel

Notis

Det här är inte den senaste versionen av den här artikeln. Den aktuella versionen finns i den .NET 9-versionen av den här artikeln.

Viktig

Den här informationen gäller en förhandsversionsprodukt som kan ändras avsevärt innan den släpps kommersiellt. Microsoft lämnar inga garantier, uttryckliga eller underförstådda, med avseende på den information som tillhandahålls här.

Den aktuella versionen finns i den .NET 9-versionen av den här artikeln.

Komponenten QuickGrid är en Razor komponent för att snabbt och effektivt visa data i tabellform. QuickGrid tillhandahåller en enkel och praktisk komponent för datarutnät för vanliga scenarier för rutnätsrendering och fungerar som referensarkitektur och prestandabaslinje för att skapa komponenter för datarutnät. QuickGrid är mycket optimerad och använder avancerade tekniker för att uppnå optimal renderingsprestanda.

Paket

Lägg till en paketreferens för Microsoft.AspNetCore.Components.QuickGrid-paketet.

Anmärkning

Mer information om hur du lägger till paket i .NET-appar finns i artiklarna under Installera och hantera paket på Arbetsflöde för paketförbrukning (NuGet-dokumentation). Bekräfta rätt paketversioner på NuGet.org.

Exempelapp

De olika QuickGrid demonstrationerna finns i QuickGrid för Blazor exempelappen. Demowebbplatsen finns på GitHub Pages. Webbplatsen läses in snabbt tack vare statisk förhandsrendering med det communityn underhållna GitHub-projektet BlazorWasmPrerendering.Build.

QuickGrid Implementering

Så här implementerar du en QuickGrid komponent:

  • Ange taggar för komponenten QuickGrid i Razor markering (<QuickGrid>...</QuickGrid>).
  • Namnge en frågebar datakälla för rutnätet. Använd antingen av följande datakällor:
    • Items: En nullbar IQueryable<TGridItem>, där TGridItem är den typ av data som representeras av varje rad i rutnätet.
    • ItemsProvider: Ett återanrop som tillhandahåller data för rutnätet.
  • Class: Ett valfritt CSS-klassnamn. Om det anges inkluderas klassnamnet i attributet class i den renderade tabellen.
  • Theme: Ett temanamn (standardvärde: default). Detta påverkar vilka formateringsregler som matchar tabellen.
  • Virtualize: Om sant återges rutnätet med virtualisering. Detta används normalt tillsammans med rullning och gör att rutnätet hämtar och återger endast data runt den aktuella rullningsvyporten. Detta kan avsevärt förbättra prestandan när du bläddrar igenom stora datamängder. Om du använder Virtualizeanger du ett värde för ItemSize och måste se till att varje rad återges med konstant höjd. I allmänhet är det bättre att inte använda Virtualize om mängden data som återges är liten eller om du använder sidnumrering.
  • ItemSize: Gäller endast när du använder Virtualize. ItemSize definierar en förväntad höjd i bildpunkter för varje rad, vilket gör att virtualiseringsmekanismen kan hämta rätt antal objekt för att matcha visningsstorleken och säkerställa korrekt rullning.
  • ItemKey: Du kan också definiera ett värde för @key på varje renderad rad. Detta används vanligtvis för att ange en unik identifierare, till exempel ett primärnyckelvärde, för varje dataobjekt. Detta gör att rutnätet kan bevara associationen mellan radelement och dataobjekt baserat på deras unika identifierare, även när de TGridItem instanserna ersätts av nya kopior (till exempel efter en ny fråga mot det underliggande datalagret). Om den inte har angetts är @key den TGridItem instansen.
  • OverscanCount: Definierar hur många ytterligare objekt som ska återges före och efter den synliga regionen för att minska återgivningsfrekvensen under rullning. Även om högre värden kan förbättra rullningsutjämningen genom att återge fler objekt utanför skärmen, kan ett högre värde också leda till en ökning av de inledande inläsningstiderna. Vi rekommenderar att du hittar en balans baserat på datamängdens storlek och krav på användarupplevelse. Standardvärdet är 3. Endast tillgängligt när du använder Virtualize.
  • Pagination: Du kan också länka den här TGridItem instansen med en PaginationState modell, vilket gör att rutnätet hämtar och återger endast den aktuella sidan med data. Detta används vanligtvis tillsammans med en Paginator komponent eller någon annan UI-logik som visar och uppdaterar den angivna PaginationState instansen.
  • I det QuickGrid underordnade innehållet (RenderFragment) anger du PropertyColumn<TGridItem,TProp>s, som representerar TGridItem kolumner vars celler visar värden:
    • Property: Definierar det värde som ska visas i kolumnens celler.
    • Format: Om du vill kan du ange en formatsträng för värdet. Om du använder Format krävs att typen TProp implementerar IFormattable.
    • Sortable: Anger om data ska kunna sorteras efter den här kolumnen. Standardvärdet kan variera beroende på kolumntyp. Till exempel sorteras en TemplateColumn<TGridItem> om någon SortBy parameter har angetts.
    • InitialSortDirection: Anger sorteringsriktningen om IsDefaultSortColumn är true.
    • IsDefaultSortColumn: Anger om den här kolumnen ska sorteras som standard.
    • PlaceholderTemplate: Om det anges använder virtualiserade rutnät den här mallen för att återge celler vars data inte har lästs in.
    • HeaderTemplate: En valfri mall för den här kolumnens rubrikcell. Om den inte anges innehåller standardhuvudmallen Title, tillsammans med eventuella tillämpliga sorteringsindikatorer och alternativknappar.
    • Title: Rubriktext för kolumnen. Rubriken återges automatiskt om HeaderTemplate inte används.
  • Ange taggar för komponenten QuickGrid i Razor markering (<QuickGrid>...</QuickGrid>).
  • Namnge en frågebar datakälla för rutnätet. Använd antingen av följande datakällor:
    • Items: En nullbar IQueryable<TGridItem>, där TGridItem är den typ av data som representeras av varje rad i rutnätet.
    • ItemsProvider: Ett återanrop som tillhandahåller data för rutnätet.
  • Class: Ett valfritt CSS-klassnamn. Om det anges inkluderas klassnamnet i attributet class i den renderade tabellen.
  • Theme: Ett temanamn (standardvärde: default). Detta påverkar vilka formateringsregler som matchar tabellen.
  • Virtualize: Om sant återges rutnätet med virtualisering. Detta används normalt tillsammans med rullning och gör att rutnätet hämtar och återger endast data runt den aktuella rullningsvyporten. Detta kan avsevärt förbättra prestandan när du bläddrar igenom stora datamängder. Om du använder Virtualizeanger du ett värde för ItemSize och måste se till att varje rad återges med konstant höjd. I allmänhet är det bättre att inte använda Virtualize om mängden data som återges är liten eller om du använder sidnumrering.
  • ItemSize: Gäller endast när du använder Virtualize. ItemSize definierar en förväntad höjd i bildpunkter för varje rad, vilket gör att virtualiseringsmekanismen kan hämta rätt antal objekt för att matcha visningsstorleken och säkerställa korrekt rullning.
  • ItemKey: Du kan också definiera ett värde för @key på varje renderad rad. Detta används vanligtvis för att ange en unik identifierare, till exempel ett primärnyckelvärde, för varje dataobjekt. Detta gör att rutnätet kan bevara associationen mellan radelement och dataobjekt baserat på deras unika identifierare, även när de TGridItem instanserna ersätts av nya kopior (till exempel efter en ny fråga mot det underliggande datalagret). Om den inte har angetts är @key den TGridItem instansen.
  • Pagination: Du kan också länka den här TGridItem instansen med en PaginationState modell, vilket gör att rutnätet hämtar och återger endast den aktuella sidan med data. Detta används vanligtvis tillsammans med en Paginator komponent eller någon annan UI-logik som visar och uppdaterar den angivna PaginationState instansen.
  • I det QuickGrid underordnade innehållet (RenderFragment) anger du PropertyColumn<TGridItem,TProp>s, som representerar TGridItem kolumner vars celler visar värden:
    • Property: Definierar det värde som ska visas i kolumnens celler.
    • Format: Om du vill kan du ange en formatsträng för värdet. Om du använder Format krävs TProp typ för att implementera IFormattable.
    • Sortable: Anger om data ska kunna sorteras efter den här kolumnen. Standardvärdet kan variera beroende på kolumntyp. Till exempel sorteras en TemplateColumn<TGridItem> om någon SortBy parameter har angetts.
    • InitialSortDirection: Anger sorteringsriktningen om IsDefaultSortColumn är true.
    • IsDefaultSortColumn: Anger om den här kolumnen ska sorteras som standard.
    • PlaceholderTemplate: Om det anges använder virtualiserade rutnät den här mallen för att återge celler vars data inte har lästs in.
    • HeaderTemplate: En valfri mall för den här kolumnens rubrikcell. Om den inte anges innehåller standardhuvudmallen Title, tillsammans med eventuella tillämpliga sorteringsindikatorer och alternativknappar.
    • Title: Rubriktext för kolumnen. Rubriken återges automatiskt om HeaderTemplate inte används.

Lägg till exempel till följande komponent för att återge ett rutnät.

För att Blazor Web Appska fungera måste komponenten QuickGrid anta ett interaktivt renderingsläge för att möjliggöra interaktiva funktioner som exempelvis växling och sortering.

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

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

Få åtkomst till komponenten i en webbläsare via den relativa sökvägen /promotion-grid.

Det finns inga aktuella planer på att utöka QuickGrid med funktioner som kommersiella rutnät brukar erbjuda, till exempel hierarkiska rader, dra och ordna om kolumner, eller Excel-liknande områdesval. Om du behöver avancerade funktioner som du inte vill utveckla på egen hand fortsätter du att använda rutnät från tredje part.

Sortera efter kolumn

Komponenten QuickGrid kan sortera objekt efter kolumner. I Blazor Web Apps kräver sortering att komponenten använder ett interaktivt återgivningsläge.

Lägg till Sortable="true" (Sortable) i taggen PropertyColumn<TGridItem,TProp>:

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

I appen som körs sorterar du kolumnen QuickGrid genom att välja den renderade kolumnrubriken.

Sidobjekt med en Paginator komponent

Komponenten QuickGrid kan hämta data från datakällan. I Blazor Web Apps kräver växling att komponenten använder ett interaktivt återgivningsläge.

Lägg till en PaginationState-instans i komponentens @code block. Ange ItemsPerPage till antalet objekt som ska visas per sida. I följande exempel heter instansen paginationoch tio objekt per sida anges:

PaginationState pagination = new PaginationState { ItemsPerPage = 10 };

Ange QuickGrid komponentens egenskap Pagination till pagination:

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

Om du vill ange ett användargränssnitt för sidnumrering lägger du till en Paginator komponent över eller under komponenten QuickGrid. Ange Paginator.State till pagination:

<Paginator State="pagination" />

I appen som körs går du igenom objekten med hjälp av en renderad Paginator komponent.

QuickGrid återger ytterligare tomma rader för att fylla i den sista sidan med data när den används med en Paginator komponent. I .NET 9 eller senare läggs tomma dataceller (<td></td>) till i de tomma raderna. De tomma raderna är avsedda att underlätta återgivningen av QuickGrid med stabil radhöjd och formatering på alla sidor.

Använda radformat

Använd formatmallar på rader med CSS-isolering, som kan innehålla formatmallar för tomma rader för QuickGrid komponenter som siddata med en Paginator komponent.

Omslut QuickGrid-komponenten i ett omslutningsblockelement, till exempel en <div>:

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

Använd ett radformat med ::deeppseudoelement. I följande exempel anges radhöjden till 2em, inklusive för tomma datarader.

{COMPONENT}.razor.css:

::deep tr {
    height: 2em;
}

Du kan också använda följande CSS-formateringsmetod:

  • Visa radceller ifyllda med data.
  • Visa inte tomma radceller, vilket förhindrar att tomma radcellskantlinjer återges per Bootstrap-formatering.

{COMPONENT}.razor.css:

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

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

Mer information om hur du använder ::deeppseudoelement med CSS-isolering finns i ASP.NET Core Blazor CSS-isolering.

Anpassade attribut och formatmallar

QuickGrid har också stöd för att skicka anpassade attribut och formatklasser (Class) till det renderade tabellelementet:

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

Entity Framework Core (EF Core) datakälla

Använd fabriksmönstret för att lösa en EF Core databaskontext som tillhandahåller data till en QuickGrid komponent. Mer information om varför fabriksmönstret rekommenderas finns i ASP.NET Core Blazor med Entity Framework Core (EF Core).

En databaskontextfabrik (IDbContextFactory<TContext>) injiceras i komponenten med @inject-direktivet. Fabriksmetoden kräver bortskaffande av databaskontexten, så komponenten implementerar IAsyncDisposable-gränssnittet med @implements-direktivet. Objektprovidern för komponenten QuickGrid är en DbSet<T> hämtad från den skapade databaskontexten (CreateDbContext) i den inmatade databaskontextfabriken.

QuickGrid identifierar EF-tillhandahållna IQueryable-instanser och vet hur man löser frågor asynkront för effektivitet.

Lägg till en paketreferens för Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter NuGet-paketet.

Anteckning

Mer information om hur du lägger till paket i .NET-appar finns i artiklarna under Installera och hantera paket på Arbetsflöde för paketförbrukning (NuGet-dokumentation). Bekräfta rätt paketversioner på NuGet.org.

Anropa AddQuickGridEntityFrameworkAdapter på tjänstsamlingen i filen Program för att registrera en EF-medveten IAsyncQueryExecutor implementering:

builder.Services.AddQuickGridEntityFrameworkAdapter();

I följande exempel används en ExampleTableDbSet<TEntity> (tabell) från en AppDbContext databaskontext (context) som datakälla för en QuickGrid komponent:

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

I kodblocket (@code) i föregående exempel:

  • Fältet context innehåller databaskontexten, skrivet som en AppDbContext.
  • Livscykelmetoden OnInitialized tilldelar en ny databaskontext (CreateDbContext) till fältet context från den injicerade fabriken (DbFactory).
  • Den asynkrona DisposeAsync-metoden tar bort databaskontexten när komponenten tas bort.

Du kan också använda alla LINQ-operatorer som stöds av EF för att filtrera data innan du skickar dem till parametern Items.

I följande exempel filtreras filmer efter en filmtitel som anges i en sökruta. Databaskontexten är BlazorWebAppMoviesContextoch modellen är Movie. Filmens egenskap Title används för filtreringsoperationen.

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

Ett fungerande exempel finns i följande resurser:

Stöd för visningsnamn

En kolumnrubrik kan tilldelas med hjälp av ColumnBase<TGridItem>.Title i taggen PropertyColumn<TGridItem,TProp>'s. I följande filmexempel får kolumnen namnet "Release Date" för kolumnens datumdata för filmlansering:

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

Men att hantera kolumnrubriker (namn) från bundna modellegenskaper är vanligtvis ett bättre alternativ för att underhålla en app. En modell kan styra visningsnamnet för en egenskap med attributet [Display]. I följande exempel anger modellen visningsnamnet för releasedatum "Release Date" för egenskapen ReleaseDate.

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

Om du vill möjliggöra för komponenten QuickGrid att använda DisplayAttribute.Name, underklassa PropertyColumn<TGridItem,TProp> antingen i komponenten eller i en separat klass.

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

Använd underklassen i komponenten QuickGrid. I följande exempel används föregående DisplayNameColumn. Namnet "Release Date" tillhandahålls av attributet [Display] i modellen, så du behöver inte ange en Title:

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

Attributet [DisplayName] stöds också:

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

Attributet [Display] rekommenderas dock eftersom det gör ytterligare egenskaper tillgängliga. Attributet [Display] ger till exempel möjlighet att tilldela en resurstyp för lokalisering.

Fjärrdata

I Blazor WebAssembly appar är det vanligt att hämta data från ett JSON-baserat webb-API på en server. Om du bara vill hämta de data som krävs för den aktuella sidan/visningsporten av data och tillämpa sorterings- eller filtreringsregler på servern använder du parametern ItemsProvider.

ItemsProvider kan också användas i en Blazor app på serversidan om appen krävs för att köra frågor mot en extern slutpunkt eller i andra fall där kraven inte omfattas av en IQueryable.

Ange en återkoppling som matchar delegeringstypen GridItemsProvider<TGridItem>, där TGridItem är typen av data som visas i tabellen. Återanropet ges en parameter av typen GridItemsProviderRequest<TGridItem>, som anger startindex, maximalt antal rader och sorteringsordning för data som ska returneras. Förutom att returnera matchande objekt krävs också ett totalt antal objekt (totalItemCount) för att paginering och virtualisering ska fungera korrekt.

I följande exempel hämtas data från den offentliga OpenFDA Food Enforcement-databasen.

GridItemsProvider<TGridItem> konverterar GridItemsProviderRequest<TGridItem> till en fråga mot OpenFDA-databasen. Frågeparametrar översätts till det specifika URL-format som stöds av det externa JSON-API:et. Det går bara att utföra sortering och filtrering via sortering och filtrering som stöds av det externa API:et. OpenFDA-slutpunkten stöder inte sortering, så ingen av kolumnerna markeras som sorterbara. Denna stöder dock att hoppa över poster (skip parameter) och begränsar antalet poster som returneras (limit parameter), så komponenten kan aktivera virtualisering och snabbt gå igenom tiotusentals poster.

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

Mer information om hur du anropar webb-API:er finns i Anropa ett webb-API från en ASP.NET Core Blazor-app.

QuickGrid byggnadsställning

Scaffoldern QuickGrid scaffoldar Razor komponenter med QuickGrid för att visa data från en databas.

Scaffolder genererar grundläggande CRUD-sidor (Create, Read, Update och Delete) baserat på en Entity Framework Core-datamodell. Du kan skapa enskilda sidor eller alla CRUD-sidor. Du väljer modellklassen och DbContext, och har möjlighet att skapa en ny DbContext vid behov.

De scaffoldade Razor-komponenterna läggs till i projektet i en genererad mapp som heter efter modellklassen. Den genererade Index-komponenten använder en QuickGrid komponent för att visa data. Anpassa de genererade komponenterna efter behov och aktivera interaktivitet för att utnyttja interaktiva funktioner som till exempel växling, sortering och filtrering.

Komponenterna som skapas av byggnadsställningen kräver återgivning på serversidan (SSR), så de stöds inte när de körs på WebAssembly.

Högerklicka på mappen Components/Pages och välj Lägg till>nytt autogenererat objekt.

Med dialogrutan addera ny byggnadsställningkomponent öppen för Installerad>Common>Blazor>Razor Component, välj Razor komponenter med hjälp av Entity Framework (CRUD). Välj knappen Lägg till.

CRUD- är en förkortning för Skapa, Läsa, Uppdatera och Ta bort. Scaffolder skapar komponenter för att skapa, redigera, ta bort, information och indexera appen.

Slutför dialogrutan Lägg till Razor-komponenter med hjälp av Entity Framework (CRUD):

  • Listrutan Mall innehåller andra mallar för att specifikt skapa, redigera, ta bort, information och listkomponenter. Den här listrutan är praktisk när du bara behöver skapa en specifik typ av komponent som är autogenererad till en modellklass. Låt listrutan Mall vara inställd på CRUD- för att skapa en fullständig uppsättning komponenter.
  • I listrutan Modellklass väljer du modellklassen. En mapp skapas för de genererade komponenterna från modellnamnet (om modellklassen heter Movienamnges mappen automatiskt MoviePages).
  • För DbContext-klassväljer du en befintlig databaskontext eller väljer knappen + (plustecken) och Dialogrutan Lägg till datakontext modal för att lägga till en ny databaskontext.
  • Efter att modelldialogrutan har stängts, listrutan för databasleverantörer väljer som standard SQL Server. Du kan välja lämplig provider för databasen som du använder. Alternativen är SQL Server, SQLite, PostgreSQL och Azure Cosmos DB.
  • Välj Lägg till.

Ett exempel på hur du använder QuickGrid byggnadsställning finns i Skapa en Blazor filmdatabasapp (översikt).