javascript - .Net Core PartialView 中的分页

Question

我有一个局部 View ，我在其中加载了一个用于分页的寻呼机。

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

局部 View

//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")，但我不知道还有什么可以让它“导航到”(我尝试将它更改为我的 Controller 功能 - 但结果非常糟糕不需要的)，因为我对 .Net 还是很陌生。我也知道我的 Controller 函数有一个错误，我总是加载第 1 页。如何检查页面是否输入到函数中？ (类似于 if (page == null) { page = 1 })加载我的局部 View 的函数如下:

Controller 函数

[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 按钮时，它只会刷新整个索引页面(其中没有部分 View )。单击索引页面上的按钮时会加载局部 View ，因此当页面刷新时，局部 View 将不再存在。

Answer 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 .

我的 Controller 方法只做了一点改动:

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>