How to add pagination to async methods in ASP.NET Core MVC?-CodePudding

I've been building an ASP.NET Core MVC project. I want to add a pagination to some pages but I can't make it work. I tried X.PagedList and PagedList.Core.Mvc packages but I can't use them because of the async task structure I've been using.

This is my code - controller:

public async Task<IActionResult> StudentList(int? page)
{
    StudentCardViewModel viewModel = await _mediator.Send(new GetCardQuery());
    var pageNumber = page ?? 1;
    viewModel.StudentCards.ToPagedList(pageNumber, 3);

    return View(viewModel);
}

My view:

@using School.Application.ViewModels.Student
@model StudentCardViewModel

<div >
    <div>
        @foreach (var item in Model.StudentCards)
        {
            <div >
                <a  target="_blank" href="@item.RedirectUrl">@item.Header</a>
                <div>@item.ShortDescription</div>
                <div ><a target="_blank" href="@item.RedirectUrl">read more<span></span></a></div>
            </div>
    }
</div>
@Html.PagedListPager(StudentCardViewModel, page => Url.Action("StudentList", new { page }))

Any help will be appreciated

When I apply these packages, I get an blank page error.

CodePudding user response：

Your issue is probably at this line,

viewModel.StudentCards.ToPagedList(pageNumber, 3);

Try adding a new property in the viewModel,

viewModel.PagedStudentCards;

Then,

viewModel.PagedStudentCards = viewModel.StudentCards.ToPagedList(pageNumber, 3);

In the view code,

<div >
    <div>
        @foreach (var item in Model.PagedStudentCards)
        {
            <div >
                <a  target="_blank" href="@item.RedirectUrl">@item.Header</a>
                <div>@item.ShortDescription</div>
                <div ><a target="_blank" href="@item.RedirectUrl">read more<span></span></a></div>
            </div>
        }
</div>
@Html.PagedListPager((IPagedList)Model.PagedStudentCards, page => Url.Action("StudentList", new { page }))

Hope this works.

CodePudding user response：

1.Install package X.PagedList.Mvc.Core in asp.net core project.

2.you must be sure your await _mediator.Send(new GetCardQuery()); actually contains value. Because by using your code, it will display all the data without pagination instead of blank page.

Then change your code like below:

StudentList.cshtml

@using X.PagedList.Mvc.Core; @*import this so we get our HTML Helper*@
@using X.PagedList; @*import this so we can cast our list to IPagedList (only necessary because ViewBag is dynamic)*@

@using X.PagedList.Mvc.Core.Fluent

<div>
    @foreach (var item in ViewBag.PageList)
    {
        <div >
            <a  target="_blank" href="@item.RedirectUrl">@item.Header</a>
            <div>@item.ShortDescription</div>
            <div ><a target="_blank" href="@item.RedirectUrl">read more<span></span></a></div>
        </div>
    }
</div>
@Html.PagedListPager( (IPagedList)ViewBag.PageList, page => Url.Action("StudentList", new { page }))

Action

public async Task<IActionResult> Index(int? page)
{
    StudentCardViewModel viewModel = await _mediator. Send(new GetCardQuery());
    var pageNumber = page ?? 1;

    //change the following code.......
    ViewBag.PageList = viewModel.StudentCards.ToPagedList(pageNumber, 3);
    return View();
}