komponen ASP.NET Core Blazor`QuickGrid`

Artikel
11/06/2024

Catatan

Ini bukan versi terbaru dari artikel ini. Untuk rilis saat ini, lihat versi .NET 9 dari artikel ini.

Penting

Informasi ini berkaitan dengan produk pra-rilis yang mungkin dimodifikasi secara substansial sebelum dirilis secara komersial. Microsoft tidak memberikan jaminan, tersirat maupun tersurat, sehubungan dengan informasi yang diberikan di sini.

Untuk rilis saat ini, lihat versi .NET 9 dari artikel ini.

Komponen QuickGrid adalah Razor komponen untuk menampilkan data dalam bentuk tabular dengan cepat dan efisien. QuickGrid menyediakan komponen kisi data yang sederhana dan nyaman untuk skenario penyajian kisi umum dan berfungsi sebagai arsitektur referensi dan garis besar performa untuk membangun komponen kisi data. QuickGrid sangat dioptimalkan dan menggunakan teknik canggih untuk mencapai performa penyajian yang optimal.

Paket

Tambahkan referensi paket untuk paket.Microsoft.AspNetCore.Components.QuickGrid

Catatan

Untuk panduan tentang menambahkan paket ke aplikasi .NET, lihat artikel di bagian Menginstal dan mengelola paket di Alur kerja konsumsi paket (dokumentasi NuGet). Konfirmasikan versi paket yang benar di NuGet.org.

Aplikasi sampel

Untuk berbagai QuickGrid demonstrasi, lihat QuickGrid untuk Blazor aplikasi sampel. Situs demo dihosting di Halaman GitHub. Situs ini dimuat dengan cepat berkat prarender statis menggunakan proyek GitHub yang dikelola BlazorWasmPrerendering.Build komunitas.

`QuickGrid` pelaksanaan

Untuk mengimplementasikan QuickGrid komponen:

Tentukan tag untuk QuickGrid komponen dalam Razor markup (<QuickGrid>...</QuickGrid>).
Beri nama sumber data yang dapat dikueri untuk kisi. Gunakan salah satu sumber data berikut:
- Items: Nullable IQueryable<TGridItem>, di mana TGridItem adalah jenis data yang diwakili oleh setiap baris dalam kisi.
- ItemsProvider: Panggilan balik yang menyediakan data untuk kisi.
Class: Nama kelas CSS opsional. Jika disediakan, nama kelas disertakan dalam class atribut tabel yang dirender.
Theme: Nama tema (nilai default: default). Ini memengaruhi aturan gaya mana yang cocok dengan tabel.
Virtualize: Jika true, kisi dirender dengan virtualisasi. Ini biasanya digunakan bersama dengan pengguliran dan menyebabkan kisi mengambil dan merender hanya data di sekitar viewport gulir saat ini. Ini dapat sangat meningkatkan performa saat menggulir kumpulan data besar. Jika Anda menggunakan Virtualize, Anda harus menyediakan nilai untuk ItemSize dan harus memastikan bahwa setiap baris dirender dengan tinggi konstan. Umumnya, lebih baik tidak digunakan Virtualize jika jumlah data yang dirender kecil atau jika Anda menggunakan penomoran halaman.
ItemSize: Hanya berlaku saat menggunakan Virtualize. ItemSize menentukan tinggi yang diharapkan dalam piksel untuk setiap baris, memungkinkan mekanisme virtualisasi untuk mengambil jumlah item yang benar agar sesuai dengan ukuran tampilan dan untuk memastikan pengguliran yang akurat.
ItemKey: Secara opsional mendefinisikan nilai untuk @key pada setiap baris yang dirender. Biasanya, ini digunakan untuk menentukan pengidentifikasi unik, seperti nilai kunci utama, untuk setiap item data. Ini memungkinkan kisi untuk mempertahankan hubungan antara elemen baris dan item data berdasarkan pengidentifikasi uniknya, bahkan ketika TGridItem instans digantikan oleh salinan baru (misalnya, setelah kueri baru terhadap penyimpanan data yang mendasarinya). Jika tidak diatur, @key adalah TGridItem instansnya.
OverscanCount: Menentukan berapa banyak item tambahan yang akan dirender sebelum dan sesudah wilayah yang terlihat untuk mengurangi frekuensi penyajian selama pengguliran. Meskipun nilai yang lebih tinggi dapat meningkatkan kehalusan gulir dengan merender lebih banyak item di luar layar, nilai yang lebih tinggi juga dapat mengakibatkan peningkatan waktu muat awal. Direkomendasikan untuk menemukan keseimbangan berdasarkan ukuran himpunan data dan persyaratan pengalaman pengguna Anda. Nilai defaultnya adalah 3. Hanya tersedia saat menggunakan Virtualize.
Pagination: Secara opsional menautkan instans ini TGridItem dengan PaginationState model, menyebabkan kisi mengambil dan merender hanya halaman data saat ini. Ini biasanya digunakan bersama dengan Paginator komponen atau beberapa logika UI lain yang menampilkan dan memperbarui instans yang disediakan PaginationState .
QuickGrid Dalam konten anak (RenderFragment), tentukan PropertyColumn<TGridItem,TProp>s, yang mewakili TGridItem kolom yang selnya menampilkan nilai:
- Property: Menentukan nilai yang akan ditampilkan dalam sel kolom ini.
- Format: Secara opsional menentukan string format untuk nilai . Menggunakan Format memerlukan TProp jenis untuk mengimplementasikan IFormattable.
- Sortable: Menunjukkan apakah data harus dapat diurutkan berdasarkan kolom ini. Nilai default dapat bervariasi sesuai dengan jenis kolom. Misalnya, TemplateColumn<TGridItem> diurutkan jika ada SortBy parameter yang ditentukan.
- InitialSortDirection: Menunjukkan arah pengurutan jika IsDefaultSortColumn adalah true.
- IsDefaultSortColumn: Menunjukkan apakah kolom ini harus diurutkan secara default.
- PlaceholderTemplate: Jika ditentukan, kisi virtual menggunakan templat ini untuk merender sel yang datanya belum dimuat.
- HeaderTemplate: Templat opsional untuk sel header kolom ini. Jika tidak ditentukan, templat header default menyertakan Title, bersama dengan indikator pengurutan dan tombol opsi yang berlaku.
- Title: Teks judul untuk kolom. Judul dirender secara otomatis jika HeaderTemplate tidak digunakan.

Tentukan tag untuk QuickGrid komponen dalam Razor markup (<QuickGrid>...</QuickGrid>).
Beri nama sumber data yang dapat dikueri untuk kisi. Gunakan salah satu sumber data berikut:
- Items: Nullable IQueryable<TGridItem>, di mana TGridItem adalah jenis data yang diwakili oleh setiap baris dalam kisi.
- ItemsProvider: Panggilan balik yang menyediakan data untuk kisi.
Class: Nama kelas CSS opsional. Jika disediakan, nama kelas disertakan dalam class atribut tabel yang dirender.
Theme: Nama tema (nilai default: default). Ini memengaruhi aturan gaya mana yang cocok dengan tabel.
Virtualize: Jika true, kisi dirender dengan virtualisasi. Ini biasanya digunakan bersama dengan pengguliran dan menyebabkan kisi mengambil dan merender hanya data di sekitar viewport gulir saat ini. Ini dapat sangat meningkatkan performa saat menggulir kumpulan data besar. Jika Anda menggunakan Virtualize, Anda harus menyediakan nilai untuk ItemSize dan harus memastikan bahwa setiap baris dirender dengan tinggi konstan. Umumnya, lebih baik tidak digunakan Virtualize jika jumlah data yang dirender kecil atau jika Anda menggunakan penomoran halaman.
ItemSize: Hanya berlaku saat menggunakan Virtualize. ItemSize menentukan tinggi yang diharapkan dalam piksel untuk setiap baris, memungkinkan mekanisme virtualisasi untuk mengambil jumlah item yang benar agar sesuai dengan ukuran tampilan dan untuk memastikan pengguliran yang akurat.
ItemKey: Secara opsional mendefinisikan nilai untuk @key pada setiap baris yang dirender. Biasanya, ini digunakan untuk menentukan pengidentifikasi unik, seperti nilai kunci utama, untuk setiap item data. Ini memungkinkan kisi untuk mempertahankan hubungan antara elemen baris dan item data berdasarkan pengidentifikasi uniknya, bahkan ketika TGridItem instans digantikan oleh salinan baru (misalnya, setelah kueri baru terhadap penyimpanan data yang mendasarinya). Jika tidak diatur, @key adalah TGridItem instansnya.
Pagination: Secara opsional menautkan instans ini TGridItem dengan PaginationState model, menyebabkan kisi mengambil dan merender hanya halaman data saat ini. Ini biasanya digunakan bersama dengan Paginator komponen atau beberapa logika UI lain yang menampilkan dan memperbarui instans yang disediakan PaginationState .
QuickGrid Dalam konten anak (RenderFragment), tentukan PropertyColumn<TGridItem,TProp>s, yang mewakili TGridItem kolom yang selnya menampilkan nilai:
- Property: Menentukan nilai yang akan ditampilkan dalam sel kolom ini.
- Format: Secara opsional menentukan string format untuk nilai . Menggunakan Format memerlukan TProp jenis untuk mengimplementasikan IFormattable.
- Sortable: Menunjukkan apakah data harus dapat diurutkan berdasarkan kolom ini. Nilai default dapat bervariasi sesuai dengan jenis kolom. Misalnya, TemplateColumn<TGridItem> diurutkan jika ada SortBy parameter yang ditentukan.
- InitialSortDirection: Menunjukkan arah pengurutan jika IsDefaultSortColumn adalah true.
- IsDefaultSortColumn: Menunjukkan apakah kolom ini harus diurutkan secara default.
- PlaceholderTemplate: Jika ditentukan, kisi virtual menggunakan templat ini untuk merender sel yang datanya belum dimuat.
- HeaderTemplate: Templat opsional untuk sel header kolom ini. Jika tidak ditentukan, templat header default menyertakan Title, bersama dengan indikator pengurutan dan tombol opsi yang berlaku.
- Title: Teks judul untuk kolom. Judul dirender secara otomatis jika HeaderTemplate tidak digunakan.

Misalnya, tambahkan komponen berikut untuk merender kisi.

Untuk Blazor Web Appitu, QuickGrid komponen harus mengadopsi mode render interaktif untuk mengaktifkan fitur interaktif, seperti penomoran dan pengurutan.

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

Akses komponen di browser di jalur /promotion-gridrelatif .

Tidak ada rencana saat ini untuk diperluas QuickGrid dengan fitur yang cenderung ditawarkan kisi komersial lengkap, misalnya, baris hierarkis, kolom seret-ke-urutkan ulang, atau pilihan rentang seperti Excel. Jika Anda memerlukan fitur lanjutan yang tidak ingin Anda kembangkan sendiri, lanjutkan menggunakan kisi pihak ketiga.

Urutkan berdasarkan kolom

Komponen QuickGrid dapat mengurutkan item menurut kolom. Dalam Blazor Web Apphal ini, pengurutan memerlukan komponen untuk mengadopsi mode render interaktif.

Tambahkan Sortable="true" (Sortable) ke PropertyColumn<TGridItem,TProp> tag:

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

Di aplikasi yang sedang berjalan, urutkan QuickGrid kolom dengan memilih judul kolom yang dirender.

Item halaman dengan `Paginator` komponen

Komponen QuickGrid dapat halaman data dari sumber data. Dalam Blazor Web Apphal ini, penomor memerlukan komponen untuk mengadopsi mode render interaktif.

PaginationState Tambahkan instans ke blok komponen@code. Atur ItemsPerPage ke jumlah item yang akan ditampilkan per halaman. Dalam contoh berikut, instans diberi nama pagination, dan sepuluh item per halaman diatur:

PaginationState pagination = new PaginationState { ItemsPerPage = 10 };

Atur QuickGrid properti komponen Pagination ke pagination:

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

Untuk menyediakan UI untuk penomoran halaman, tambahkan Paginator komponen di atas atau di QuickGrid bawah komponen. Atur ke Paginator.State pagination:

<Paginator State="pagination" />

Di aplikasi yang sedang berjalan, halaman melalui item menggunakan komponen yang dirender Paginator .

Atribut dan gaya kustom

QuickGrid juga mendukung meneruskan atribut kustom dan kelas gaya (Class) ke elemen tabel yang dirender:

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

Sumber data Entity Framework Core (EF Core)

Gunakan pola pabrik untuk menyelesaikan EF Core konteks database yang menyediakan data ke QuickGrid komponen. Untuk informasi selengkapnya tentang mengapa pola pabrik direkomendasikan, lihat ASP.NET Core Blazor dengan Entity Framework Core (EF Core).

Pabrik konteks database (IDbContextFactory<TContext>) disuntikkan ke dalam komponen dengan direktif @inject . Pendekatan pabrik memerlukan pembuangan konteks database, sehingga komponen mengimplementasikan IAsyncDisposable antarmuka dengan direktif @implements . Penyedia item untuk QuickGrid komponen adalah yang diperoleh dari konteks database yang DbSet<T> dibuat (CreateDbContext) dari pabrik konteks database yang disuntikkan.

QuickGrid mengenali instans yang disediakan IQueryable EF dan tahu cara mengatasi kueri secara asinkron untuk efisiensi.

Tambahkan referensi paket untuk Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter paket NuGet.

Catatan

Panggil AddQuickGridEntityFrameworkAdapter pengumpulan layanan dalam Program file untuk mendaftarkan implementasi sadar IAsyncQueryExecutor EF:

builder.Services.AddQuickGridEntityFrameworkAdapter();

Contoh berikut menggunakan ExampleTable DbSet<TEntity> (tabel) dari AppDbContext konteks database (context) sebagai sumber data untuk QuickGrid komponen:

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

Di blok kode (@code) dari contoh sebelumnya:

Bidang context menyimpan konteks database, ditik sebagai AppDbContext.
Metode OnInitialized siklus hidup menetapkan konteks database baru (CreateDbContext) ke context bidang dari pabrik yang disuntikkan (DbFactory).
Metode asinkron DisposeAsync membuang konteks database saat komponen dibuang.

Anda juga dapat menggunakan operator LINQ yang didukung EF untuk memfilter data sebelum meneruskannya ke Items parameter .

Contoh berikut memfilter film menurut judul film yang dimasukkan dalam kotak pencarian. Konteks database adalah BlazorWebAppMoviesContext, dan modelnya adalah Movie. Properti film Title digunakan untuk operasi filter.

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

Untuk contoh kerja, lihat sumber daya berikut ini:

Membuat Blazor tutorial aplikasi database film
Blazor aplikasi sampel database film: Pilih folder versi terbaru di repositori. Folder sampel untuk proyek tutorial diberi nama BlazorWebAppMovies.

Dukungan nama tampilan

Judul kolom dapat ditetapkan menggunakan ColumnBase<TGridItem>.Title di PropertyColumn<TGridItem,TProp>tag . Dalam contoh film berikut, kolom diberi nama "Release Date" untuk data tanggal rilis film kolom:

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

Namun, mengelola judul kolom (nama) dari properti model terikat biasanya merupakan pilihan yang lebih baik untuk memelihara aplikasi. Model dapat mengontrol nama tampilan properti dengan [Display] atribut . Dalam contoh berikut, model menentukan nama tampilan tanggal rilis film "Release Date" untuk propertinya ReleaseDate :

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

Untuk mengaktifkan QuickGrid komponen untuk menggunakan DisplayAttribute.Name, subkelas PropertyColumn<TGridItem,TProp> baik di komponen atau di kelas terpisah:

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

Gunakan subkelas dalam QuickGrid komponen. Dalam contoh berikut, sebelumnya DisplayNameColumn digunakan. Nama "Release Date" disediakan oleh [Display] atribut dalam model, jadi tidak perlu menentukan Title:

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

Atribut [DisplayName] ini juga didukung:

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

Namun, [Display] atribut disarankan karena membuat properti tambahan tersedia. Misalnya, [Display] atribut menawarkan kemampuan untuk menetapkan jenis sumber daya untuk pelokalan.

Data jarak jauh

Dalam Blazor WebAssembly aplikasi, mengambil data dari API web berbasis JSON di server adalah persyaratan umum. Untuk mengambil hanya data yang diperlukan untuk halaman/viewport data saat ini dan menerapkan aturan pengurutan atau pemfilteran di server, gunakan ItemsProvider parameter .

ItemsProvider juga dapat digunakan di aplikasi sisi Blazor server jika aplikasi diperlukan untuk mengkueri titik akhir eksternal atau dalam kasus lain di mana persyaratan tidak tercakup oleh IQueryable.

Berikan panggilan balik yang cocok dengan GridItemsProvider<TGridItem> jenis delegasi, di mana TGridItem adalah jenis data yang ditampilkan di kisi. Panggilan balik diberi parameter jenis GridItemsProviderRequest<TGridItem>, yang menentukan indeks mulai, jumlah baris maksimum, dan urutan pengurutan data yang akan dikembalikan. Selain mengembalikan item yang cocok, jumlah item total (totalItemCount) juga diperlukan agar halaman dan virtualisasi berfungsi dengan benar.

Contoh berikut memperoleh data dari database OpenFDA Food Enforcement publik.

mengonversi GridItemsProvider<TGridItem> GridItemsProviderRequest<TGridItem> menjadi kueri terhadap database OpenFDA. Parameter kueri diterjemahkan ke dalam format URL tertentu yang didukung oleh JSON API eksternal. Anda hanya dapat melakukan pengurutan dan pemfilteran melalui pengurutan dan pemfilteran yang didukung oleh API eksternal. Titik akhir OpenFDA tidak mendukung pengurutan, sehingga tidak ada kolom yang ditandai sebagai dapat diurutkan. Namun, ini mendukung melompati rekaman (skip parameter) dan membatasi pengembalian rekaman (limit parameter), sehingga komponen dapat mengaktifkan virtualisasi dan menggulir dengan cepat melalui puluhan ribu rekaman.

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

Untuk informasi selengkapnya tentang memanggil API web, lihat Memanggil API web dari aplikasi ASP.NET CoreBlazor.

`QuickGrid` perancah

Perancah QuickGrid perancah mengacah Razor komponen dengan QuickGrid untuk menampilkan data dari database.

Perancah menghasilkan halaman Buat, Baca, Perbarui, dan Hapus (CRUD) dasar berdasarkan model data Entity Framework Core. Anda dapat membuat perancah halaman individual atau semua halaman CRUD. Anda memilih kelas model dan DbContext, secara opsional membuat baru DbContext jika diperlukan.

Komponen perancah Razor ditambahkan ke proyek dalam folder yang dihasilkan yang dinamai sesuai dengan kelas model. Komponen yang dihasilkan Index menggunakan QuickGrid komponen untuk menampilkan data. Sesuaikan komponen yang dihasilkan sesuai kebutuhan dan aktifkan interaktivitas untuk memanfaatkan fitur interaktif, seperti penomoran, pengurutan, dan pemfilteran .

Komponen yang dihasilkan oleh perancah memerlukan penyajian sisi server (SSR), sehingga tidak didukung saat berjalan di WebAssembly.

Klik kanan pada Components/Pages folder dan pilih Tambahkan>Item Perancah Baru.

Dengan dialog Tambahkan Item Perancah Baru terbuka ke Komponen UmumBlazor>Razor> Terinstal>, pilih Razor Komponen menggunakan Kerangka Kerja Entitas (CRUD). Pilih tombol Tambahkan.

CRUD adalah akronim untuk Buat, Baca, Perbarui, dan Hapus. Perancah menghasilkan komponen buat, edit, hapus, detail, dan indeks untuk aplikasi.

Selesaikan dialog Tambahkan Razor Komponen menggunakan Kerangka Kerja Entitas (CRUD):

Daftar dropdown Templat menyertakan templat lain untuk membuat komponen buat, edit, hapus, detail, dan daftar secara khusus. Daftar dropdown ini berguna ketika Anda hanya perlu membuat jenis komponen tertentu yang di-scaffold ke kelas model. Biarkan daftar dropdown Templat diatur ke CRUD untuk membuat perancah sekumpulan komponen lengkap.
Di daftar dropdown Kelas model, pilih kelas model. Folder dibuat untuk komponen yang dihasilkan dari nama model (jika kelas model diberi nama Movie, folder secara otomatis bernama MoviePages).
Untuk kelas DbContext, pilih konteks database yang ada atau pilih tombol + (tanda plus) dan tambahkan dialog modal Konteks Data untuk menambahkan konteks database baru.
Setelah dialog model ditutup, daftar dropdown Penyedia database default ke SQL Server. Anda dapat memilih penyedia yang sesuai untuk database yang Anda gunakan. Opsinya termasuk SQL Server, SQLite, PostgreSQL, dan Azure Cosmos DB.
Pilih Tambahkan.

Tempelkan semua perintah berikut pada prompt (>) Terminal (menu >Terminal Terminal) yang dibuka ke direktori akar proyek. Saat Anda menempelkan beberapa perintah, muncul peringatan yang menyatakan bahwa beberapa perintah akan dijalankan. Tutup peringatan dan lanjutkan dengan operasi tempel.

Saat Anda menempelkan beberapa perintah, semua perintah dijalankan kecuali perintah terakhir. Perintah terakhir tidak dijalankan hingga Anda menekan Enter pada keyboard.

dotnet tool install --global dotnet-aspnet-codegenerator
dotnet tool install --global dotnet-ef
dotnet add package Microsoft.EntityFrameworkCore.SQLite
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Tools
dotnet add package Microsoft.AspNetCore.Components.QuickGrid
dotnet add package Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter

Penting

Setelah delapan perintah pertama dijalankan, pastikan Anda menekan Enter pada keyboard untuk menjalankan perintah terakhir.

Perintah sebelumnya menambahkan:

Alat antarmuka baris perintah (CLI) untuk EF Core
aspnet-codegenerator alat perancah
Alat waktu desain untuk EF Core
Penyedia SQLite dan SQL Server dengan EF Core paket sebagai dependensi
Microsoft.VisualStudio.Web.CodeGeneration.Design untuk perancah

Di Terminal, jalankan perintah berikut untuk membuat perancah sekumpulan komponen lengkap dengan CRUD templat:

dotnet aspnet-codegenerator blazor CRUD -dbProvider {PROVIDER} -dc {DB CONTEXT CLASS} -m {MODEL} -outDir {PATH}

Catatan

Perintah sebelumnya adalah perintah .NET CLI, dan perintah .NET CLI dijalankan saat dimasukkan pada prompt PowerShell, yang merupakan shell perintah default dari Terminal Visual Studio Code.

Tabel berikut menjelaskan opsi generator kode ASP.NET Core dalam perintah sebelumnya.

Opsi	Placeholder	Deskripsi
`-dbProvider`	`{PROVIDER}`	Penyedia database yang akan digunakan. Opsi termasuk `sqlserver` (default), `sqlite`, `cosmos`, `postgres`.
`-dc`	`{DB CONTEXT CLASS}`	Kelas DbContext yang akan digunakan, termasuk namespace layanan.
`-m`	`{MODEL}`	Nama kelas model.
`-outDir`	`{PATH}`	Direktori output untuk komponen yang dihasilkan. Folder dibuat dari nama model di direktori output untuk menahan komponen (jika kelas model bernama `Movie`, folder secara otomatis diberi nama `MoviePages`). Jalur ini biasanya baik `Components/Pages` untuk atau Blazor Web App `Pages` untuk aplikasi mandiri Blazor WebAssembly .

Untuk opsi penyedia tambahanBlazor, gunakan opsi bantuan .NET CLI (|-h--help):

dotnet aspnet-codegenerator blazor -h

Tempelkan semua perintah berikut pada prompt (>) shell perintah yang dibuka ke direktori akar proyek. Saat Anda menempelkan beberapa perintah, muncul peringatan yang menyatakan bahwa beberapa perintah akan dijalankan. Tutup peringatan dan lanjutkan dengan operasi tempel.

Saat Anda menempelkan beberapa perintah, semua perintah dijalankan kecuali perintah terakhir. Perintah terakhir tidak dijalankan hingga Anda menekan Enter pada keyboard.

dotnet tool install --global dotnet-aspnet-codegenerator
dotnet tool install --global dotnet-ef
dotnet add package Microsoft.EntityFrameworkCore.SQLite
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Tools
dotnet add package Microsoft.AspNetCore.Components.QuickGrid
dotnet add package Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter

Penting

Setelah delapan perintah pertama dijalankan, pastikan Anda menekan Enter pada keyboard untuk menjalankan perintah terakhir.

Perintah sebelumnya menambahkan:

Alat antarmuka baris perintah (CLI) untuk EF Core
aspnet-codegenerator alat perancah
Alat waktu desain untuk EF Core
Penyedia SQLite dan SQL Server dengan EF Core paket sebagai dependensi
Microsoft.VisualStudio.Web.CodeGeneration.Design untuk perancah.

Dalam shell perintah, jalankan perintah berikut untuk membuat perancah sekumpulan komponen lengkap dengan CRUD templat:

dotnet aspnet-codegenerator blazor CRUD -dbProvider {PROVIDER} -dc {DB CONTEXT CLASS} -m {MODEL} -outDir {PATH}

Tabel berikut menjelaskan opsi generator kode ASP.NET Core dalam perintah sebelumnya.

Opsi	Placeholder	Deskripsi
`-dbProvider`	`{PROVIDER}`	Penyedia database yang akan digunakan. Opsi termasuk `sqlserver` (default), `sqlite`, `cosmos`, `postgres`.
`-dc`	`{DB CONTEXT CLASS}`	Kelas DbContext yang akan digunakan, termasuk namespace layanan.
`-m`	`{MODEL}`	Nama kelas model.
`-outDir`	`{PATH}`	Direktori output untuk komponen yang dihasilkan. Folder dibuat dari nama model di direktori output untuk menahan komponen (jika kelas model bernama `Movie`, folder secara otomatis diberi nama `MoviePages`). Jalur ini biasanya baik `Components/Pages` untuk atau Blazor Web App `Pages` untuk aplikasi mandiri Blazor WebAssembly .

Untuk opsi penyedia tambahanBlazor, gunakan opsi bantuan .NET CLI (|-h--help):

dotnet aspnet-codegenerator blazor -h

Untuk contoh penggunaan QuickGrid perancah, lihat Membuat Blazor aplikasi database film (Gambaran Umum).

Bagikan melalui

komponen ASP.NET Core Blazor`QuickGrid`

Paket

Aplikasi sampel

`QuickGrid` pelaksanaan

Urutkan berdasarkan kolom

Item halaman dengan `Paginator` komponen

Atribut dan gaya kustom

Sumber data Entity Framework Core (EF Core)

Dukungan nama tampilan

Data jarak jauh

`QuickGrid` perancah

Sumber Daya Tambahan:

Bagikan melalui

komponen ASP.NET Core BlazorQuickGrid

Paket

Aplikasi sampel

QuickGrid pelaksanaan

Urutkan berdasarkan kolom

Item halaman dengan Paginator komponen

Atribut dan gaya kustom

Sumber data Entity Framework Core (EF Core)

Dukungan nama tampilan

Data jarak jauh

QuickGrid perancah

Sumber Daya Tambahan:

komponen ASP.NET Core Blazor`QuickGrid`

`QuickGrid` pelaksanaan

Item halaman dengan `Paginator` komponen

`QuickGrid` perancah