How to load first x items and give user the option to load more in MVC.NET

Question

What would be the best way to load, for example, the first 25 items of the IEnumerable of an Index view in ASP.NET MVC?

I have a model and have created a controller and views using scaffolding. In the index page I create a div containing some info for each instance in the model of the view (List of Question objects). I would like to display the first 25 items and give the user the possibility to load more using a link at the bottom saying "Load the next 25 questions...".

How would this be possible?

I have never done anything with pages before, but I will look into it, thanks! — E. V. d. B., Apr 07 '14 at 23:22

Raja Nadar · Accepted Answer · 2014-04-08T17:24:49.907

4

This is similar to paging except that you retain the previous fetches. Your view model needs to have one more property of a helper class:

public class PagingInfo
{
    public int TotalItems { get; set; }
    public int ItemsPerPage { get; set; }
    public int CurrentPage { get; set; }
    public int TotalPages
    {
        get { return (int)Math.Ceiling((decimal)TotalItems / ItemsPerPage); }
    }
}

public class QuestionsListViewModel
{
    public IEnumerable<Question> Questions { get; set; }
    public PagingInfo PagingInfo { get; set; }
}

And when you render the QuestionsListViewModel, use a similar Razor Code:

@foreach (var p in Model.Questions)
{
    // render Questions
}

@Html.ActionLink("Load next 25 items", "Questions", "Controller", new { page = Model.PagingInfo.CurrentPage + 1 }))

Questions is your Controller Action as follows:

    public ViewResult Questions(int page = 1)
    {
        QuestionsListViewModelmodel = new QuestionsListViewModel
        {
            // we need to get all items till now to render again 
            Questions = repository.Questions
                                  .Take(page * PageSize),
            PagingInfo = new PagingInfo
            {
                CurrentPage = page,
                ItemsPerPage = 25,
                TotalItems = repository.Questions.Count()
            }
        };

        return View(model);
    }

You can actually use the TotalItems property to give a smart message for loading next items.

If you don't want to go the MVC way, then you can leverage client side scripting to achieve the same.

edited Apr 08 '14 at 17:24

answered Apr 07 '14 at 23:06

Raja Nadar

9,409
2
32
41

I've never done paging before in any way, but this looks promising. Gonna try it out tomorrow, will report back! Thanks! – E. V. d. B. Apr 07 '14 at 23:21
I'm trying it out but razor doesn't recognize `@Html.PageLinks(Model.PagingInfo, x => Url.Action("Questions", new { page = x }))`, why's that? Is there an alternative? – E. V. d. B. Apr 08 '14 at 10:00
Nevermind, I found some code seems like it's a helper you need to defina yourself. In the Questions action in your example, what does `PageSize` have to be in the line `Questions = repository.Questions .Take(page * PageSize)` because that's not really clear to me. – E. V. d. B. Apr 08 '14 at 10:09
Okay for PageSize I just filled in how many items I want per "page". But My PageLinks helper doesn't seem to be right, it only displays the current page, will have to look into that! – E. V. d. B. Apr 08 '14 at 10:57
aah yes. that is a custom html helper.. you don't need to use it.. you can ignore it and just render your "Load the next 25 items" link with the url pointing to the action with querystring having page number – Raja Nadar Apr 08 '14 at 17:13
Found a working one in the meantime! I made a combination, first x item gets loaded, user can load more. When 5x items are loaded, a new page gets started! Works perfectly! – E. V. d. B. Apr 08 '14 at 18:01

score 3 · Answer 2 · answered Apr 08 '14 at 01:15

Have you considered PagedList library for pagination? All what you have to do is to reference PagedList library in your ASP.NET MVC application

To install PagedList.Mvc, run the following command in the Package Manager Console. You can use NuGet to get this package too.

PM> Install-Package PagedList.Mvc

Your viewmodel

public class QuestionViewModel
{
        public int QuestionId { get; set; }
        public string QuestionName { get; set; }
}

In your controller, reference PagedList

using PagedList;

and the Index method of your controller will be something like

public ActionResult Index(int? page)
{
            var questions = new[] {
                new QuestionViewModel { QuestionId = 1, QuestionName = "Question 1" },
                new QuestionViewModel { QuestionId = 1, QuestionName = "Question 2" },
                new QuestionViewModel { QuestionId = 1, QuestionName = "Question 3" },
                new QuestionViewModel { QuestionId = 1, QuestionName = "Question 4" }
            };

            int pageSize = 3;
            int pageNumber = (page ?? 1);
            return View(questions.ToPagedList(pageNumber, pageSize));
}

And your Index view

@model PagedList.IPagedList<ViewModel.QuestionViewModel>
@using PagedList.Mvc; 
<link href="/Content/PagedList.css" rel="stylesheet" type="text/css" />


<table>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.QuestionId)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.QuestionName)
        </td>
    </tr>
}

</table>

<br />

Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount
@Html.PagedListPager( Model, page => Url.Action("Index", new { page }) )

I would prefer the next items to be loaded on the same page, is that possible in your example? — E. V. d. B., Apr 08 '14 at 08:39
Yes sure, it would load the next set of items as limited by the 'pageSize' variable on the same page. Try out the complete example and let me know for questions. — Dennis R, Apr 08 '14 at 16:27

score 0 · Answer 3 · answered Apr 07 '14 at 23:05

if in short, you need to have some endpoint on backend that returns information page by page, e.g. http://my-website.com/questions/list?start=0&count=25. Let's say it returns information in JSON format. After that you can call this endpoint from front end (browser) side using AJAX. I would recommend using jQuery AJAX. As soon as you get data on browser side, you can use jQuery again and render the information whatever you want.

score 0 · Answer 4 · answered Jan 17 '20 at 08:06

should you need to pull the items from your database you can modify your index method as follow:

 public ActionResult Index(int? page)
    {


        var question = (from e in db.Ques
                        select new
                        {

                            QuestionId = e.QuestionId,
                            QuestionName = e.QuestionName

                        }).ToList()

                      .Select(x => new QuestionViewModel()

                      {
                          QuestionId = x.QuestionId ,
                          QuestionName = x.QuestionName
                      });


            int pageSize = 2;
            int pageNumber = (page ?? 1);
            return View(question.ToPagedList(pageNumber, pageSize));

    }

Please note the View and model ,should remain as created above

How to load first x items and give user the option to load more in MVC.NET

4 Answers4

Linked