如何使用部分视图正确添加分页答案

【问题标题】：How do I properly add pagination using partial views如何使用部分视图正确添加分页
【发布时间】：2020-06-26 07:09:00
【问题描述】：

所以我有这个看起来像这样的局部视图

@foreach (var item in Model)
{
    <div class="container-1">
        <div class="box-img">
            <img src="@item.ProductImage" />
        </div>

        <div class="body">
            <h3>@item.ItemName</h3>
            <p>@item.SubTitle</p>
        </div>

        <div class="box-button">
            <p>@item.SKU</p>
        </div>

        <div class="box-button">
            <p class="mt-3 mr-2">$@item.Price</p>
            <button class="btn btn-primary">Export</button>
        </div>

    </div>
}

这就是我在 index.cshtml 中实现它的方式

<div id="itemsss">
    <partial name="_Item" />
</div>

现在为了确保只有部分视图动态更新而不必手动刷新整个页面，我正在使用这样的 ajax

$(document).ready(function () {
    setInterval(CheckAvailability, 500);
});

function CheckAvailability() {
    $.ajax({
        type: "POST",
        url: "/Dashboard/CheckChange",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        mimeType: "text/html",
        success: function (response) {
            if (response) {
                $('#itemsss').load("/Dashboard/ReturnItems");
                console.log("Updated!");
            }
            else {
                console.log("Failed!");
            }
        }
    });
};

这个想法是，无论是否发生变化，它都会每 0.5 秒获取一次数据，再次只是为了保持更新。它将所有部分视图 div 加载到 id 为 itemsss 的 div 中，您可以在 index.cshtml 中看到它

它正在获取的操作是这样的

[HttpGet]
public IActionResult ReturnItems()
{
    Items = new List<EbayProduct>();
    using (var ctx = new UserContext())
    {
        Items = ctx.Users.Include(x => x.Items).Where(x => x.Username == "Admin").FirstOrDefault().Items;
    }
    return PartialView("_Item", Items);
}

这很好用，它可以保持更新，什么都没有。

问题在于它将所有内容添加到一个大列表中，因为我想在它达到集合中的 7 个或更多项目时开始使用分页。老实说，我不知道该怎么做。我将如何正确实现这样的分页？我想到了引导分页，但我只是不知道该怎么做。

【问题讨论】：

但正如你所说，你的函数将每 5 秒调用一次，所以如果用户在第二页或第三页，你的 ajax 调用会一次又一次地显示它的第一页。所以首先改变你的继续通话功能

标签： javascript jquery asp.net asp.net-mvc asp.net-core

【解决方案1】：

jQuery数据表是个不错的选择，可以按照文档实现分页。

https://datatables.net/

https://datatables.net/plug-ins/pagination/

【讨论】：