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

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);

        }

标签： asp.net-mvcrazorasp.net-corerazor-pages

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