如何使用AJAX以增量方式加载ASP.Net DataList项目？

Question

简短的序言：我非常擅长JavaScript / jQuery，并且我对ASP.Net Web表单也很擅长（我在工作中使用VB，尽管可能不太受欢迎）。我对AJAX不太熟悉，因为在这家特定的公司中，我们避免将服务器端脚本与客户端脚本混为一谈。

话虽这么说，我想做的事应该是一件简单的事情，我只是在网上找不到任何方法。

• 有问题的aspx文件包含一个asp:DataList控件，其中唯一的直接子项是ItemTemplate，其中填充了所需的面板，标签和HTML元素。
• 从VB文件中的SQL查询创建了数百个DataRows。
• 自然地，即使页面加载完成后，这也会阻碍UI中的客户端性能。当只有50个项目或更少时，该页面可以正常运行并流畅运行。
• 我只想加载前20个项目，然后在用户滚动到页面底部时（类似于在Facebook照片或Instagram个人资料上查看大量内容时）再加载20个项目。 / li>

我不喜欢复制粘贴确切的标记，因此我将使用make-believe ID和class来放置结构的必要基础知识

ASPX：

<asp:DataList ID="currentThings" runat="server" CssClass="viewThingsDivAll" RepeatLayout="Flow" RepeatDirection="Vertical" OnItemDataBound="dl1_ItemDataBound" DataKeyField="ThingID">
    <ItemTemplate> 
        ... 
    </ItemTemplate>
</asp:DataList>

代码背后：

Protected Sub dl1_ItemDataBound(ByVal source As Object, e As DataListItemEventArgs)
    Dim thingID As Integer = chk.asInteger(currentThings.DataKeys(e.Item.ItemIndex))
    ...
End Sub

我很了解如何在JavaScript中触发用户滚动到某物底部的事件，因此我不需要如何构造该部分的帮助。我几乎只需要与我的目标相关的AJAX速成课程。谢谢大家！