如何将分页添加到我的 div 列表中

Question

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

@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 加载到具有 itemsss id 的 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 个或更多项目时开始使用分页。老实说，我不知道该怎么做。我将如何正确实现这样的分页？我想到了引导分页，但我只是不知道该怎么做。

这是另一个问题。因为它每 0.5 秒更新一次，它会一遍又一遍地更新第一页。

我觉得这几乎是不可能完成的。有什么好的方法呢？

Answer 1

根据您的描述，我建议您可以尝试创建一个 PaginatedList，它将根据 pageindex 和 pagesize 获取正确的项目。然后，您可以使用该类根据客户端返回的 pageindex 和 pagesize 获取正确的项目。

分页列表：

public class PaginatedList<T> : List<T>
{
    public int PageIndex { get; private set; }
    public int TotalPages { get; private set; }

    public PaginatedList(List<T> items, int count, int pageIndex, int pageSize)
    {
        PageIndex = pageIndex;
        TotalPages = (int)Math.Ceiling(count / (double)pageSize);

        this.AddRange(items);
    }

    public bool HasPreviousPage
    {
        get
        {
            return (PageIndex > 1);
        }
    }

    public bool HasNextPage
    {
        get
        {
            return (PageIndex < TotalPages);
        }
    }

    public static   PaginatedList<T> CreateAsync(
        IQueryable<T> source, int pageIndex, int pageSize)
    {
        var count =  source.Count();
        var items =   source.Skip(
            (pageIndex - 1) * pageSize)
            .Take(pageSize).ToList();
        return new PaginatedList<T>(items, count, pageIndex, pageSize);
    }
}

控制器：

注意：我使用列表作为数据源，您可以直接使用选中的结果项。

    public class ProductController : Controller
    {
        public List<EabyProduct> DataSource = new List<EabyProduct>() {
         new EabyProduct { ItemName="test1" , SubTitle="Title1", ProductImage=" image1" , Price=1 },
         new EabyProduct { ItemName="test2" , SubTitle="Title1", ProductImage=" image1" , Price=1 },
         new EabyProduct { ItemName="test3" , SubTitle="Title1", ProductImage=" image1" , Price=1 },
         new EabyProduct { ItemName="test4" , SubTitle="Title1", ProductImage=" image1" , Price=1 },
         new EabyProduct { ItemName="test5" , SubTitle="Title1", ProductImage=" image1" , Price=1 },
            new EabyProduct { ItemName="test6" , SubTitle="Title1", ProductImage=" image1" , Price=1 },

         new EabyProduct { ItemName="test7" , SubTitle="Title1", ProductImage=" image1" , Price=1 },
         new EabyProduct { ItemName="test8" , SubTitle="Title1", ProductImage=" image1" , Price=1 },
new EabyProduct { ItemName="test9" , SubTitle="Title1", ProductImage=" image1" , Price=1 },

         new EabyProduct { ItemName="test10" , SubTitle="Title1", ProductImage=" image1" , Price=1 },
         new EabyProduct { ItemName="test11" , SubTitle="Title1", ProductImage=" image1" , Price=1 },
new EabyProduct { ItemName="test12" , SubTitle="Title1", ProductImage=" image1" , Price=1 }

        };

        public const int pagesize = 3;
        
        public IActionResult Index()
        {

            ViewBag.DefaultProdct = PaginatedList<EabyProduct>.CreateAsync(DataSource.AsQueryable(), 1, pagesize);

            return View();
        }

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

            //I directly create a test list datasrouce 
            return PartialView("_Item", PaginatedList<EabyProduct>.CreateAsync(DataSource.AsQueryable(), pageindex, pagesize));
        }


        [HttpPost]
        public IActionResult CheckChange()
        {
            //Checklogic

            return Ok("OK");
        }
    }

索引：

@{
    ViewData["Title"] = "View";
}

<h1>View</h1>

<div id="itemsss">
    <partial name="_Item" model="ViewBag.DefaultProdct" />
</div>

<script>
    $(document).ready(function () {
        setInterval(CheckAvailability, 1000);
    });

    function CheckAvailability() {
        var currentpageindex = $("#pageindex").val();
        console.log(currentpageindex);
        $.ajax({
            type: "Post",
            url: "/Product/CheckChange",
            success: function (rew) {
                console.log("Updated!");
                $('#itemsss').load("/Product/ReturnItems?pageindex=" + currentpageindex);
            }
        });
    };
    function Pre() {
        var currentpageindex = $("#pageindex").val();

        console.log(currentpageindex);
        $('#itemsss').load("/Product/ReturnItems?pageindex=" + (parseInt(currentpageindex) - 1));
    }

    function Next() {
        var currentpageindex = $("#pageindex").val();

        console.log(currentpageindex);
        $('#itemsss').load("/Product/ReturnItems?pageindex=" + (parseInt(currentpageindex) + 1));
    }


</script>

_项目局部视图：

@*
    For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@

@model MVCRelatedIssue.PaginatedList<MVCRelatedIssue.Models.EabyProduct>



<script src="/lib/jquery/dist/jquery.min.js"></script>
@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>
}

@{
    var prevDisabled = Model.HasPreviousPage ? "" : "disabled";
    var nextDisabled = Model.HasNextPage ? "" : "disabled";

}

<input  id="pageindex" type="hidden" value="@Model.PageIndex"/>

<hr/>

<a  
   class="btn btn-primary @prevDisabled" id="Pre" onclick="Pre()" >
    Previous
</a>
<a   
   class="btn btn-primary @nextDisabled" id="Next" onclick="Next()" >
    Next
</a>

结果：