ASP.NET Core Blazor`QuickGrid` bileşeni

Not

Bu, bu makalenin en son sürümü değildir. Geçerli sürüm için bu makalenin .NET 10 sürümüne bakın.

QuickGrid bileşeni, verileri tablo biçiminde hızlı ve verimli bir şekilde görüntülemek için Razor bir bileşendir. QuickGrid yaygın kılavuz işleme senaryoları için basit ve kullanışlı bir veri kılavuzu bileşeni sağlar ve veri kılavuzu bileşenleri oluşturmak için bir başvuru mimarisi ve performans temeli görevi görür. QuickGrid yüksek düzeyde iyileştirilmiştir ve en iyi işleme performansını elde etmek için gelişmiş teknikler kullanır.

Paket

Microsoft.AspNetCore.Components.QuickGrid paketi için bir paket başvurusu ekleyin.

Not

.NET uygulamalarına paket ekleme hakkında yönergeler için, Paket tüketimi iş akışında (NuGet belgeleri)paketleri yüklemek ve yönetmek altındaki makalelere bakın. NuGet.org'da doğru paket sürümlerini onaylayın.

Örnek uygulama

Çeşitli QuickGrid gösterimleri için ,,QuickGrid'teki Blazor örnek uygulama'ya bakın. Tanıtım sitesi GitHub Sayfalarında barındırılır. Topluluk tarafından korunan BlazorWasmPrerendering.Build GitHub projesini kullanarak statik ön kayıt sayesinde site hızla yüklenir.

QuickGrid uygulama

Bir QuickGrid bileşeni uygulamak için:

QuickGrid işaretlemesindeki Razor bileşeni için etiketleri belirtin (<QuickGrid>...</QuickGrid>).
Izgara için sorgulanabilir bir veri kaynağı adlandırın. Aşağıdaki veri kaynaklarından birini kullanın:
- Items: Boş değere atanabilir IQueryable<TGridItem>, burada TGridItem tablodaki her satır tarafından temsil edilen veri türüdür.
- ItemsProvider: Kılavuz için veri sağlayan bir çağrı.
Class: İsteğe bağlı bir CSS sınıf adı. Sağlanırsa, sınıf adı işlenen tablonun özniteliğine eklenir class .
Theme: Tema adı (varsayılan değer: default). Bu, hangi stil kurallarının tabloyla eşleştiğini etkiler.
Virtualize: Eğer 'true' ise, kılavuz sanallaştırma ile render edilir. Bu genellikle kaydırma ile birlikte kullanılır ve kılavuzun sadece mevcut kaydırma alanı etrafındaki verileri getirmesine ve işlemesine neden olur. Bu, büyük veri kümelerini kaydırırken performansı büyük ölçüde iyileştirebilir. "Eğer Virtualize kullanıyorsanız, ItemSize için bir değer sağlamalı ve her satırın sabit bir yükseklikle işlenmesini sağlamalısınız." Genel olarak, işlenen veri miktarı küçükse veya sayfalandırma kullanıyorsanız kullanılmaması Virtualize tercih edilir.
ItemSize: Sadece Virtualize kullanırken geçerlidir. ItemSize her satır için beklenen yüksekliği piksel cinsinden tanımlar ve sanallaştırma mekanizmasının görüntü boyutuyla eşleşecek doğru öğe sayısını getirmesine ve doğru kaydırmayı sağlamasına olanak sağlar.
ItemKey: İsteğe bağlı olarak her işlenen satırda @key için bir değer tanımlar. Bu genellikle her veri öğesi için birincil anahtar değeri gibi benzersiz bir tanımlayıcı belirtmek için kullanılır. Bu, TGridItem örneklerinin yeni kopyalarla değiştirilse bile (örneğin, temel alınan veri deposuna yönelik yeni bir sorgudan sonra), kılavuzun benzersiz tanımlayıcılarına göre satır öğeleri ve veri öğeleri arasındaki ilişkiyi korumasını sağlar. Ayarlanmadıysa, @key örneğidir TGridItem .
OverscanCount: Kaydırma sırasında işleme sıklığını azaltmak için görünür bölgeden önce ve sonra işlenmesi gereken ek öğe sayısını tanımlar. Daha yüksek değerler daha fazla öğeyi ekran dışında işleyerek kaydırma düzgünlüğünü geliştirebilirken, daha yüksek bir değer de ilk yükleme sürelerinde artışa neden olabilir. Veri kümesi boyutunuz ve kullanıcı deneyimi gereksinimlerinize göre bir bakiye bulmanız önerilir. Varsayılan değer 3'tür. Virtualize kullanılırken yalnızca kullanılabilir.
Pagination: İsteğe bağlı olarak bu TGridItem örneği bir PaginationState modelle ilişkilendirerek ızgaranın yalnızca geçerli veri sayfasını getirmesini ve işlemesini sağlar. Bu normalde sağlanan Paginator örneği görüntüleyen ve güncelleştiren bir bileşen veya başka bir PaginationState kullanıcı arabirimi mantığıyla birlikte kullanılır.
Alt içerikteki QuickGrid (RenderFragment) öğesinde, hücreleri değerleri görüntüleyen sütunları temsil eden PropertyColumn<TGridItem,TProp> sütununu belirtin TGridItem:
- Property: Bu sütunun hücrelerinde görüntülenecek değeri tanımlar.
- Format: İsteğe bağlı olarak değer için bir biçim dizesi belirtir. Format kullanmak için TProp türünün IFormattable'yi uygulaması gerekir.
- Sortable: Verilerin bu sütuna göre sıralanabilir olup olmayacağını gösterir. Varsayılan değer sütun türüne göre değişebilir. Örneğin, herhangi bir TemplateColumn<TGridItem> parametresi belirtildiğinde bir SortBy sıralanır.
- Eğer InitialSortDirection IsDefaultSortColumn ise, true sıralama yönünü gösterir.
- IsDefaultSortColumn: Bu sütunun varsayılan olarak sıralanıp sıralanmayacağını gösterir.
- PlaceholderTemplate: Belirtilirse, sanallaştırılmış kılavuzlar verisi yüklenmemiş hücreleri göstermek için bu şablonu kullanır.
- HeaderTemplate: Bu sütunun üst bilgi hücresi için isteğe bağlı bir şablon. Belirtilmezse, varsayılan üst bilgi şablonu, ilgili sıralama göstergeleri ve seçenekler düğmeleriyle birlikte öğesini içerir Title.
- Title: Sütun başlığı metni. HeaderTemplate kullanılmazsa başlık otomatik olarak işlenir.

QuickGrid işaretlemesindeki Razor bileşeni için etiketleri belirtin (<QuickGrid>...</QuickGrid>).
Izgara için sorgulanabilir bir veri kaynağı adlandırın. Aşağıdaki veri kaynaklarından birini kullanın:
- Items: Boş değere atanabilir IQueryable<TGridItem>, burada TGridItem tablodaki her satır tarafından temsil edilen veri türüdür.
- ItemsProvider: Kılavuz için veri sağlayan bir çağrı.
Class: İsteğe bağlı bir CSS sınıf adı. Sağlanırsa, sınıf adı işlenen tablonun özniteliğine eklenir class .
Theme: Tema adı (varsayılan değer: default). Bu, hangi stil kurallarının tabloyla eşleştiğini etkiler.
Virtualize: Eğer 'true' ise, kılavuz sanallaştırma ile render edilir. Bu genellikle kaydırma ile birlikte kullanılır ve kılavuzun sadece mevcut kaydırma alanı etrafındaki verileri getirmesine ve işlemesine neden olur. Bu, büyük veri kümelerini kaydırırken performansı büyük ölçüde iyileştirebilir. "Eğer Virtualize kullanıyorsanız, ItemSize için bir değer sağlamalı ve her satırın sabit bir yükseklikle işlenmesini sağlamalısınız." Genel olarak, işlenen veri miktarı küçükse veya sayfalandırma kullanıyorsanız kullanılmaması Virtualize tercih edilir.
ItemSize: Sadece Virtualize kullanırken geçerlidir. ItemSize her satır için beklenen yüksekliği piksel cinsinden tanımlar ve sanallaştırma mekanizmasının görüntü boyutuyla eşleşecek doğru öğe sayısını getirmesine ve doğru kaydırmayı sağlamasına olanak sağlar.
ItemKey: İsteğe bağlı olarak her işlenen satırda @key için bir değer tanımlar. Bu genellikle her veri öğesi için birincil anahtar değeri gibi benzersiz bir tanımlayıcı belirtmek için kullanılır. Bu, TGridItem örneklerinin yeni kopyalarla değiştirilse bile (örneğin, temel alınan veri deposuna yönelik yeni bir sorgudan sonra), kılavuzun benzersiz tanımlayıcılarına göre satır öğeleri ve veri öğeleri arasındaki ilişkiyi korumasını sağlar. Ayarlanmadıysa, @key örneğidir TGridItem .
Pagination: İsteğe bağlı olarak bu TGridItem örneği bir PaginationState modelle ilişkilendirerek ızgaranın yalnızca geçerli veri sayfasını getirmesini ve işlemesini sağlar. Bu normalde sağlanan Paginator örneği görüntüleyen ve güncelleştiren bir bileşen veya başka bir PaginationState kullanıcı arabirimi mantığıyla birlikte kullanılır.
Alt içerikteki QuickGrid (RenderFragment) öğesinde, hücreleri değerleri görüntüleyen sütunları temsil eden PropertyColumn<TGridItem,TProp> sütununu belirtin TGridItem:
- Property: Bu sütunun hücrelerinde görüntülenecek değeri tanımlar.
- Format: İsteğe bağlı olarak değer için bir biçim dizesi belirtir. Format kullanmak için TProp türünün IFormattable'yi uygulaması gerekir.
- Sortable: Verilerin bu sütuna göre sıralanabilir olup olmayacağını gösterir. Varsayılan değer sütun türüne göre değişebilir. Örneğin, herhangi bir TemplateColumn<TGridItem> parametresi belirtildiğinde bir SortBy sıralanır.
- Eğer InitialSortDirection IsDefaultSortColumn ise, true sıralama yönünü gösterir.
- IsDefaultSortColumn: Bu sütunun varsayılan olarak sıralanıp sıralanmayacağını gösterir.
- PlaceholderTemplate: Belirtilirse, sanallaştırılmış kılavuzlar verisi yüklenmemiş hücreleri göstermek için bu şablonu kullanır.
- HeaderTemplate: Bu sütunun üst bilgi hücresi için isteğe bağlı bir şablon. Belirtilmezse, varsayılan üst bilgi şablonu, ilgili sıralama göstergeleri ve seçenekler düğmeleriyle birlikte öğesini içerir Title.
- Title: Sütun başlığı metni. HeaderTemplate kullanılmazsa başlık otomatik olarak işlenir.

Örneğin, bir ızgara oluşturmak için aşağıdaki bileşeni ekleyin.

Blazor Web App ögeleri için, QuickGrid bileşeni, sayfalama ve sıralama gibi etkileşimli özellikleri etkinleştirmek amacıyla etkileşimli işleme modunu benimsemelidir.

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

Göreli yolda /promotion-grid bir tarayıcıda bileşene erişin.

Tam kapsamlı ticari ızgaraların sunduğu, örneğin hiyerarşik satırlar, sürüklenerek sıralanabilen sütunlar veya Excel benzeri aralık seçimleri gibi özelliklerle QuickGrid genişletilmesine yönelik şu an için bir plan bulunmamaktadır. Kendi başınıza geliştirmek istemediğiniz gelişmiş özelliklere ihtiyacınız varsa üçüncü taraf kılavuzları kullanmaya devam edin.

Sütuna göre verileri sırala

Bileşen öğeleri QuickGrid sütunlara göre sıralayabilir. s'de Blazor Web Appsıralama, bileşenin etkileşimli bir işleme modunu benimsemesini gerektirir.

Etikete Sortable="true" (Sortable) ekleyin PropertyColumn<TGridItem,TProp> :

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

Çalışan uygulama içerisinde, görüntülenen sütun başlığını seçerek QuickGrid sütununu sıralayın.

`Paginator` bileşeni içeren sayfa öğeleri

Bileşen, QuickGrid veri kaynağındaki verileri sayfalayabilir. Blazor Web App'da sayfalama, bileşenin etkileşimli bir işleme modunu benimsemesini gerektirir.

Bileşenin PaginationState bloğuna bir @code örnek ekleyin. ItemsPerPage değerini sayfa başına görüntülenecek öğe sayısına ayarlayın. Aşağıdaki örnekte örnek olarak adlandırılır paginationve sayfa başına on öğe ayarlanır:

PaginationState pagination = new PaginationState { ItemsPerPage = 10 };

Bileşenin QuickGridPagination özelliğini pagination olarak ayarlayın.

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

Sayfalandırma için kullanıcı arabirimi sağlamak için bileşenin Paginator üstüne veya altına bir QuickGrid bileşen ekleyin. değerini Paginator.State olarak paginationayarlayın:

<Paginator State="pagination" />

Çalışan uygulamada, işlenmiş olan Paginator bileşenini kullanarak öğeler arasında sayfalar gezinin.

QuickGrid, bir Paginator bileşeniyle kullanıldığında verilerin son sayfasını doldurmak için ek boş satırlar oluşturur. .NET 9 veya sonraki sürümlerinde boş satırlara boş veri hücreleri (<td></td>) eklenir. Boş satırlar, QuickGrid'un tüm sayfalarda sabit satır yüksekliği ve stil ile işlenmesini kolaylaştırmak için tasarlanmıştır.

Satır stillerini uygulama

Satırlara CSS yalıtım kullanarak stiller uygulayın; bu, QuickGrid bileşeni ile sayfa verilerini işleyen Paginator bileşenleri için boş satırların stilini de içerebilir.

QuickGrid bileşenini sarmalayıcı bir blok öğesine, örneğin bir <div>içine sarın:

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

::deep sahte öğeile bir satır stili uygulayın. Aşağıdaki örnekte, boş veri satırları dahil olmak üzere satır yüksekliği 2emolarak ayarlanmıştır.

{COMPONENT}.razor.css:

::deep tr {
    height: 2em;
}

Alternatif olarak, aşağıdaki CSS stil yaklaşımını kullanın:

Verilerle doldurulmuş satır hücrelerini görüntüleme.
Boş satır hücrelerini görüntülemeyin; bu, Bootstrap stiline göre boş satır hücresi kenarlıklarının işlenmesini önler.

{COMPONENT}.razor.css:

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

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

CSS izolasyonu ile ::deeppseudo-öğeleri kullanma hakkında daha fazla bilgi için bkz. ASP.NET Core Blazor CSS izolasyonu.

Özel öznitelikler ve stiller

QuickGrid, işlenen tablo öğesine özel özniteliklerin ve stil sınıflarının (Class) geçirilmesini de destekler:

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

Satır öğesine göre bir tablo satırını biçimlendirme

RowClass parametresini kullanarak ızgaradaki bir satıra, satır öğesine bağlı olarak stil sınıfı uygulayın.

Aşağıdaki örnekte:

Satır öğesi, Personkaydıile temsil edilir. Person kaydı bir FirstName özelliği içerir.
GetRowCssClass yöntemi, highlight-row sınıf stillerini, kişinin adının "Julie. " olduğu herhangi bir satıra uygular.

<QuickGrid ... RowClass="GetRowCssClass">
    ...
</QuickGrid>

@code {
    private record Person(int PersonId, string FirstName, string LastName);

    private string GetRowCssClass(Person person) =>
        person.FirstName == "Julie" ? "highlight-row" : null;
}

`QuickGrid` sütun seçeneklerini kapatma

QuickGrid yöntemiyle HideColumnOptionsAsync sütun seçenekleri kullanıcı arabirimini kapatın.

Aşağıdaki örnek, başlık filtresi uygulanır uygulanmaz sütun seçenekleri kullanıcı arabirimini kapatır:

<QuickGrid @ref="movieGrid" Items="movies">
    <PropertyColumn Property="@(m => m.Title)" Title="Title">
        <ColumnOptions>
            <input type="search" @bind="titleFilter" placeholder="Filter by title" 
                @bind:after="@(() => movieGrid.HideColumnOptionsAsync())" />
        </ColumnOptions>
    </PropertyColumn>
    <PropertyColumn Property="@(m => m.Genre)" Title="Genre" />
    <PropertyColumn Property="@(m => m.ReleaseYear)" Title="Release Year" />
</QuickGrid>

@code {
    private QuickGrid<Movie>? movieGrid;
    private string titleFilter = string.Empty;
    private IQueryable<Movie> movies = new List<Movie> { ... }.AsQueryable();
    private IQueryable<Movie> filteredMovies => 
        movies.Where(m => m.Title!.Contains(titleFilter));
}

Entity Framework Core (EF Core) veri kaynağı

Bir EF Core veritabanı bağlamını ve bu bağlamın bir QuickGrid bileşene veri sağlamasını çözmek için fabrika desenini kullanın. Fabrika deseninin neden önerildiği hakkında daha fazla bilgi için ASP.NET CoreBlazor ile Entity Framework CoreEF Core bölümüne bakınız.

Bir veritabanı bağlamı fabrikası (IDbContextFactory<TContext>), @inject yönergesi kullanılarak bileşene enjekte edilir. Fabrika yaklaşımında veritabanı bağlamının ortadan kaldırılması gerekir, bu nedenle bileşen, IAsyncDisposable arabirimini @implements yönergesiyle uygular. Bileşen için QuickGrid öğe sağlayıcısı, enjekte edilen veritabanı bağlamı fabrikasının oluşturulan veritabanı bağlamından (DbSet<T>) elde edilen bir CreateDbContext'tir.

QuickGrid EF tarafından sağlanan IQueryable örneklerini tanır ve verimlilik için sorguları zaman uyumsuz olarak çözümlemeyi bilir.

Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter NuGet paketi için bir paket başvurusu ekleyin.

Not

EF ile uyumlu bir AddQuickGridEntityFrameworkAdapter uygulamasını kaydettirmek için Program dosyasındaki hizmet koleksiyonunu IAsyncQueryExecutor çağırın:

builder.Services.AddQuickGridEntityFrameworkAdapter();

Aşağıdaki örnek, bir ExampleTable veritabanı bağlamından (DbSet<TEntity>) bir AppDbContextcontext (tablo) kullanarak bir QuickGrid bileşeni için veri kaynağı olarak kullanır:

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

Önceki örneğin kod bloğunda (@code):

context alanı, veritabanı bağlamını tutar ve AppDbContext tipi olarak yazılır.
Yaşam döngüsü OnInitialized yöntemi, enjekte edilen fabrikadan (CreateDbContext), context alanına yeni bir veritabanı bağlamı (DbFactory) atar.
Zaman uyumsuz DisposeAsync yöntem, bileşen atıldığında veritabanı bağlamını kapatır.

Verileri Items parametresine geçirmeden önce filtrelemek için EF destekli herhangi bir LINQ işleci de kullanabilirsiniz.

Aşağıdaki örnek, filmleri arama kutusuna girilen film başlığına göre filtreler. Veritabanı bağlamı BlazorWebAppMoviesContext, model ise Movie. Filtre işlemi için filmin Title özelliği kullanılır.

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

Çalışan bir örnek için aşağıdaki kaynaklara bakın:

Blazor Film veritabanı uygulaması oluşturma öğreticisi
Blazor film veritabanı örnek uygulaması: Depodaki en son sürüm klasörünü seçin. Öğretici projesinin örnek klasörünün adı BlazorWebAppMovies'dir.

Görünen ad desteği

ColumnBase<TGridItem>.Title etiketinde PropertyColumn<TGridItem,TProp> kullanılarak bir sütun başlığı atanabilir. Aşağıdaki film örneğinde sütuna, sütunun film yayın tarihi verileri için "Release Date" adı verilir:

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

Ancak, sütun başlıklarını (adları) bağlı model özelliklerinden yönetmek, genellikle bir uygulamanın bakımı için daha iyi bir seçimdir. Bir model, [Display] özniteliğiyle bir özelliğin görünen adını denetleyebilir. Aşağıdaki örnekte model, Release Date özelliği için "ReleaseDate" film yayın tarihi görünen adını belirtir.

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

QuickGrid bileşeninin DisplayAttribute.Name özelliğini kullanabilmesi için, ya bileşen içinde ya da ayrı bir sınıfta PropertyColumn<TGridItem,TProp>'yi alt sınıf olarak oluşturun. Yerelleştirilmemiş bir GetName (DisplayAttribute.Name) değeri sahip değilse, yerelleştirilmiş DisplayName değerini döndürmek için [DisplayName] yöntemini çağırın.

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>().GetName() ??
                memberInfo.Name;
        }

        base.OnParametersSet();
    }
}

Bileşeninde QuickGrid alt sınıfı kullanın. Aşağıdaki örnekte, önceki DisplayNameColumn kullanılmıştır. "Release Date" adı modeldeki [Display] özniteliği tarafından sağlanır, bu nedenle belirtmek Titlegerekmez:

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

[DisplayName] Özniteliği de desteklenir:

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

Ancak, [Display] ek özellikleri kullanılabilir hale getirdiğinden özniteliği önerilir. Örneğin, [Display] özniteliği yerelleştirme için bir kaynak türü atama olanağı sunar.

Uzak veriler

Uygulamalarda Blazor WebAssembly , bir sunucudaki JSON tabanlı web API'sinden veri getirmek yaygın bir gereksinimdir. Yalnızca geçerli veri sayfası/görünüm penceresi için gereken verileri getirmek ve sunucuya sıralama veya filtreleme kuralları uygulamak için parametresini ItemsProvider kullanın.

ItemsProvider, uygulamanın dış uç noktayı sorgulaması gerekiyorsa veya gereksinimlerin bir kapsamında Blazorolmadığı diğer durumlarda sunucu tarafı IQueryable uygulamasında da kullanılabilir.

GridItemsProvider<TGridItem> temsilci türüyle eşleşen bir geri çağrı sağlayın; burada TGridItem kılavuzda görüntülenen veri türüdür. Geri çağırmaya başlangıç dizinini, maksimum satır sayısını ve döndürülecek veri sıralama düzenini belirten türünde GridItemsProviderRequest<TGridItem>bir parametre verilir. Eşleşen öğeleri döndürmeye ek olarak, sayfalama ve sanallaştırmanın düzgün çalışması için toplam öğe sayısı (totalItemCount) da gereklidir.

Aşağıdaki örnek, genel OpenFDA Gıda Uygulama veritabanından veri alır.

GridItemsProvider<TGridItem> öğesini, GridItemsProviderRequest<TGridItem> verisini OpenFDA veritabanına yönelik bir sorguya dönüştürür. Sorgu parametreleri, dış JSON API'si tarafından desteklenen belirli BIR URL biçimine çevrilir. Yalnızca dış API tarafından desteklenen sıralama ve filtreleme yoluyla sıralama ve filtreleme gerçekleştirmek mümkündür. OpenFDA uç noktası sıralamayı desteklemediğinden sütunların hiçbiri sıralanabilir olarak işaretlenmez. Ancak, kayıtların atlanması (skip parametre) ve kayıtların döndürülmesi (limit parametre) sınırlandırma desteği sağlar, böylece bileşen sanallaştırmayı etkinleştirebilir ve on binlerce kayıt arasında hızla gezinebilir.

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

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

Web API'lerini çağırma hakkında daha fazla bilgi için bkz . ASP.NET Core Blazor uygulamasından web API'sini çağırma.

QuickGrid iskeleci

QuickGrid iskeleti, Razor ile QuickGrid bileşenlerini bir veritabanındaki verileri görüntülemek için iskeleler.

yapı iskelesi, Entity Framework Core veri modelini temel alan temel Oluşturma, Okuma, Güncelleştirme ve Silme (CRUD) sayfaları oluşturur. Bireysel sayfaların veya TÜM CRUD sayfalarının iskeletini oluşturabilirsiniz. Model sınıfını ve DbContext öğesini seçer, isteğe bağlı olarak gerekirse yeni bir DbContext oluşturursunuz.

İskele kurulmuş Razor bileşenler, model sınıfının adıyla adlandırılan ve proje yapısında oluşturulan bir klasöre eklenir. Oluşturulan Index bileşen, verileri görüntülemek için bir QuickGrid bileşen kullanır. Oluşturulan bileşenleri gerektiği gibi özelleştirin ve sayfalama, sıralama ve filtreleme gibi etkileşimli özelliklerden yararlanmak için etkileşimi etkinleştirin.

yapı iskelesi tarafından üretilen bileşenler sunucu tarafı işleme (SSR) gerektirir, bu nedenle WebAssembly üzerinde çalışırken desteklenmez.

Klasöre Components/Pages sağ tıklayın ve Ekle>Yeni Skelet Strüktüreli Öğe'yi seçin.

Yeni İskele Öğesi Ekle iletişim kutusu Yüklü>Ortak>Blazor>Razor Bileşen olarak açıkken, Razor Entity Framework (CRUD) bileşenlerini seçin. Ekle düğmesini seçin.

CRUD , Oluşturma, Okuma, Güncelleştirme ve Silme kısaltmasıdır. Skeletor, uygulama için bileşenlerin oluşturulmasını, düzenlenmesini, silinmesini, ayrıntılandırılmasını ve dizinlenmesini sağlar.

Razor iletişim kutusunu tamamlayın:

Şablon açılan listesi özellikle oluşturma, düzenleme, silme, ayrıntılar ve liste bileşenleri oluşturmaya yönelik diğer şablonları içerir. Bu açılan liste, yalnızca model sınıfına yönelik bir bileşen türü iskeleti oluşturmanız gerektiğinde kullanışlıdır. Şablon açılır listesini tam bir bileşen kümesi oluşturmak için CRUD olarak bırakın.
Model sınıfı açılan listesinde model sınıfını seçin. Oluşturulan bileşenler için model adından bir klasör oluşturulur (model sınıfı olarak adlandırılırsa Movie, klasör otomatik olarak olarak adlandırılır MoviePages).
DbContext sınıfıiçin aşağıdaki yaklaşımlardan birini uygulayın:
- Fabrika sağlayıcısı kaydı olduğunu bildiğiniz mevcut bir DbContext sınıfını seçin (AddDbContextFactory).
- + (artı işareti) düğmesini seçin ve Veri Bağlamı Ekle modal iletişim kutusunu kullanarak, bağlam türünü doğrudan hizmet kaydı olarak kullanmak yerine bir fabrika sağlayıcısına kaydedecek yeni bir DbContext sınıf adı girin.
Model iletişim kutusu kapatıldıktan sonra, Veritabanı sağlayıcısı açılır listesi varsayılan olarak 'SQL Server' olur. Kullandığınız veritabanı için uygun sağlayıcıyı seçebilirsiniz. Seçenekler arasında SQL Server, SQLite, PostgreSQL ve Azure Cosmos DB yer alır.
Ekle'yi seçin.

Aşağıdaki komutların tümünü projenin kök dizinine açılan Terminal (Terminal menüsü >Yeni Terminal) istemine (>) yapıştırın. Birden çok komut yapıştırdığınızda, birden çok komutun yürütüleceğini belirten bir uyarı görüntülenir. Uyarıyı kapatıp yapıştırma işlemine devam edin.

Birden çok komut yapıştırdığınızda, son komut dışındaki tüm komutlar yürütülür. Klavyede Enter tuşuna basana kadar son komut yürütülmüyor.

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

Önemli

İlk sekiz komut yürütülürken, son komutu yürütmek için klavyede Enter tuşuna bastığınıza emin olun.

Yukarıdaki komutlar aşağıdakileri ekler:

için komut satırı arabirimi (CLI) araçları EF Core
aspnet-codegenerator iskele aracı
EF Core için tasarım zamanı araçları
Bağımlılık olarak EF Core paketini içeren SQLite ve SQL Server sağlayıcıları
Microsoft.VisualStudio.Web.CodeGeneration.Design yapı iskelesi için

Terminalde aşağıdaki komutu yürüterek şablonunu kullanarak eksiksiz bir bileşen setinin temel yapısını oluşturun.

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

Not

Yukarıdaki komut bir .NET CLI komutudur ve .NET CLI komutları, VS Code Terminali'nin varsayılan komut kabuğu olan bir PowerShell istemine girildiğinde yürütülür.

Aşağıdaki tabloda, önceki komuttaki ASP.NET Core kod oluşturucu seçenekleri açıklanmaktadır.

Seçenek	Yer tutucu	Açıklama
`-dbProvider`	`{PROVIDER}`	Kullanılacak veritabanı sağlayıcısı. Seçenekler arasında `sqlserver` (varsayılan), `sqlite`, `cosmos`, `postgres`.
`-dc`	`{DB CONTEXT CLASS}`	Ad alanı dahil olmak üzere kullanılacak DbContext sınıfı. Bir DbContext sınıfının uygulamanın hizmetlerinde bir fabrika sağlayıcısıyla (AddDbContextFactory) kayıtlı olduğundan emin olmak için, fabrika sağlayıcısı kaydı olduğunu bildiğiniz mevcut bir DbContext sınıfı kullanın veya yeni bir DbContext sınıfı sağlayın.
`-m`	`{MODEL}`	Model sınıfının adı.
`-outDir`	`{PATH}`	Oluşturulan bileşenler için çıkış dizini. Bileşenleri tutmak için çıkış dizinindeki model adından bir klasör oluşturulur (model sınıfı olarak adlandırılırsa `Movie`, klasör otomatik olarak adlandırılır `MoviePages`). Yol genellikle ya bir `Components/Pages`Blazor Web App ya da tek başına bir `Pages`Blazor WebAssembly uygulama içindir.

Ek sağlayıcı seçenekleri için Blazor .NET CLI yardım seçeneğini kullanın (-h|--help):

dotnet aspnet-codegenerator blazor -h

Aşağıdaki komutların tümünü projenin kök dizinine açılan bir komut kabuğunun istemine (>) yapıştırın. Birden çok komut yapıştırdığınızda, birden çok komutun yürütüleceğini belirten bir uyarı görüntülenir. Uyarıyı kapatıp yapıştırma işlemine devam edin.

Birden çok komut yapıştırdığınızda, son komut dışındaki tüm komutlar yürütülür. Klavyede Enter tuşuna basana kadar son komut yürütülmüyor.

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

Önemli

İlk sekiz komut yürütülürken, son komutu yürütmek için klavyede Enter tuşuna bastığınıza emin olun.

Yukarıdaki komutlar aşağıdakileri ekler:

için komut satırı arabirimi (CLI) araçları EF Core
aspnet-codegenerator iskele aracı
EF Core için tasarım zamanı araçları
Bağımlılık olarak EF Core paketini içeren SQLite ve SQL Server sağlayıcıları
Microsoft.VisualStudio.Web.CodeGeneration.Design yapı iskelesi için.

Bir komut kabuğunda aşağıdaki komutu çalıştırarak şablon CRUD kullanarak tam bir bileşen kümesi oluşturun.

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

Aşağıdaki tabloda, önceki komuttaki ASP.NET Core kod oluşturucu seçenekleri açıklanmaktadır.

Seçenek	Yer tutucu	Açıklama
`-dbProvider`	`{PROVIDER}`	Kullanılacak veritabanı sağlayıcısı. Seçenekler arasında `sqlserver` (varsayılan), `sqlite`, `cosmos`, `postgres`.
`-dc`	`{DB CONTEXT CLASS}`	Ad alanı dahil olmak üzere kullanılacak DbContext sınıfı. Bir DbContext sınıfının uygulamanın hizmetlerinde bir fabrika sağlayıcısıyla (AddDbContextFactory) kayıtlı olduğundan emin olmak için, fabrika sağlayıcısı kaydı olduğunu bildiğiniz mevcut bir DbContext sınıfı kullanın veya yeni bir DbContext sınıfı sağlayın.
`-m`	`{MODEL}`	Model sınıfının adı.
`-outDir`	`{PATH}`	Oluşturulan bileşenler için çıkış dizini. Bileşenleri tutmak için çıkış dizinindeki model adından bir klasör oluşturulur (model sınıfı olarak adlandırılırsa `Movie`, klasör otomatik olarak adlandırılır `MoviePages`). Yol genellikle ya bir `Components/Pages`Blazor Web App ya da tek başına bir `Pages`Blazor WebAssembly uygulama içindir.

Ek sağlayıcı seçenekleri için Blazor .NET CLI yardım seçeneğini kullanın (-h|--help):

dotnet aspnet-codegenerator blazor -h

QuickGrid iskele oluşturucusunun örnek kullanımı için, Bir Blazor film veritabanı uygulaması oluşturun (Genel Bakış) bölümüne bakın.

Birden çok eşzamanlı EF Core sorgusu, `System.InvalidOperationException`'i tetikler.

Birden çok eşzamanlı EF Core sorgusu aşağıdaki System.InvalidOperationExceptiontetikleyebilir:

System.InvalidOperationException: Önceki bir işlem tamamlanmadan önce bu bağlam örneğinde ikinci bir işlem başlatıldı. Bu durum genellikle aynı DbContext örneğini kullanan farklı iş parçacıklarından kaynaklanır. DbContext ile iş parçacığı oluşturma sorunlarını önleme hakkında daha fazla bilgi için bkz. https://go.microsoft.com/fwlink/?linkid=2097913.

Bu senaryo, ASP.NET Core'un gelecek bir sürümünde iyileştirme için zamanlanmıştır. Daha fazla bilgi için bkz. [Blazor] QuickGrid ve EF Core ile deneyimi geliştirmek için (dotnet/aspnetcore #58716).

Bu arada, iptal belirteci içeren bir ItemsProvider kullanarak sorunu çözebilirsiniz. İptal belirteci, yeni bir istek yayımlandığında önceki isteği iptal ederek eşzamanlı sorguları engeller.

Index öğreticisinin film veritabanı Blazor bileşenini temel alan aşağıdaki örneği göz önünde bulundurun. Makalenin örnek uygulamasıiçinde yapılandırılmış daha basit sürüm görülebilir. Uygulamaya çerçevesi oluşturulmuş Index bileşeni, aşağıdaki bileşenle değiştirilir.

Components/Pages/MoviePages/Index.razor:

@page "/movies"
@rendermode InteractiveServer
@using Microsoft.EntityFrameworkCore
@using Microsoft.AspNetCore.Components.QuickGrid
@using BlazorWebAppMovies.Models
@using BlazorWebAppMovies.Data
@inject IDbContextFactory<BlazorWebAppMovies.Data.BlazorWebAppMoviesContext> DbFactory

<PageTitle>Index</PageTitle>

<h1>Index</h1>

<div>
    <input type="search" @bind="titleFilter" @bind:event="oninput" />
</div>

<p>
    <a href="movies/create">Create New</a>
</p>

<div>
    <QuickGrid Class="table" TGridItem="Movie" ItemsProvider="GetMovies"
            ItemKey="(x => x.Id)" Pagination="pagination">
        <PropertyColumn Property="movie => movie.Title" Sortable="true" />
        <PropertyColumn Property="movie => movie.ReleaseDate" Title="Release Date" />
        <PropertyColumn Property="movie => movie.Genre" />
        <PropertyColumn Property="movie => movie.Price" />
        <PropertyColumn Property="movie => movie.Rating" />

        <TemplateColumn Context="movie">
            <a href="@($"movies/edit?id={movie.Id}")">Edit</a> |
            <a href="@($"movies/details?id={movie.Id}")">Details</a> |
            <a href="@($"movies/delete?id={movie.Id}")">Delete</a>
        </TemplateColumn>
    </QuickGrid>
</div>

<Paginator State="pagination" />

@code {
    private BlazorWebAppMoviesContext context = default!;
    private PaginationState pagination = new PaginationState { ItemsPerPage = 5 };
    private string titleFilter = string.Empty;

    public async ValueTask<GridItemsProviderResult<Movie>> GetMovies(GridItemsProviderRequest<Movie> request)
    {
        using var context = DbFactory.CreateDbContext();
        var totalCount = await context.Movie.CountAsync(request.CancellationToken);
        IQueryable<Movie> query = context.Movie.OrderBy(x => x.Id);
        query = request.ApplySorting(query).Skip(request.StartIndex);

        if (request.Count.HasValue)
        {
            query = query.Take(request.Count.Value);
        }

        var items = await query.ToArrayAsync(request.CancellationToken);

        var result = new GridItemsProviderResult<Movie>
        {
            Items = items,
            TotalItemCount = totalCount
        };

        return result;
    }
}

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2025-11-11