Infinite Scroll in ASP.Net Core

Paul Truman asked on January 15, 2022 19:14

Hey, I'm looking to implement an infinite scroll for a listing of page types in ASP.Net core but not really sure what is the best solution to follow. Has anyone done this before and can offer any guidance on best practices for Kentico or has a link to an example that I can use as a base?

xperience 13 core

Recent Answers

Liam Goldfinch answered on January 16, 2022 09:54

I very rarely implement an infinite scroll listing page due to the potential impact on SEO and UX.

However, when I do make an infinite scroll page, it will be driven through JavaScript making API calls to a web API controller.

The JavaScript code just needs to be make another API call with an incremented page number parameter when nearing the end of the current listing being displayed, and then append the results to the bottom.

2 votesVote for this answer Mark as a Correct answer

Eugene Paden answered on February 16, 2022 21:56 (last edited on February 16, 2022 22:01)

As Liam said, you need 2 components:

a web API controller that supports requesting a page of records e.g. /documents?start=0&pageSize=10 that returns an array of the documents and the URL to retrieve the next set of records. See sample code at : https://code-maze.com/paging-aspnet-core-webapi/
the front end JS infinite scroll component that calls the API to fetch additional records when you get to a certain point in your page, e.g. (60-70% of loaded records so that by the time it gets to the end of current records, the next set has been loaded already).

are you using Razor, Angular or React on the front-end?

0 votesVote for this answer Mark as a Correct answer