在一个 HTML 页面上使用多个分页列表答案

【问题标题】：Using multiple paginated lists on one HTML page在一个 HTML 页面上使用多个分页列表
【发布时间】：2020-08-13 01:53:09
【问题描述】：

我是 MVC / Razor pages 新手，请多多包涵。我想在一页上显示几个项目列表。这些列表每个都有 100 多个项目，因此需要对它们进行分页。在 Microsofts Entity Framework .net core 教程中，我发现每页只有 1 个分页，因此无法使用。

我觉得我应该使用 View Component 来实现这一点，但我不太确定该怎么做。任何人都可以帮助我吗？我正在使用 Razor pages .net Core，但我并不反对使用控制器来实现这一点

提前致谢

我的看法是：

@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>
}

我的领域模型是：

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

我的方法是：

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-mvc razor asp.net-core razor-pages

【解决方案1】：

不是最好的解决方案，但请尝试这种方法：您可以为每个项目创建单独的表，然后将分页链接到每个表

【讨论】：

我不关注 - 我已经在数据库中创建了单独的表。能不能说的具体点？
从每个数据库表中获取数据，并创建一个单独的 HTML 表来显示数据，从而为每个 HTML 表提供分页链接。

【解决方案2】：

不确定你是否找到了解决方案，但我喜欢使用这个库

https://www.nuget.org/packages/X.PagedList.Mvc.Core/

要对不同的模型进行分页，只需创建一个包含 IPagedList 对象的视图模型。

这是一个如何设置分页控件的示例：

    @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"
    }))

如果文档和/或此解释不清楚，我可以提供更深入的示例。

【讨论】：