Using multiple paginated lists on one HTML page - asp.net-mvc

Question

I'm MVC / Razor pages newbie so bear with me. I would like to display several lists of items on one page. These lists have 100+ items each so they need to be paginated. In Microsofts Entity Framework .net core tutorial I found only 1 pagination per page, so that cannot be used.
I feel like I should be using View Component to achieve this, but I'm quite not sure how to do it. Can anyone help me please?
I'm using Razor pages .net Core, but I'm not against using controller to achieve this
Thanks in advance
My view is:
#page
#model DOOR.Core.Web.Pages.Models.IndexModel
<h2 style="margin-top:20px "><span class="glyphicon glyphicon-compressed"></span> Model #Html.DisplayFor(model => Model.
<h4 class="h4-bold">Tables</h4>
#if (Model.PdModel.FirstOrDefault().PdTables.Count == 0)
{
#:Model doesn't contain any tables
}
else
{
<table class="table table-striped">
<thead>
<th>
Name
</th>
<th>
Description
</th>
<th>
Type
</th>
</thead>
#foreach (var tableItem in Model.PdModel.FirstOrDefault().PdTables.OrderBy(x => x.TableName))
{
<tr>
<td>
<a asp-page="/Tables/Index" asp-route-id="#tableItem.Id" asp-page-handler="LoadTable"><span class="glyphicon glyphicon-list-alt"></span> #tableItem.TableName</a>
</td>
<td>
#tableItem.TableComment
</td>
<td>
#tableItem.TableStereotype
</td>
</tr>
}
</table>
}
<hr />
<h4 class="h4-bold">View</h4>
#if (Model.PdModel.FirstOrDefault().pdViews.Count == 0)
{
#:Model doesn't contain any view
}
else
{
<table class="table table-striped">
<thead>
<th>Name</th>
<th>Description</th>
</thead>
#foreach (var viewitem in Model.PdModel.FirstOrDefault().pdViews.OrderBy(x => x.ViewName))
{
<tr>
<td><a asp-page="/Views/index" asp-page-handler="LoadView" asp-route-id="#viewitem.ID"><i class="glyphicon glyphicon-search"></i> #viewitem.ViewCode</a></td>
<td>#viewitem.ViewComment</td>
</tr>
}
</table>
}
My domain models are:
public class PdModel
{
public int Id { get; set; }
public string ModelCode { get; set; }
...
public ICollection<PdTable> PdTables { get; set; }
public ICollection<PdView> pdViews { get; set; }
}
public class PdTable
{
public int Id { get; set; }
public int ModelId { get; set; }
public string ModelCode { get; set; }
public string TableCode { get; set; }
...
[ForeignKey("ModelId")]
public virtual PdModel PdModels { get; set; }
}
public class PdView
{
public int ID { get; set; }
public string ModelCode { get; set; }
public int ModelID { get; set; }
public string ViewCode { get; set; }
...
[ForeignKey("ModelID")]
public virtual PdModel PdModel { get; set; }
}
My method is:
public PaginatedList<PdModel> PdModel { get; set; }
public async Task OnGetLoadModelAsync(int id, int? pageIndex)
{
IQueryable<PdModel> PdModelsQuer = _context.PdModel.Where(x => x.Id == id)
.Include(x => x.PdTables)
.Include(x => x.pdViews)
PdModel = await PaginatedList<PdModel>.CreateAsync(PdModelsQuer, pageIndex ?? 1, 3);
}

Answer 1

Not the best solution, but try this approach instead: you can create separate tables for each item and then link pagination to each table

Answer 2

Not sure if you have found a solution yet, but I like using this library
https://www.nuget.org/packages/X.PagedList.Mvc.Core/
To paginate different models, just create a viewmodel containing your IPagedList objects.
Here's an example of how to set up the pagination control:
#Html.PagedListPager(
(IPagedList)Model.MyPagedListObject,
page => Url.Action("MyControllerAction", "MyController",
new
{
page,
size = Model.MyPagedListObject.PageSize
}),
PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(
new PagedListRenderOptions
{
MaximumPageNumbersToDisplay = 5,
UlElementClasses = new[] { "pagination" },
ContainerDivClasses = new[] { "pagination-container" },
LiElementClasses = new string[] { "page-item" },
PageClasses = new string[] { "page-link" }
},
new AjaxOptions()
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET",
UpdateTargetId = "MyDivWrapperID"
}))
If the documentation and/or this explanation is unclear I can provide a more in depth example.