Hi all,

I am trying to implement paging for a list of articles, surprisingly enough I have successfully implemented filtering that returns you a partial view for something similar to this but am struggling with pagination.

Any advice would be great. I should elaborate further with my code below. If there is a beter way to do this please let me know.

My Controller:

public ActionResult RenderEducationCenterCategoryArticleListing()
    {
        //Get all results
        var ArticlePages = CurrentPage.Children.Where(x => x.DocumentTypeAlias == "educationCenterArticle" && x.IsVisible()).OrderByDescending(x => x.CreateDate);

        //instantiate a list for returning to partial
        var articles = new List<Article>();

        //check if is an ajax request
        if (Request.IsAjaxRequest())
            ArticlePages.Skip(Convert.ToInt32(Convert.ToInt32(ConfigurationManager.AppSettings["resultsPerPage"]))).Take(Convert.ToInt32(ConfigurationManager.AppSettings["resultsPerPage"]));
        else
            ArticlePages.Take(Convert.ToInt32(Convert.ToInt32(ConfigurationManager.AppSettings["resultsPerPage"])));


        //loop through nodes needed for partial only
        foreach (var article in ArticlePages)
        {
            var articleImage = Umbraco.Media(article.GetPropertyValue<int>("articleImage")).Url;
            var articleNode = new Article(article.Id, articleImage.ToString(), article.Name.ToString(), article.GetPropertyValue("articleIntro").ToString(), Umbraco.NiceUrl(article.Id).ToString(), article.Parent.Name.ToString(), article.CreateDate);

            articles.Add(articleNode);
        }

        //return the partial with the model of List<Article>
        return PartialView(LAYOUT_DIRECTORY + "_EducationCenterCategoryArticleListing.cshtml", articles);
    }

    public ActionResult RenderEducationCenterCategoryArticlePaging(int? page)
    {
        var ArticlePages = Umbraco.AssignedContentItem.Children.Where(x => x.DocumentTypeAlias == "educationCenterArticle" && x.IsVisible()).OrderByDescending(x => x.CreateDate);
        var pager = new Pager(ArticlePages.Count(), page, 8);
        return PartialView(LAYOUT_DIRECTORY + "_EducationCenterCategoryArticlePaging.cshtml", pager);
    }

My Partials:

<div class="row lbtf-pagination">
<div class="container">
    <div class="col-md-6">
        <p class="paging-text left">Results ( @Model.TotalItems )</p>
    </div>
    <div class="col-md-6">
        <div class="">
            <p class="paging-text">View</p>
            <!-- pager -->
            @if (Model.EndPage > 1)
            {
                <ul class="lbtf-paging">
                    @for (var page = Model.StartPage; page <= Model.EndPage; page++)
                    {
                    <li class="@(page == Model.CurrentPage ? "active" : "")">
                        <a href="@Umbraco.NiceUrl(Umbraco.AssignedContentItem.Id)?page=@page" id="article-pagination">@page</a>
                        <!--@*@Umbraco.NiceUrl(Umbraco.AssignedContentItem.Id)?page=@page*@-->
                    </li>
                    }
                </ul>
            }
        </div>
    </div>
</div>

<div class="container">
<div class="row">
    @foreach (var article in Model)
    {
        <div class="col-md-6">
            <div class="article-card category">
                <a class="hvr-grow" href="@Umbraco.NiceUrl(article.Id)">
                    <div class="article-image small" style="background-image: url('@article.Image');"></div>
                    <div class="article-information small">
                        <div class="heading-border-top"></div>
                        <p class="heading green featured-article">@article.Title</p>
                        <p class="articleIntro">@(String.Join(" ", article.Introduction.Split(' ').Take(10)) + " ...") </p>
                        <p class="featured-article-read-more" href="@article.Url">Read More</p>
                        <p class="article-category small" href="@article.Category">@article.Category</p>
                        <p class="article-date">@(article.CreatedDate.ToString("dd MMMM yyyy"))</p>
                    </div>
                </a>
            </div>
        </div>
    }
</div>

My Models:

public class Article
{
    public int Id { get; set; }
    public string Image { get; set; }
    public string Title { get; set; }
    public string Introduction { get; set; }
    public string Url { get; set; }
    public string Category { get; set; }
    public DateTime CreatedDate { get; set; }

    public Article()
    {

    }

    public Article(int id, string image, string title, string introduction, string url, string category, DateTime createdDate)
    {
        Id = id;
        Image = image;
        Title = title;
        Introduction = introduction;
        Url = url;
        Category = category;
        CreatedDate = createdDate;
    }

}
public class Pager
{
    public int TotalItems { get; private set; }
    public int CurrentPage { get; private set; }
    public int PageSize { get; private set; }
    public int TotalPages { get; private set; }
    public int StartPage { get; private set; }
    public int EndPage { get; private set; }

    public Pager(int totalItems, int? page, int pageSize)
    {
        // calculate total, start and end pages
        var totalPages = (int)Math.Ceiling((decimal)totalItems / (decimal)pageSize);
        var currentPage = page != null ? (int)page : 1;
        var startPage = currentPage - 5;
        var endPage = currentPage + 4;
        if (startPage <= 0)
        {
            endPage -= (startPage - 1);
            startPage = 1;
        }
        if (endPage > totalPages)
        {
            endPage = totalPages;
            if (endPage > 10)
            {
                startPage = endPage - 9;
            }
        }

        if (currentPage > endPage)
            currentPage = endPage;

        TotalItems = totalItems;
        CurrentPage = currentPage;
        PageSize = pageSize;
        TotalPages = totalPages;
        StartPage = startPage;
        EndPage = endPage;
    }

    public Pager() { }
}

I basically want to paginate the results partial.