Giap Hiep

I'm Giap Hiep

I'm a web developer, a gymer. I enjoy share something i know that help people's work!
Giap Hiep

ASP.NET Core 5 - Blazor WebAssembly - scroll vô cực bởi phép ảo hóa component

Môi trường phát triển: .NET 5 5.0.100-rc.2.20479.15 , Visula Studio 2019 Preview.

Tạo mới project

Sử dụng tiện ích này để sinh json làm data sample: https://next.json-generator.com/Vyqn0R6wt . Mã để sinh JSON fake data:

[
  {
    'repeat(1, 100)': {
      id: '{{integer(0, 100000)}}',
        FirstName: '{{firstName()}}',
        LastName: '{{surname()}}'   
    }
  }
]

File index.razor

@page "/"
@inject HttpClient Http


<h3>Component virtualization</h3>

<table style="border: 1px;">
    <thead style="background-color: limegreen;">
        <td>Id</td>
        <td>FirstName</td>
        <td>LastName</td>
    </thead>
    <tbody>
        <Virtualize ItemsProvider="LoadEmployees" Context="emp" ItemSize="30">
            <ItemContent>
                <tr>
                    <td>@emp.Id</td>
                    <td>@emp.FirstName</td>
                    <td>@emp.LastName</td>
                </tr>
            </ItemContent>
            <Placeholder>               
                <p>
                    Loading...                    
                </p>
            </Placeholder>
        </Virtualize>
    </tbody>
</table>


@code{
    protected async ValueTask<ItemsProviderResult<Employee>> LoadEmployees(ItemsProviderRequest request)
    {
        var employees = await Http.GetFromJsonAsync<Employee[]>("data/employees.json");
        return new ItemsProviderResult<Employee>(employees.Skip(request.StartIndex).Take(request.Count), employees.Count());
    }

    public class Employee
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
}

Thử scroll vô cực để sinh ra các DOM mới, tôi tìm cách để nhận diện việc HTML được render thêm các thẻ DOM bằng cách inspect và xem height của row trong table. Khi scroll gần hết danh sách (vô cực) thì heigh: 0 .

Như vậy với tính năng component virtulization sẽ giúp render DOM khi scroll chuột xuống, giúp tạo trải nghiệm người dùng tốt hơn về việc load trang nhiều dữ liệu.

Source code: https://github.com/donhuvy/blazor_component_virtualization