Scrollable grids, lists, and divs in ASP.NET MVC
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Demo
NuGet
packages
.gitattributes
.gitignore
Mvc-Infinite-Scroll-Grid.sln
readme.md

readme.md

MVC Infinite Scroll Grid

Here is a demonstration of a way to add infinite scrolling to a grid, table, or any other HTML element in an ASP.NET MVC project.

###Demo - Try Out Infinite Scrolling###

Use this by:

  • copying the code here from GitHub
  • clone the repo for yourself
  • add it to your project via NuGet

How Does This Work?

  • On the first hit to the page/URL, you grab all the data that could/would be displayed in this table. It doesn't even have to be a table with rows and columns. It could be any HTML that logically repeats.
  • This data is saved to session.
  • The first n entries are rendered to the view.
  • When the user scrolls to the bottom of the page in their browser, the page sends an AJAX request back to a controller method for another batch.
  • The controller takes the current 'page' number, and gets the next n entries from session.
  • A partial view is rendered and returned back as HTML back to the browser
  • The browser appends the rendered HTML to the page.

Tweak You Might Want

  • Use Cache[] instead of Session[]. If your data doesn't need to differ between users, you can use Cache["Customers"] with System.Web.Caching. This is useful if you want to keep your memory profile on the server low, the amount and type of data you're scrolling through, etc.

Pull Requests

I welcome your pull requests. Please submit your PR in a branch named for the feature/fix that you're introducing (i.e. not master).

Authors

Phil Campbell and other contributors. Contact me by creating a new issue on the repo, or by Twitter

Licensing

MIT License