时间戳

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

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

问题描述

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

我正在使用 Web API 搜索方法，传入 variables 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 来生成链接？

标签： javascriptc#asp.net-mvcasp.net-web-api

解决方案

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

无论哪种方式，这都非常容易。

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

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，因此您可能必须做一个对您的代码进行一些调整以解决此问题。

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

推荐阅读