Blazor Virtualization 组件的用法

@page "/counter"
@using Microsoft.AspNetCore.Components.Web.Virtualization

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<hr />

<h2>Virtualize — 简单示例（内存已有集合）</h2>
<p>基于已有集合的虚拟化，适用于已能一次性加载到内存的数据集。</p>
<Virtualize Items="simpleItems" Context="item" ItemSize="36">
    <div class="p-2 border-bottom">@item</div>
</Virtualize>

<hr />

<h2>Virtualize — ItemsProvider（按需分页加载）</h2>
<p>使用 `ItemsProvider` 做按需加载（适合非常大的数据源或远程分页）。</p>
<Virtualize ItemsProvider="LoadItemsProvider" ItemSize="36" OverscanCount="3" Context="item">
    <div class="p-2 border-bottom">@item</div>
</Virtualize>

@code {
    private int currentCount = 0;
    private void IncrementCount() => currentCount++;

    // 示例一：简单集合（1000 条）
    private List<string> simpleItems = Enumerable.Range(1, 1000).Select(i => $"Simple Item {i}").ToList();

    // 示例二：按需加载（模拟远程或非常大的本地数据源）
    private const int totalCount = 100_000;

    private async ValueTask<ItemsProviderResult<string>> LoadItemsProvider(ItemsProviderRequest request)
    {
        // 模拟延迟（例如网络或数据库）
        await Task.Delay(40);

        var start = request.StartIndex;
        var count = Math.Min(request.Count, totalCount - start);
        if (count <= 0)
        {
            return new ItemsProviderResult<string>(Array.Empty<string>(), totalCount);
        }

        // 生成示例项（真实场景替换为查询/分页）
        var page = Enumerable.Range(start + 1, count).Select(i => $"Paged Item {i}").ToList();
        return new ItemsProviderResult<string>(page, totalCount);
    }
}

已做的改动说明（简短）

• 在当前 Counter.razor 页面中添加了两个 Virtualize 示例：
  • 基于内存集合的简单用法（Items）。
  • 使用 ItemsProvider 的按需分页加载示例（适合大数据或远程数据）。
• 包含演示用的同步数据和模拟延迟的异步数据提供器，便于在你的 Blazor (.NET 10) 项目中直接运行与调试。