【问题标题】：Pagination in .Net Core PartialView.Net Core PartialView 中的分页
【发布时间】：2018-01-06 16:04:44
【问题描述】：

我有一个局部视图，我在其中加载了一个分页器进行分页。

分页功能有效，因为链接更改如下：http://localhost:1048/Trip -> http://localhost:1048/Trip?page=2 但似乎我加载“下一页”的“请求”没有按预期工作。

局部视图

//Here is a table view that 
//that requires pagination.

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

<ul class="pager">
    <li>
        <a asp-action="Index"
           asp-route-page="@(Model.PageIndex - 1)"
           class="btn btn-default @prevDisabled btn">
                Previous
        </a>
    </li>
    <li>
        <a asp-action="Index"
           asp-route-page="@(Model.PageIndex + 1)"
           class="btn btn-default @nextDisabled btn">
                Next
        </a>
    </li>
</ul>

我认为我的链接是错误的（asp-action="Index"），但我不知道还有什么可以让它“导航到”的（我尝试将它更改为我的控制器功能 - 但结果非常不需要），因为我对.Net还是很陌生。我也知道我的控制器函数中有一个错误，我总是加载第 1 页。如何检查页面是否输入到函数中？（类似于if (page == null) { page = 1 }）加载我的部分视图的函数如下：

控制器功能

[HttpGet]
public async Task<IActionResult> TripTable(int? page)
{
    var trips = from t in _tripcontext.Tripmetadata select t;

    page = 1;

    int pageSize = 20;
    return PartialView("PartialTripsView", await PaginatedList<Tripmetadata>.CreateAsync(trips.AsNoTracking().OrderBy(t => t.Tripid), page ?? 1, pageSize));
}

更新

我想我忘了提到，每当我使用 Next 按钮时，它只会刷新整个索引页面（其中没有部分视图）。单击索引页面上的按钮时会加载部分视图，因此当页面刷新时，部分视图不再存在。

【问题讨论】：

如果您正在执行重定向，则需要重新呈现整个页面，除非涉及 javascrip，否则您无法返回部分视图。您的操作需要具有名称 Index 并在主页内呈现部分视图。
那么我需要创建一个新的“索引”函数吗？
你应该已经在控制器中有一个索引操作，只需添加一个可选参数int page = 1这意味着如果你不发送它将显示第一页。
我明白了。请看我上面的更新。我会尝试将参数添加到我的索引函数中。
我的猜测是您使用this 教程作为起点。如您所见，控制器有一个动作索引，它只是在响应中返回页面。如果您只想渲染网格部分，则需要使用 ajax。 asp-index 只是创建一个指向不同页面的超链接。

标签： javascript c# jquery pagination asp.net-core-mvc

【解决方案1】：

在网上阅读了一番之后，我设法弄明白了：

首先我将 PartialView 更改为以下内容：

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

<ul class="pager">
    <li>
        <a id="prev" data-url="@Url.Action("TripTable", "Trip")" data-id="@Model.PageIndex" class="btn btn-default @prevDisabled btn">
            Previous
        </a>
    </li>
    <li>
        <a id="next" data-url="@Url.Action("TripTable", "Trip")" data-id="@Model.PageIndex" class="btn btn-default @nextDisabled btn">
            Next
        </a>
    </li>
</ul>

如果其他人遇到同样的问题，我的大部分代码都来自 Microsoft Docs 创建分页 here。

我的控制器方法只改变了一点：

public async Task<IActionResult> TripTable(int? page)
{
    var trips = from t in _tripcontext.Tripmetadata select t;
    int pageSize = 10;

    return PartialView("PartialTripsView", await PaginatedList<Tripmetadata>.CreateAsync(trips.AsNoTracking().OrderBy(t => t.Tripid), page ?? 1, pageSize));
}

我在 PartialView 的底部添加了以下内容：

<script>
    $("#prev").click(function () {
        var _this = $(this);
        var prevPage = _this.data('id') - 1;

        $("#TripPartial").load(_this.data('url'), { page: prevPage }, function () {
        });
    });

    $("#next").click(function () {
        var _this = $(this);
        var nextPage = _this.data('id') + 1;

        $("#TripPartial").load(_this.data('url'), { page: nextPage }, function () {
        });
    });
</script>

【讨论】：