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.
This is a companion discussion topic for the original entry at https://our.umbraco.com/forum/92151-ajax-paging-that-returns-you-a-partial-view