ASP.NET Core Razor bileşeni sanallaştırma

Bu makalede, ASP.NET Core Blazor uygulamalarında bileşen sanallaştırmanın nasıl kullanılacağı açıklanmaktadır.

Sanallaştırma

Blazor bileşeni ile çerçevenin yerleşik sanallaştırma desteğini kullanan Virtualize<TItem> bileşeninin işleme algılanan performansını arttırın. Sanallaştırma, kullanıcı arabirimi işlemeyi yalnızca görünür olan bölümle sınırlamak için kullanılan bir tekniktir. Örneğin, uygulamanın uzun bir öğe listesini işlemesi gerektiğinde ve herhangi bir zamanda yalnızca bir öğe alt kümesinin görünür olması gerektiğinde sanallaştırma yararlı olur.

Bileşeni şu Virtualize<TItem> durumlarda kullanın:

• Döngü içinde veri öğeleri kümesini oluşturmak.
• Kaydırma nedeniyle öğelerin çoğu görünmüyor.
• İşlenen öğeler aynı boyuttadır.

Kullanıcı, bileşenin öğe listesinde rastgele bir noktaya Virtualize<TItem> kaydırdığında, bileşen gösterilecek görünür öğeleri hesaplar. Görünmeyen öğeler işlenmez.

Sanallaştırma olmadan, tipik bir liste bir listedeki her öğeyi işlemek için bir C# foreach döngüsü kullanabilir. Aşağıdaki örnekte:

• allFlights uçak uçuşlarından oluşan bir koleksiyondur.
• Bileşen her FlightSummary uçuşla ilgili ayrıntıları görüntüler.
• @key yönerge özniteliği, her FlightSummary bileşenin, FlightId tarafından işlenen uçuşuyla olan ilişkisini korur.

<div style="height:500px;overflow-y:scroll">
    @foreach (var flight in allFlights)
    {
        <FlightSummary @key="flight.FlightId" Details="@flight.Summary" />
    }
</div>

Koleksiyon binlerce uçuş içeriyorsa, uçuşların işlenmesi uzun sürer ve kullanıcılar fark edilebilir bir kullanıcı arabirimi gecikmesi yaşar. Uçuşların çoğu öğenin yüksekliğinin <div> dışındadır, bu nedenle çoğu görülmez.

Uçuş listesinin tamamını aynı anda görüntülemek yerine, önceki örnekteki foreach döngüsünü Virtualize<TItem> bileşeniyle değiştirin.

• Sabit bir öğe kaynağı olarak allFlights öğesini Virtualize<TItem>.Items için belirtin. Yalnızca görünür olan uçuşlar Virtualize<TItem> bileşeni tarafından işlenir.

  Genel olmayan bir koleksiyon, örneğin bir DataRow koleksiyonu, öğeleri sağlarsa, öğeleri sağlamak için Öğe Sağlayıcı Temsilcisi bölümündeki yönergeleri izleyin.

• Parametresiyle Context her bir uçuş için bir bağlam belirtin. Aşağıdaki örnekte, flight her bir uçuşun üyelerine erişim sağlayan bağlam olarak kullanılır.

<div style="height:500px;overflow-y:scroll">
    <Virtualize Items="allFlights" Context="flight">
        <FlightSummary @key="flight.FlightId" Details="@flight.Summary" />
    </Virtualize>
</div>

parametresiyle bir bağlam belirtilmezse, her bir uçuşun üyelerine erişmek için öğe içerik şablonundaki Context değerini kullanın:

<div style="height:500px;overflow-y:scroll">
    <Virtualize Items="allFlights">
        <FlightSummary @key="context.FlightId" Details="@context.Summary" />
    </Virtualize>
</div>

Bileşen Virtualize<TItem> :

• Kapsayıcının yüksekliğine ve işlenen öğelerin boyutuna göre işlenmek üzere öğe sayısını hesaplar.
• Kullanıcı kaydırdıkça öğeleri yeniden hesaplar ve yeniden oluşturur.
• Kayıtların yalnızca yerine kullanıldığında, overscan dahil görünür bölgeye karşılık gelen dilimini bir dış API'den getirir (bkz. Öğe sağlayıcısı temsilcisi bölümü).

Virtualize<TItem> bileşeninin öğe içeriği şunları içerebilir:

• Önceki örnekte gösterildiği gibi Düz HTML ve Razor kod.
• Bir veya daha fazla Razor bileşen.
• HTML/Razor ve Razor bileşenlerin karışımı.

Öğe sağlayıcısı temsilcisi

Tüm öğeleri belleğe yüklemek istemiyorsanız veya koleksiyon bir ICollection<T> türü değilse, istenen öğeleri talebe bağlı olarak zaman uyumsuz şekilde alan bileşenin Virtualize<TItem>.ItemsProvider parametresine bir öğe sağlayıcı delege yöntemi belirtebilirsiniz. Aşağıdaki örnekte LoadEmployees yöntemi Virtualize<TItem> bileşene öğeleri sağlar:

<Virtualize Context="employee" ItemsProvider="LoadEmployees">
    <p>
        @employee.FirstName @employee.LastName has the 
        job title of @employee.JobTitle.
    </p>
</Virtualize>

Öğe sağlayıcısı, belirli bir başlangıç dizininden itibaren gerekli öğe sayısını belirten bir ItemsProviderRequest alır. Ardından öğe sağlayıcısı istenen öğeleri bir veritabanından veya başka bir hizmetten alır ve toplam öğe sayısıyla birlikte bir ItemsProviderResult<TItem> olarak döndürür. Öğeleri sağlayan kişi, her istekle birlikte öğeleri almayı veya bunları önbelleğe alıp kullanıma hazır olmalarını sağlamayı seçebilir.

Bileşen Virtualize<TItem> parametrelerinden yalnızca bir öğe kaynağını kabul edebilir, bu nedenle bir öğe sağlayıcısını aynı anda kullanmayı denemeyin ve öğesine bir koleksiyon atayınItems. Her ikisi de atanmışsa, bileşenin parametreleri çalışma zamanında ayarlandığında bir InvalidOperationException oluşturulur.

Aşağıdaki örnek, çalışanlarını bir EmployeeService 'den yükler (gösterilmez). Alan totalEmployees genellikle aynı hizmette (örneğin, EmployeesService.GetEmployeesCountAsync) bileşen başlatma sırasında olduğu gibi başka bir yerde bir yöntem çağrılarak atanır.

private async ValueTask<ItemsProviderResult<Employee>> LoadEmployees(
    ItemsProviderRequest request)
{
    var numEmployees = Math.Min(request.Count, totalEmployees - request.StartIndex);
    var employees = await EmployeesService.GetEmployeesAsync(request.StartIndex, 
        numEmployees, request.CancellationToken);

    return new ItemsProviderResult<Employee>(employees, totalEmployees);
}

Aşağıdaki örnekte, türe özgü olmayan bir koleksiyon DataRow olduğundan, öğe sağlayıcısı temsilcisi sanallaştırma için kullanılır:

<Virtualize Context="row" ItemsProvider="GetRows">
    ...
</Virtualize>

@code{
    ...

    private ValueTask<ItemsProviderResult<DataRow>> GetRows(ItemsProviderRequest request) => 
        new(new ItemsProviderResult<DataRow>(
            dataTable.Rows.OfType<DataRow>().Skip(request.StartIndex).Take(request.Count),
            dataTable.Rows.Count));
}

Virtualize<TItem>.RefreshDataAsync bileşenin, verileri ItemsProvider yeniden talep etmesini sağlar. Bu, dış veriler değiştiğinde kullanışlıdır. Genellikle RefreshDataAsync kullanırken Items çağrısı yapmanız gerekmez.

RefreshDataAsync bir Virtualize<TItem> bileşenin verilerini yeniden render'a neden olmadan günceller. Bir RefreshDataAsync olay işleyicisinden veya bileşen yaşam döngüsü yönteminden Blazor çağrılırsa, olay işleyicisi veya yaşam döngüsü yönteminin sonunda işleme otomatik olarak tetiklendiğinden, işleme tetiklenmesi gerekmez. RefreshDataAsync aşağıdaki temsilci gibi bir arka plan görevi veya olayından ayrı olarak tetikleniyorsa, arka plan görevinin veya olayının sonunda kullanıcı arabirimini güncellemek için ForecastUpdated çağrısını yapın.

<Virtualize ... @ref="virtualizeComponent">
    ...
</Virtualize>

...

private Virtualize<FetchData>? virtualizeComponent;

protected override void OnInitialized()
{
    WeatherForecastSource.ForecastUpdated += async () => 
    {
        await InvokeAsync(async () =>
        {
            await virtualizeComponent?.RefreshDataAsync();
            StateHasChanged();
        });
    });
}

Yukarıdaki örnekte:

• RefreshDataAsync önce, Virtualize<TItem> bileşeni için yeni verileri almak üzere çağrılır.
• StateHasChanged bileşenin yeniden render edilmesi için çağrılır.

Yer tutucu

Uzak veri kaynağından öğe istemek biraz zaman alabileceğinden, öğe içeriğiyle yer tutucu işleme seçeneğiniz vardır:

• Öğe verileri kullanılabilir olana kadar içeriği görüntülemek için (Placeholder<Placeholder>...</Placeholder>) kullanın.
• Listenin öğe şablonunu ayarlamak için kullanın Virtualize<TItem>.ItemContent .

<Virtualize Context="employee" ItemsProvider="LoadEmployees">
    <ItemContent>
        <p>
            @employee.FirstName @employee.LastName has the 
            job title of @employee.JobTitle.
        </p>
    </ItemContent>
    <Placeholder>
        <p>
            Loading&hellip;
        </p>
    </Placeholder>
</Virtualize>

boş içerik

EmptyContent Bileşen yüklendiğinde ve Items boş olduğunda veya ItemsProviderResult<TItem>.TotalItemCount sıfır olduğunda içerik sağlamak için parametresini kullanın.

EmptyContent.razor:

@page "/empty-content"

<PageTitle>Empty Content</PageTitle>

<h1>Empty Content Example</h1>

<Virtualize Items="stringList">
    <ItemContent>
        <p>
            @context
        </p>
    </ItemContent>
    <EmptyContent>
        <p>
            There are no strings to display.
        </p>
    </EmptyContent>
</Virtualize>

@code {
    private List<string>? stringList;

    protected override void OnInitialized() => stringList ??= [];
}

OnInitialized Bileşen görüntüleme dizelerini görmek için lambda yöntemini değiştirin:

protected override void OnInitialized() =>
    stringList ??= [ "Here's a string!", "Here's another string!" ];

Öğe boyutu

Her öğenin piksel cinsinden yüksekliği ile Virtualize<TItem>.ItemSize ayarlanabilir (varsayılan: 50). Aşağıdaki örnek, her öğenin yüksekliğini varsayılan 50 pikselden 25 piksele değiştirir:

<Virtualize Context="employee" Items="employees" ItemSize="25">
    ...
</Virtualize>

Bileşen, Virtualize<TItem> ilk işleme gerçekleştikten sonra tek tek öğelerin işleme boyutunu (yüksekliğini) ölçer. ItemSize kullanarak, doğru ilk işleme performansına yardımcı olmak ve sayfa yeniden yüklemeleri için doğru kaydırma konumunu sağlamak amacıyla önceden tam bir öğe boyutu sağlayın. Varsayılan ItemSize bazı öğelerin mevcut görünür görünümün dışında işlenmesine neden oluyorsa, ikinci bir yeniden işleme süreci tetiklenir. Sanallaştırılmış bir listede tarayıcının kaydırma konumunu doğru şekilde korumak için ilk işlemenin doğru olması gerekir. Aksi takdirde, kullanıcılar yanlış öğeleri görüntüleyebilir.

Fazla tarama sayısı

Virtualize<TItem>.OverscanCount görünür bölgeden önce ve sonra kaç ek öğenin işleneceğini belirler. Bu ayar, kaydırma sırasında işleme sıklığını azaltmaya yardımcı olur. Ancak, daha yüksek değerler sayfada daha fazla öğe işlenmesine neden olur (varsayılan: 3). Aşağıdaki örnek, üç öğenin varsayılanı olan overscan sayısını dört öğeye değiştirir:

<Virtualize Context="employee" Items="employees" OverscanCount="4">
    ...
</Virtualize>

Durum değişiklikleri

Virtualize<TItem> bileşeni tarafından işlenen öğelerde değişiklik yaparken, bileşenin yeniden değerlendirilmesini ve yeniden oluşturulmasını sıraya almak için StateHasChanged çağırın. Daha fazla bilgi için bkz. ASP.NET Core Razor bileşenini işleme.

Klavye kaydırma desteği

Kullanıcıların klavyelerini kullanarak sanallaştırılmış içeriği kaydırmasına izin vermek için, sanallaştırılmış öğelerin veya kaydırma kapsayıcısının odaklanılabilir olduğundan emin olun. Bu adımı atamazsanız, klavye kaydırma Chromium tabanlı tarayıcılarda çalışmaz.

Örneğin, kaydırma kapsayıcısı üzerinde bir tabindex öznitelik kullanabilirsiniz:

<div style="height:500px; overflow-y:scroll" tabindex="-1">
    <Virtualize Items="allFlights">
        <div class="flight-info">...</div>
    </Virtualize>
</div>

tabindex, -1, 0veya diğer değerlerin anlamı hakkında daha fazla bilgi edinmek için bkz. tabindex.

Gelişmiş stiller ve kaydırma algılama

Bileşen Virtualize<TItem> yalnızca belirli öğe düzeni mekanizmalarını destekleyecek şekilde tasarlanmıştır. Hangi öğe düzenlerinin doğru çalıştığını anlamak için, aşağıdakiler hangi öğelerin doğru yerde görüntülenmesi gerektiğini nasıl Virtualize algıladığını açıklar.

Kaynak kodunuz aşağıdaki gibi görünüyorsa:

<div style="height:500px; overflow-y:scroll" tabindex="-1">
    <Virtualize Items="allFlights" ItemSize="100">
        <div class="flight-info">Flight @context.Id</div>
    </Virtualize>
</div>

Çalışma zamanında, Virtualize<TItem> bileşeni aşağıdakine benzer bir DOM yapısı oluşturur:

<div style="height:500px; overflow-y:scroll" tabindex="-1">
    <div style="height:1100px"></div>
    <div class="flight-info">Flight 12</div>
    <div class="flight-info">Flight 13</div>
    <div class="flight-info">Flight 14</div>
    <div class="flight-info">Flight 15</div>
    <div class="flight-info">Flight 16</div>
    <div style="height:3400px"></div>
</div>

İşlenen gerçek satır sayısı ve boşlukların boyutu, stilinize ve Items koleksiyon boyutuna göre değişir. Ancak, içeriğinizden önce ve sonra eklenen aralayıcı div öğeleri olduğuna dikkat edin. Bunlar iki amaca hizmet eder:

• İçeriğinizden önce ve sonra bir ofset sağlayarak, şu anda görünür olan öğelerin kaydırma aralığında doğru konumda gözükmesini ve kaydırma aralığının tüm içeriğin toplam boyutunu temsil etmesini sağlamak.
• Kullanıcının geçerli görünür aralığın ötesine ne zaman kaydığını algılamak için, başka bir deyişle farklı içeriğin işlenmesi gerekir.

Not

Aralayıcı HTML öğesi etiketini denetlemeyi öğrenmek için, bu makalenin ilerleyen bölümlerinde Aralayıcı öğesi etiket adını denetleme bölümüne bakın.

Aralayıcı öğeleri, görünür hale geldikleri zaman bildirim almak için dahili olarak bir Kesişim Gözlemcisi kullanır. Virtualize bu olayları almaya bağlıdır.

Virtualize aşağıdaki koşullar altında çalışır:

• Yer tutucu içerik de dahil olmak üzere işlenen tüm içerik öğeleri aynı yüksekliktedir. Bu, önce her veri öğesini getirmeden ve verileri bir DOM öğesinde işlemeden belirli bir kaydırma konumuna karşılık gelen içeriği hesaplamayı mümkün kılar.

• Hem aralayıcılar hem de içerik satırları tek bir dikey yığında işlenir ve her öğe tüm yatay genişliği doldurur. Tipik kullanım örneklerinde Virtualizediv öğelerle çalışır. DAHA gelişmiş bir düzen oluşturmak için CSS kullanıyorsanız aşağıdaki gereksinimleri göz önünde bulundurun:

  • Kaydırma kapsayıcısı stili için aşağıdaki değerlerden herhangi biriyle bir display kullanmanız gerekir:
    • block (bir diviçin varsayılan).
    • table-row-group (bir tbodyiçin varsayılan).
    • flex ile flex-directioncolumn olarak ayarlandığında. Virtualize<TItem> bileşeninin hemen alt öğelerinin esnek düzenlemeler altında küçülmediğinden emin olun. Örneğin, .mycontainer > div { flex-shrink: 0 } ekleyin.
  • İçerik satırı stili için aşağıdaki değerlerden biriyle bir display gerekir:
    • block (bir diviçin varsayılan).
    • table-row (bir triçin varsayılan).
  • Boşluk oluşturucu öğelerinin düzenine müdahale etmek için CSS kullanmayın. Aralayıcı elemanlarının display değeri, üst öğe bir tablo satırı grubu olmadıkça block'dir; bu durumda, varsayılan değerleri table-row olur. Ara öğe genişliğini veya yüksekliğini etkilemeye çalışmayın, bunlara kenarlık eklemek veya sahte öğelere sahip olmalarını sağlamak dahil.

Aralayıcıların ve içerik öğelerinin tek bir dikey yığın olarak işlenmesini durduran veya içerik öğelerinin yüksekliğinin değişmesine neden olan herhangi bir yaklaşım, bileşenin Virtualize<TItem> doğru çalışmasını engeller.

Kök düzeyinde sanallaştırma

Bileşen, belgenin kendisini kaydırma kökü olarak kullanmayı, Virtualize<TItem> ile başka bir öğeye sahip olmanın alternatifi olarak destekler. Aşağıdaki örnekte, <html> veya <body> öğeleri overflow-y: scroll bir bileşende stillendirilmiştir.

<HeadContent>
    <style>
        html, body { overflow-y: scroll }
    </style>
</HeadContent>

Ara eleman etiket adını kontrol et

Eğer Virtualize<TItem> bileşeni, belirli bir alt etiket adı gerektiren bir öğenin içerisine yerleştirilirse, SpacerElement sanallaştırma ayırıcı etiket adını edinmenize veya ayarlamanıza olanak tanır. Varsayılan değer şudur: div. Aşağıdaki örnekte, Virtualize<TItem> bileşen bir tablo gövdesi öğesi ()tbody içinde işlenir, bu nedenle tablo satırı (tr) için uygun alt öğe aralayıcı olarak ayarlanır.

VirtualizedTable.razor:

@page "/virtualized-table"

<PageTitle>Virtualized Table</PageTitle>

<HeadContent>
    <style>
        html, body {
            overflow-y: scroll
        }
    </style>
</HeadContent>

<h1>Virtualized Table Example</h1>

<table id="virtualized-table">
    <thead style="position: sticky; top: 0; background-color: silver">
        <tr>
            <th>Item</th>
            <th>Another column</th>
        </tr>
    </thead>
    <tbody>
        <Virtualize Items="fixedItems" ItemSize="30" SpacerElement="tr">
            <tr @key="context" style="height: 30px;" id="row-@context">
                <td>Item @context</td>
                <td>Another value</td>
            </tr>
        </Virtualize>
    </tbody>
</table>

@code {
    private List<int> fixedItems = Enumerable.Range(0, 1000).ToList();
}

Önceki örnekte, belge kök öğesi kaydırma kapsayıcısı olarak kullanıldığından, html ve body öğeleri overflow-y: scroll ile stillendirilir. Daha fazla bilgi edinmek için aşağıdaki kaynaklara bakın:

• Kök düzeyinde sanallaştırma bölümü
• ASP.NET Core Blazor uygulamalarında baş içeriği denetleme