ASP.NET Core BlazorQuickGrid
bileşeni
Bileşen QuickGrid
, verileri tablo biçiminde hızlı ve verimli bir şekilde görüntülemeye yönelik bir Razor 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
Paket için Microsoft.AspNetCore.Components.QuickGrid
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
tanıtımlar için bkz. Örnek uygulama için Blazor QuickGrid. 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:
- İşaretlemeyi ()
<QuickGrid>...</QuickGrid>
bileşenin RazorQuickGrid
etiketlerini belirtin. - Kılavuz için sorgulanabilir bir veri kaynağını adlandırın. Aşağıdaki veri kaynaklarından birini kullanın:
- Items: Null atanabilir
IQueryable<TGridItem>
, buradaTGridItem
kılavuzdaki her satır tarafından temsil edilen veri türüdür. - ItemsProvider: Kılavuz için veri sağlayan bir geri çağırma.
- Items: Null atanabilir
- 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, tabloyla eşleşen stil kurallarını etkiler. - Virtualize: True ise, kılavuz sanallaştırma ile işlenir. Bu normalde kaydırma ile birlikte kullanılır ve kılavuzun yalnızca geçerli kaydırma görünüm penceresi çevresindeki 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. kullanıyorsanız Virtualizeiçin ItemSize bir değer sağlamanız ve her satırın sabit bir yükseklikle işlenmesini sağlamanız gerekir. Genel olarak, işlenen veri miktarı küçükse veya sayfalandırma kullanıyorsanız kullanılmaması Virtualize tercih edilir.
- ItemSize: Yalnızca kullanırken Virtualizegeç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 işlenen her satırda için
@key
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, örneklerin yeni kopyalarla (örneğin, temel alınan veri deposuna yönelik yeni bir sorgudan sonra) değiştirilse bile, kılavuzunTGridItem
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ğidirTGridItem
. 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. Yalnızca kullanırken Virtualizekullanılabilir.- Pagination: İsteğe bağlı olarak bu
TGridItem
örneği bir PaginationState modelle ilişkilendirerek kılavuzun yalnızca geçerli veri sayfasını getirmesine ve işlemesine neden olur. Bu normalde sağlanan PaginationState örneği görüntüleyen ve güncelleştiren bir bileşen veya başka bir Paginator kullanıcı arabirimi mantığıyla birlikte kullanılır. - Alt içerikte
QuickGrid
(RenderFragment ), hücreleri değerleri görüntüleyen sütunları temsilTGridItem
eden s değerini belirtinPropertyColumn<TGridItem,TProp>:- 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. kullanmak Format için IFormattabletürü gerekir
TProp
. - 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 SortBy parametre belirtilirse varsayılan olarak sıralanabilirTemplateColumn<TGridItem>.
- InitialSortDirection: ise IsDefaultSortColumn
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 verileri yüklenmemiş hücreleri işlemek 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 için başlık metni. Başlık kullanılmıyorsa HeaderTemplate otomatik olarak işlenir.
- İşaretlemeyi ()
<QuickGrid>...</QuickGrid>
bileşenin RazorQuickGrid
etiketlerini belirtin. - Kılavuz için sorgulanabilir bir veri kaynağını adlandırın. Aşağıdaki veri kaynaklarından birini kullanın:
- Items: Null atanabilir
IQueryable<TGridItem>
, buradaTGridItem
kılavuzdaki her satır tarafından temsil edilen veri türüdür. - ItemsProvider: Kılavuz için veri sağlayan bir geri çağırma.
- Items: Null atanabilir
- 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, tabloyla eşleşen stil kurallarını etkiler. - Virtualize: True ise, kılavuz sanallaştırma ile işlenir. Bu normalde kaydırma ile birlikte kullanılır ve kılavuzun yalnızca geçerli kaydırma görünüm penceresi çevresindeki 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. kullanıyorsanız Virtualizeiçin ItemSize bir değer sağlamanız ve her satırın sabit bir yükseklikle işlenmesini sağlamanız gerekir. Genel olarak, işlenen veri miktarı küçükse veya sayfalandırma kullanıyorsanız kullanılmaması Virtualize tercih edilir.
- ItemSize: Yalnızca kullanırken Virtualizegeç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 işlenen her satırda için
@key
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, örneklerin yeni kopyalarla (örneğin, temel alınan veri deposuna yönelik yeni bir sorgudan sonra) değiştirilse bile, kılavuzunTGridItem
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ğidirTGridItem
. - Pagination: İsteğe bağlı olarak bu
TGridItem
örneği bir PaginationState modelle ilişkilendirerek kılavuzun yalnızca geçerli veri sayfasını getirmesine ve işlemesine neden olur. Bu normalde sağlanan PaginationState örneği görüntüleyen ve güncelleştiren bir bileşen veya başka bir Paginator kullanıcı arabirimi mantığıyla birlikte kullanılır. - Alt içerikte
QuickGrid
(RenderFragment ), hücreleri değerleri görüntüleyen sütunları temsilTGridItem
eden s değerini belirtinPropertyColumn<TGridItem,TProp>:- 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. kullanmak Format için IFormattabletürü gerekir
TProp
. - 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 SortBy parametre belirtilirse varsayılan olarak sıralanabilirTemplateColumn<TGridItem>.
- InitialSortDirection: ise IsDefaultSortColumn
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 verileri yüklenmemiş hücreleri işlemek 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 için başlık metni. Başlık kullanılmıyorsa HeaderTemplate otomatik olarak işlenir.
Örneğin, bir kılavuzu işlemek için aşağıdaki bileşeni ekleyin.
Web Apps'te Blazor QuickGrid
, sayfalama ve sıralama gibi etkileşimli özellikleri etkinleştirmek için bileşenin etkileşimli bir işleme modunu benimsemesi gerekir.
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();
}
Göreli yolda /promotion-grid
bir tarayıcıda bileşene erişin.
Tam kapsamlı ticari kılavuzların hiyerarşik satırlar, sürüklenerek yeniden sıralama sütunları veya Excel benzeri aralık seçimleri gibi özelliklerle genişletilmeye QuickGrid
yönelik geçerli planları yoktur. 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 sırala
Bileşen öğeleri QuickGrid
sütunlara göre sıralayabilir. Web Apps'te Blazor sıralama, bileşenin etkileşimli bir işleme modunu benimsemesini gerektirir.
Etikete PropertyColumn<TGridItem,TProp> (Sortable) ekleyin Sortable="true"
:
<PropertyColumn Property="..." Sortable="true" />
Çalışan uygulamada, işlenen sütun başlığını seçerek sütunu sıralayın QuickGrid
.
Bileşen içeren Paginator
sayfa öğeleri
Bileşen, QuickGrid
veri kaynağındaki verileri sayfalayabilir. Web Apps'te Blazor sayfalama, bileşenin etkileşimli bir işleme modunu benimsemesini gerektirir.
Bileşenin @code
bloğuna bir PaginationState örnek ekleyin. öğesini ItemsPerPage sayfa başına görüntülenecek öğe sayısına ayarlayın. Aşağıdaki örnekte örnek olarak adlandırılır pagination
ve sayfa başına on öğe ayarlanır:
PaginationState pagination = new PaginationState { ItemsPerPage = 10 };
Bileşenin QuickGrid
Pagination özelliğini olarak pagination
ayarlayın:
<QuickGrid Items="..." Pagination="pagination">
Sayfalandırma için kullanıcı arabirimi sağlamak için bileşenin QuickGrid
üstüne veya altına bir Paginator
bileşen ekleyin. değerini Paginator.State olarak pagination
ayarlayın:
<Paginator State="pagination" />
Çalışan uygulamada, işlenmiş bir bileşeni kullanarak öğeleri sayfalandırın Paginator
.
Ö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">
Entity Framework Core (EF Core) veri kaynağı
Bir bileşene veri sağlayan bir EF Core veritabanı bağlamını çözümlemek için fabrika desenini QuickGrid
kullanın. Fabrika deseninin neden önerildiğinden daha fazla bilgi için bkz. Entity Framework Core (EF Core) ile ASP.NET CoreBlazor.
Veritabanı bağlam fabrikası (IDbContextFactory<TContext>), yönergesi ile @inject
bileşene eklenir. Fabrika yaklaşımı veritabanı bağlamının atılması gerekir, bu nedenle bileşen yönergesi @implements
ile arabirimi uygularIAsyncDisposable. Bileşenin QuickGrid
öğe sağlayıcısı, DbSet<T>
eklenen veritabanı bağlam fabrikasının oluşturulan veritabanı bağlamından (CreateDbContext) elde edilir.
QuickGrid, EF tarafından sağlanan IQueryable örnekleri tanır ve verimlilik için sorguları zaman uyumsuz olarak çözümlemeyi bilir.
NuGet paketi için Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter
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.
EF kullanan IAsyncQueryExecutor bir uygulamayı kaydetmek için dosyadaki Program
hizmet koleksiyonunu çağırınAddQuickGridEntityFrameworkAdapter:
builder.Services.AddQuickGridEntityFrameworkAdapter();
Aşağıdaki örnek, bir ExampleTable
DbSet<TEntity> bileşenin AppDbContext
veri kaynağı olarak veritabanı bağlamından () bir QuickGrid
(context
tablo) 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
):
- alanı
context
, veritabanı bağlamını tutar ve olarakAppDbContext
yazılır. - Yaşam
OnInitialized
döngüsü yöntemi, eklenen fabrikanın (CreateDbContext ) alanına yeni bir veritabanı bağlamı (DbFactory
)context
atar. - Zaman uyumsuz
DisposeAsync
yöntem, bileşen atıldığında veritabanı bağlamını atar.
Verileri parametreye geçirmeden Items ö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
modeli ise şeklindedir 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();
}
Görünen ad desteği
'nin etiketinde PropertyColumn<TGridItem,TProp>kullanılarak ColumnBase<TGridItem>.Title 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. Model özelliğin görünen adını özniteliğiyle [Display]
denetleyebilir. Aşağıdaki örnekte model, özelliği için ReleaseDate
"Release Date
" film yayın tarihi görünen adını belirtir:
[Display(Name = "Release Date")]
public DateTime ReleaseDate { get; set; }
Bileşenin QuickGrid
öğesini kullanmasını sağlamak için, bileşeninde veya ayrı bir sınıfta alt sınıfını PropertyColumn<TGridItem,TProp> kullanınDisplayAttribute.Name:
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();
}
}
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 ON tabanlı web API'sinden JSveri 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 IQueryableolmadığı diğer durumlarda sunucu tarafı Blazor uygulamasında da kullanılabilir.
Temsilci türüyle GridItemsProvider<TGridItem> eşleşen bir geri çağırma 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 OpenFDA veritabanına karşı bir sorguya dönüştürür GridItemsProviderRequest<TGridItem> . Sorgu parametreleri, dış JSON API'si tarafından desteklenen belirli 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 NavManager
<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 {
GridItemsProvider<FoodRecall>? foodRecallProvider;
int numResults;
protected override async Task OnInitializedAsync()
{
foodRecallProvider = async req =>
{
var url = NavManager.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;
}
}
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
yapı iskelesi
yapı iskelesi QuickGrid
Razor , bir veritabanındaki verileri görüntülemek için bileşenleri ile birlikte QuickGrid
iskeleler.
yapı iskelesi, Entity Framework Core veri modelini temel alan temel Oluşturma, Okuma, Güncelleştirme ve Silme (CRUD) sayfaları oluşturur. Tek tek sayfaları veya TÜM CRUD sayfalarının iskelesini oluşturabilirsiniz. Model sınıfını ve DbContext
öğesini seçerek isteğe bağlı olarak gerekirse yeni DbContext
bir oluşturursunuz.
yapı iskelesi oluşturulmuş Razor bileşenler, model sınıfından sonra adlı oluşturulan bir klasöre projenin klasörüne 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 Yeni İskeleli Öğe Ekle'yi>seçin.
Yeni İskele Öğesi Ekle iletişim kutusu Yüklü>OrtakRazor> Bileşen olarak açıkken Entity Framework (CRUD) kullanan bileşenler'i seçin.Razor Ekle düğmesini seçin.
Entity Framework (CRUD) kullanarak Bileşen Ekle 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 bir model sınıfına iskelesi oluşturulmuş belirli bir bileşen türü oluşturmanız gerektiğinde kullanışlıdır. Tam bir bileşen kümesinin iskelesini oluşturmak için Şablon açılan listesini 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ırMoviePages
). - DbContext sınıfı için mevcut bir veritabanı bağlamını seçin veya yeni bir veritabanı bağlamı eklemek için (artı işareti) düğmesini ve Veri Bağlamı Ekle kalıcı iletişim kutusunu seçin + .
- Model iletişim kutusu kapatıldıktan sonra, Veritabanı sağlayıcısı açılan listesi varsayılan olarak SQL Server'dır. 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.
ASP.NET Core