Nuget MVC PagedList Page Links not working correctly

Question

I have a simple ViewModel that I want to display as a list page. I followed this tutorial for paging my list page. Heere is my controller code that returns a view with IPagedList

public ViewResult Index(int? page)
{
    List<ProjectViewModel> projectList = new List<ProjectViewModel>();
    foreach (Project project in db.Projects)
    {
        projectList.Add(ProjectViewModel.ConvertToProjectViewModel(project));
    }
    var pageNumber = page ?? 1;
    return View(projectList.ToPagedList(pageNumber, 3));
}

Below is my view, that renders correctly with the pager rendering as well:

@using PagedList.Mvc;
@using PagedList;
@model PagedList.IPagedList<LayoutTest.ViewModels.ProjectViewModel>

<link href="/Content/PagedList.css" rel="stylesheet" type="text/css" />

<script>
$(function() {
  $("div.progressbar2").progressbar({ value: 92 });
  $("div.progressbar").each(function () {
      var element = this;
      $(element).progressbar({
          value: parseInt($(element).attr("data-last-value")),
      });
  });
});
</script>
@foreach (var item in Model)
{
   <div class="list-container">
    <div class="list-image">
        <img src="@item.ProjectLogo" width="300" height="225"/>
    </div>
    <div class="list-title">
        @Html.DisplayFor(modelItem => item.Title)
    </div>
    <div class="list-min-container">
        <div class="list-min-left">
            Owner: TBD
        </div>
        <div class="list-min-right">
            Cost: $@Html.DisplayFor(modelItem => item.EstimatedCost)
        </div>
    </div>
    <div class="list-brief">
        @Html.DisplayFor(modelItem => item.Brief)
    </div>
    <div class="list-min-container">
        <div class="list-min-left">
                        Location - TBD
        </div>
        <div class="list-min-right">
            @Html.DisplayFor(modelItem => item.EndDate)
        </div>
    </div>
    <div class="progressbar" data-last-value="@item.StartDate.Date.Month">
        <div class="progress-label">@item.StartDate.Date.Month % complete</div>
    </div>
 </div>
}

@Html.PagedListPager( (IPagedList)Model, page => Url.Action("Index", new { page }) )

However when I click on the pager to navigate to another page nothing happens, no error message or anything. Has anybody faced something similar?

EDIT :

Following is the html output from the PagedListPager:

 <div class="pagination PagedList-pager">
 <ul><li class="previous disabled PagedList-skipToPrevious"><a>&larr; Previous</a></li>
     <li class="active"><a>1</a></li>
     <li><a href="/Project?Page=1">2</a></li>
     <li class="next PagedList-skipToNext"><a href="/Project?Page=1">Next &rarr;</a></li>
 </ul></div>

@Jasen I am not using bootstrap, the jquery files are loaded from the layout page. Now I am beginning to suspect that the problem is with the Url.Action() method. I will update my question with the html output from the PagedListPager — Purusartha, Dec 20 '13 at 03:32
Check the network request with the browser's debug console. When you click your page links it should show a request -- you don't show javascript to intercept these clicks to the anchor tags. Next, I would take a look at [PagedList - Manual Paging](https://github.com/troygoode/PagedList#example-2-manual-paging). You are assigning your collection to `List projectList` which is not the `IQueryable` interface that works with PagedList by default. — Jasen, Dec 20 '13 at 17:44
Yes, I did that with Chrome and found that there was a javascript function that was disabling all anchors. As List implements IEnumerable the datasource was fine. Now the Paging is working as expected. I will post this as the answer in a day's time. — Purusartha, Dec 20 '13 at 21:21

score 1 · Answer 1 · answered Dec 26 '13 at 22:45

I used clientside debugging with Chrome and found that there was a javascript function that was disabling all anchors (PreventDefault). As List implements IEnumerable the datasource was fine. Now the Paging is working as expected. The code has always been fine. In case it may help anyone.

Nuget MVC PagedList Page Links not working correctly

1 Answers1

Linked