Infinite Scroll - ASP.NET Core MVC - asp.net-mvc

Question

We are trying to implement infinite scroll in data grid in an ASP.NET Core MVC application. Searched a lot but could not find a good solution. Has any one used infinite scroll in data grid in an ASP.NET Core MVC . If so can you provide any guidance

Answer 1

I faced the same problem. Here is my solution. It works on nearly any table:
InfinityScroll.js
function InfinitiySroll(iTable, iAction, iParams) {
this.table = iTable; // Reference to the table where data should be added
this.action = iAction; // Name of the conrtoller action
this.params = iParams; // Additional parameters to pass to the controller
this.loading = false; // true if asynchronous loading is in process
this.AddTableLines = function (firstItem) {
this.loading = true;
this.params.firstItem = firstItem;
// $("#footer").css("display", "block"); // show loading info
$.ajax({
type: 'POST',
url: self.action,
data: self.params,
dataType: "html"
})
.done(function (result) {
if (result) {
$("#" + self.table).append(result);
self.loading = false;
}
})
.fail(function (xhr, ajaxOptions, thrownError) {
console.log("Error in AddTableLines:", thrownError);
})
.always(function () {
// $("#footer").css("display", "none"); // hide loading info
});
}
var self = this;
window.onscroll = function (ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
//User is currently at the bottom of the page
if (!self.loading) {
var itemCount = $('#' + self.table + ' tr').length - 1;
self.AddTableLines(itemCount);
}
}
};
this.AddTableLines(0);
}
Here a from Visual Studio scaffold view - a little bit modified
TestData.cshtml
#model IEnumerable<Infinity_Scroll.Models.TestData>
#{
ViewData["Title"] = "TestData";
}
<h1>TestData</h1>
<table id="anyTable" class="table">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.Id)
</th>
<th>
#Html.DisplayNameFor(model => model.Field1)
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
#section Scripts {
<script src="~/js/InfinitiySroll.js"></script>
<script>
var infinityScroll = new InfinitiySroll("anyTable", "/home/_TestData", { sortOrder: "ascending", searchString: "3" });
</script>
}
The generating of the table rows is moved into a PartialView:
_TestData.cshtml
#model IEnumerable<Infinity_Scroll.Models.TestData>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Id)
</td>
<td>
#Html.DisplayFor(modelItem => item.Field1)
</td>
</tr>
}
And here is the Controller part:
...
private const int BATCH_SIZE = 50;
public IActionResult TestData()
{
return View();
}
[HttpPost]
public IActionResult _TestData(string sortOrder, string searchString, int firstItem = 0)
{
List<TestData> testData = new List<TestData>();
// Generate test data
for (int i = 1; i < 500; i++)
{
testData.Add(new TestData() { Id = i, Field1 = "This is row " + i.ToString() });
}
// Sort and filter test data
IEnumerable<TestData> query;
if (sortOrder.ToLower() == "descending")
{
query = testData.OrderByDescending(m => m.Field1);
}
else
{
query = testData.OrderBy(m => m.Field1);
}
if (!String.IsNullOrEmpty(searchString)) query = query.Where(m => m.Field1.Contains(searchString));
// Extract a portion of data
var model = query.Skip(firstItem).Take(BATCH_SIZE).ToList();
if (model.Count() == 0) return StatusCode(204); // 204 := "No Content"
return PartialView(model);
}
The model:
TestData.cs
namespace Infinity_Scroll.Models
{
public class TestData
{
public int Id { get; set; }
public string Field1 { get; set; }
}
}
You can download a simple Visual Studio example here: https://github.com/ThomasBrockmann/InfinityScroll