CODEWITHSUNDEEP
javascriptc#jquerypaginationasp.net-core-mvc
Zeliax
Zeliax

Reputation: 5386

Pagination in .Net Core PartialView

I have a Partial View in which I load a pager for pagination.

The functionality of the pagination works, as the link changes as follows: http://localhost:1048/Trip -> http://localhost:1048/Trip?page=2 but it seems like my "request" to load the "next page" doesn't work as intended.

PartialView

//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>

I assume that my link is wrong (asp-action="Index"), but I have no idea what else to have it "navigate to" (I tried changing it to my controller function - but that result was very much unwanted) as I am still fairly new to .Net. Also I know that I have an error in my Controller function where I load page 1 always. How do I check whether a page is input to the function? (something like if (page == null) { page = 1 }) The function that loads my Partial View is as follows:

Controller function

[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));
}

UPDATE

I guess I forgot to mention that whenever I use the Next button it just refreshed the entire Index page (without the Partial View in it). The Partial View is loaded when a button on the Index page is clicked, so when the page refreshes the Partial View is not present anymore.

Upvotes: 1

Views: 2686

Answers (1)

Zeliax
Zeliax

Reputation: 5386

I managed to figure it out after quite some reading online:

First of I changed my PartialView to the following:

@{ 
    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>

If someone else is stuck on the same problem I got most of my code from the Microsoft Docs on creating a pagination here.

My controller method was changed only a little:

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));
}

And in the bottom of my PartialView I added the following:

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

Upvotes: 1

Related Questions