Loading a large list in Blazor

Question

I would like to load a list of students at moment I have a signalr connection and the request gets all students. I'd like to scroll down the list and it would load a 100 students at a time?

<ul>
            @if (Students != null)
                {
                    @foreach (var student in Students)
                    {
                        <li>
                            <div class="treeview__item__header">
                                @plan.Name
                            </div>
                        </li>
                    }
                }
         </ul>


        @code
        {   
         private List<StudentsData> Students { get; set; } 

         protected override async Task OnInitializedAsync()
         {
             Students = await StudentsConnection.GetStudents();
         }   
        }

Answer 1

我相信您应该考虑在存储过程级别上的解决方案 Select top 100 where 并有一个参数 @next 当您向下滚动到列表末尾时，您可以使用按钮或事件从应用程序控制

Answer 2

you can use pagination and implement a pager component. Look at these two articles, they may help you: Pager component and part of Pager component 2

Answer 3

it cannot be done with pure blazor. i have been doing a lot of search and there is a reason for which there are paid libarys like syncfusion that help with these issues.

Answer 4

I have used this example with success:

https://github.com/amuste/DnetVirtualScrolling

in alternative, as Alexander stated, a simple pager calculated on the nuber of rows to show and seems to be the best "pure blazor" solution

Edit: Looks like Virtualize could be perfect for this use:

https://www.syncfusion.com/blogs/post/asp-net-core-blazor-component-virtualization-in-net-5.aspx