如何在 mvc 视图中生成页面链接（API 方法已经返回分页结果）

Posted 2023-04-13

【中文标题】如何在 mvc 视图中生成页面链接（API 方法已经返回分页结果）

【英文标题】：How to generate page links in mvc view (API method is already returning paged results)

【发布时间】：2019-11-12 01:35:41

【问题描述】：

我对 MVC 和 Web API 完全陌生，如果这个问题没有意义，我深表歉意......

我正在使用一种 Web API 搜索方法，传入变量 startIndex、_pageSize，它返回记录的页面大小列表和记录的 totalCount（下面的示例 json）。我的 mvc 视图页面中有一个表格，其中显示了返回数据和总数。

    "errors": [],
    "result": 
        "fileCount": 30,
        "infoList": [
            
                "fileId": "7dcaf6b2-d97b-4234-8a33-344484375f09",
                "integratingApplicationId": "6775bd47-00b5-4864-9f42-5b6ef9d69837",
                "applicationDescription": "SSIS letter",
                "createdDate": "2019-06-12T11:01:39.03",
            

在我的 mvc 视图中，我想为页面添加链接，以便用户可以导航到下一页或上一页（或页码），只是想知道最好的方法是什么？我需要在控制器中添加分页逻辑还是可以在视图中使用 javascript 来生成链接？

【问题讨论】：

您的 JavaScript 代码是否知道当前的startIndex？如果是，您可以使用startIndex+=_pageSize 和_pageSize=_pageSize 设置请求（所以基本相同）。然后重新渲染页面。

这个jQuery插件对分页非常有用：st3ph.github.io/jquery.easyPaginate

【参考方案1】：

两者都可以，最简单的方法是使用局部视图之类的东西构建分页并在将其发送到视图之前填充它。在这种情况下，您不需要在前端做任何事情。

不管怎样，这很容易。

这样想，你需要什么才能建立分页？ 您需要生成一些看起来像这样的链接：

blabla/morebla/data?indexPage=index 其中 index 是您要显示的任何页码。您需要知道该索引的范围，从 1 到任何值。

你有页面大小，假设它是 20。你有数据告诉你有 30 条记录。因此，您将需要 2 个页面来显示数据，因此您可以创建索引为 1 和 2 的超链接。您可以轻松地想出一个公式来决定您需要多少页。您将记录大小 ( 30 ) 划分为页面大小 ( 20 )，如果它的 mod 大于零，则将 1 添加到 pageIndex。

类似这样的：

int pageTotal = ( recordsCount / pageSize ) 您获取该结果的 int 结果（在您的情况下为 1 ），如果此操作的模数高于 0（它是），那么您将页数加 1，从而得到两个。您需要第二页来显示数据的最后 10 条记录。

现在剩下的就是在 foreach 循环中构建链接，因此在这种情况下，您将得到两个，因为您已经计算了 pageTotal：

blabla/morebla/data?indexPage=1
blabla/morebla/data?indexPage=2

注意如何将索引发送到 API，UI 上的索引 1 可能实际上是 API 端的索引 0，但您希望仅从可用性的角度在 UI 上显示 1，因此您可能有对你的代码做一些调整来解决这个问题。

你不需要任何插件，你可以在后端或前端做，无论你更喜欢哪个。