Scroll and Load More feature

To build a AJAX based unlimited page scroll feature, first thing you would need to do is to build a UpdatePanel and setup a asp:repeater

Your ASPX Page
<asp:UpdatePanel runat="server" ID="panelWizard">
    <ContentTemplate>
        <asp:repeater ID="rptContent" runat="server">
            <itemtemplate>
                 <%# Eval("ItemText") %>
            </itemtemplate>
        </asp:repeater>
        <asp:LinkButton ID="lbLoadMore" runat="server" Text="Load more..." />
    </ContentTemplate>
</asp:UpdatePanel>

Your VB Page
Public Property PageSize As Integer
    Get
        If ViewState("PageSize") Is Nothing Then
            ViewState("PageSize") = 5
        End If
        Return ViewState("PageSize")
    End Get
    Set(value As Integer)
        ViewState("PageSize") = value
    End Set
End Property

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
         rptContent.DataSource = DataStore.GetPostTable(0, PageSize)
         rptContent.DataBind
    End If
End Sub

Private Sub lbLoadMore_Click(sender As Object, e As System.EventArgs) Handles lbLoadMore.Click
    ViewState("PageSize") += 5
End Sub

You could also limit the length of the page, if you feel the content will be too long by setting the limit on the page size

Private Sub lbLoadMore_Click(sender As Object, e As System.EventArgs) Handles lbLoadMore.Click
    If PageSize < 100 Then
        ViewState("PageSize") += 5
    End If
End Sub

So far we have had a traditional ASP.Net load more feature built. To make it automagically do the load more action, all it needs is a little javascript that goes like this

<script language="javascript" type="text/javascript">
    $(window).scroll(function () {
        if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
            __doPostBack('<%=lbLoadMore.UniqueId %>', '');
        }
    });
</script>

Happy Coding

Smit Shah

Blog » Scroll and Load More feature

Scroll and Load More feature