umbraco pagination with next and previous

Akeem 43 posts 198 karma points

Apr 08, 2016 @ 16:38

Hi ,

Please help me . I have this structure in the blog application i am building (blogs in certain month and year)

enter image description here

So, am retrieving the blogs under each month and year . So when am displaying a particular blog, i have a pagination to display the next blog

So i have this pagination structure on each blog page (eg tomb raider) .. enter image description here

Because the model is displaying a specific blog or all the blogs in a certain month , it doesn't show next and Previous blogs for the blogs that are in another folder of seperate Month or year

BUt i need a way to always next or do previous on the blog page in the next month or year . Please help me . i know there is always a way around this .

My code snippet below ..

   @{
   IPublishedContent objBlogRoot = Model.Content.AncestorOrSelf("SmartBlogBlog");
  IEnumerable<IPublishedContent> colResults = null;

colResults= Model.Content.DescendantsOrSelf("SmartBlogPost").OrderByDescending(x => x.GetPropertyValue

                        foreach (IPublishedContent objPost in colResults)
                        {


                                            <p>   @Html.Raw(objPost.GetPropertyValue<String>("smartBlogBody")) </p>



        <nav>
            <ul class="pager">
                @if (objPost.Previous() != null)
                {

                    <li class="previous"><a class="h4" href="@objPost.Previous().Url"><span aria-hidden="true">&lt;</span> Older</a></li>

                }

                    <li class="center-block"><a class="h4" href="@Umbraco.Field("blogHome",recursive:true)">Blog Home</a></li>

                    @if (objPost.Next() != null)
                    {
                        <li class="next"><a class="h4" href="@objPost.Next().Url">Newer <span aria-hidden="true">&gt;</span></a></li>

                    }

            </ul>
        </nav>} }

Copy Link

Nicholas Westby 2054 posts 7103 karma points c-trib

Apr 08, 2016 @ 17:01

Instead of this:

colResults= Model.Content.DescendantsOrSelf("SmartBlogPost").OrderByDescending(x => x.GetPropertyValue("smartBlogDate"));

Try this:

colResults= objBlogRoot.DescendantsOrSelf("SmartBlogPost").OrderByDescending(x => x.GetPropertyValue("smartBlogDate"));

That way, you are getting all of the blog posts rather than ones that are a descendant of the current page.

Copy Link

Akeem 43 posts 198 karma points

Apr 08, 2016 @ 19:18

Hi Nicholas,

That displays several blogs on this current . I now have about 7 Pages of this picture :

enter image description here

I want to display this current Page with one blog with the buttons below .such that when i click the older or previous button even when the blog Month has just one blog, it still shows or goto the Older blog in the Older month or Newer blog in the following month thats current blog is in when it doesnt have more than one blog in its current Month .

Copy Link

Nicholas Westby 2054 posts 7103 karma points c-trib

Apr 08, 2016 @ 19:51

Oh, I had assumed you were using colResults to get the previous/next posts. It seems that is not the case.

First, you'd get all of the posts:

var allPosts = objBlogRoot
    // Get all posts.
    .DescendantsOrSelf("SmartBlogPost")
    // Get an anonymous object with a few key values (for improved speed).
    .Select(x => new
    {
        Node = x,
        Id = x.Id,
        Date = x.GetPropertyValue("smartBlogDate")
    });

Next, you'd get the post date node:

var postDate = objPost.GetPropertyValue("smartBlogDate");

Next, you'd get the previous node:

var previous = allPosts
    // Exclude the current node.
    .Where(x => x.Id != objPost.Id)
    // Older posts.
    .Where(x => x.Date <= postDate)
    // Order by date (descending).
    .OrderByDescending(x => x.Date)
    // First of the filtered posts.
    .FirstOrDefault();

Next, you'd get the next node:

var next = allPosts
    // Exclude the current node.
    .Where(x => x.Id != objPost.Id)
    // Exclude the previous node (in case many have the same date).
    .Where(x => previous == null || x.Id != previous.Id)
    // Newer posts.
    .Where(x => x.Date >= postDate)
    // Order by date (ascending).
    .OrderBy(x => x.Date)
    // First of the filtered posts.
    .FirstOrDefault();

I'm sure you can figure the rest out. Note that I didn't test the above code, but the general idea should work (you may have to tinker with some things). Also, I would highly recommend you add some caching, as this code could be fairly slow.

Copy Link

Akeem 43 posts 198 karma points

Apr 08, 2016 @ 21:01

Hi Nicholas,

Thank you for taking your time to look into it . However , It still doesnt work . The next and Previous New code below :

 var previous = colResults2.Where(x => x.Id != objPost.Id).Where(x => x.CreateDate <= objPost.CreateDate)
                                    .OrderByDescending(x => x.GetPropertyValue<DateTime>("smartBlogDate")).FirstOrDefault();

                                var next = colResults2.Where(x => x.Id != objPost.Id).Where(x => x.CreateDate >= objPost.CreateDate)
                              .OrderByDescending(x => x.GetPropertyValue<DateTime>("smartBlogDate")).FirstOrDefault();

                                        }
                                        <ul class="pager">
                                            @if (previous.Previous() != null)
                                            {

                                                <li class="previous"><a class="h4" href="@previous.Previous().Url"><span aria-hidden="true">&lt;</span> Older</a></li>

                                            }

                                            <li class="center-block"><a class="h4" href="@Umbraco.Field("blogCommunityLINK",recursive:true)">Blog Home</a></li>

                                            @if (next.Next() != null)
                                            {
                                                <li class="next"><a class="h4" href="@next.Next().Url">Newer <span aria-hidden="true">&gt;</span></a></li>
                                            }

I have the Next and previous button Hidden on the BLOGS that have just one blog in that MONTH . Below is what the picture looks like . The other two buttons are hidden because previous() and next() are null

enter image description here

Copy Link

Nicholas Westby 2054 posts 7103 karma points c-trib

Apr 08, 2016 @ 21:03

You should not be calling either of these:

previous.Previous()
next.Next()

With that code, you are essentially attempting to find the previous of the previous and the next of the next.

Copy Link

Akeem 43 posts 198 karma points

Apr 09, 2016 @ 00:29

Thank you Nicholas . It worked like baked beans haha. Thanks

Copy Link

Akeem 43 posts 198 karma points

Apr 09, 2016 @ 00:30

Please do you know anything on this . I have tried several blogs

https://our.umbraco.org/forum/extending-umbraco-and-using-the-api/76421-umbraco-multisite-language-translation

Copy Link

Hannah Mathews 9 posts 79 karma points

Apr 26, 2016 @ 14:28

Hello All!

I'm trying to add a latest blog post section to the about page of my site however the following line is returning null

IPublishedContent objBlogRoot = Model.Content.AncestorOrSelf("SmartBlogBlog");

it works fine on the root page but not on the child page.

could some one please advise?

kind regards, H

Copy Link

Nicholas Westby 2054 posts 7103 karma points c-trib

Apr 27, 2016 @ 03:10

What happens if you manually loop through each parent? That is:

Model.Content.Parent.Parent.Parent//etc.

(Obviously, you'd want to do that in a while loop or something of that sort.) Do you see a content node with a document type of "SmartBlogBlog"?

Copy Link

is working on a reply...

Flag this post as spam?

Umbraco Pagination with Next And Previous