item paging in umbraco

James 251 posts 1169 karma points

Jul 22, 2014 @ 13:00

I have a portfolio page that displays a list of all my portfolio items using a Macro Partial View.

Does anyone have a guide or knwo the best way to go about adding paging funcionality to this type of view?

Kind regards.

Copy Link

Dan 1288 posts 3921 karma points c-trib

Jul 22, 2014 @ 13:11

Hi James,

Here's some razor I've used to do paging - you should be able to pick something from it:

@{
    var pageSize = 5;
    if(Model.Content.HasValue("numberOfItemsPerPage")){
        pageSize = Model.Content.GetPropertyValue<int>("numberOfItemsPerPage");
    }
    var page = 1; int.TryParse(Request.QueryString["page"], out page);
    var items = Umbraco.TypedContent(Model.Content.Id).Children.Where(x => x.DocumentTypeAlias == "Article" && x.IsVisible());
    var totalPages = (int)Math.Ceiling((double)items.Count() / (double)pageSize);

    if (page > totalPages)
    {
        page = totalPages;
    }
    else if (page < 1)
    {
        page = 1;
    }


    foreach(var item in items.Skip((page - 1) * pageSize).Take(pageSize).OrderBy(x=>x.Name)){
        <div>
            <h2><a href="@item.Url">@item.Name</a></h2>
            <p>@item.GetPropertyValue("introText")</p>
        </div>
    }


    if (totalPages > 1)
    {
        <div class="pagination">
            <ul>
                @if (page > 1)
                {
                    <li><a href="?page=@(page-1)">Prev</a></li>
                }
                @for (int p = 1; p < totalPages + 1; p++)
                {
                    <li class="@(p == page ? "active" : string.Empty)">
                        <a href="?page=@p">@p</a>
                    </li>
                }
                @if (page < totalPages)
                {
                    <li><a href="?page=@(page+1)">Next</a></li>
                }
            </ul>
        </div>
    }
}

Copy Link

Shin Jin 7 posts 87 karma points

Nov 25, 2015 @ 06:39

About this

foreach(var item in items.Skip((page - 1) * pageSize).Take(pageSize).OrderBy(x=>x.Name)){
    <div>
        <h2><a href="@item.Url">@item.Name</a></h2>
        <p>@item.GetPropertyValue("introText")</p>
    </div>
}

Help what if i want to display image?

Copy Link

Søren Mastrup 122 posts 564 karma points c-trib

Nov 25, 2015 @ 07:25

It would be something like this:

foreach(var item in items.Skip((page - 1) * pageSize).Take(pageSize).OrderBy(x=>x.Name)){
    <div>
        <h2><a href="@item.Url">@item.Name</a></h2>
        <p>@item.GetPropertyValue("introText")</p>
        <img src="Umbraco.Media(item.MyMediaPickerAlias).Url" alt="" >
    </div>
}

Copy Link

Shin Jin 7 posts 87 karma points

Nov 25, 2015 @ 07:49

Thanks Søren Mastrup !

About

@item.GetPropertyValue("introText")

can i do something like

@item.GetPropertyValue("introText, 240, true")

erm something like @Umbraco.Truncate(post.content, 150, true)

Copy Link

Søren Mastrup 122 posts 564 karma points c-trib

Nov 25, 2015 @ 07:54

Pretty close! This should work:

@Umbraco.Truncate(item.GetPropertyValue("introText"), 150)

Copy Link

Shin Jin 7 posts 87 karma points

Nov 25, 2015 @ 08:02

@{ var pageSize = 5; if(Model.Content.HasValue("numberOfItemsPerPage")){ pageSize = Model.Content.GetPropertyValue

if (page > totalPages)
{
    page = totalPages;
}
else if (page < 1)
{
    page = 1;
}


foreach(var item in items.Skip((page - 1) * pageSize).Take(pageSize).OrderBy(x=>x.Name)){
    <div>
        <h2><a href="@item.Url">@item.Name</a></h2>
        <p>@Umbraco.Truncate(item.GetPropertyValue("introText"), 150)</p>
    </div>
}


if (totalPages > 1)
{
    <div class="pagination">
        <ul>
            @if (page > 1)
            {
                <li><a href="?page=@(page-1)">Prev</a></li>
            }
            @for (int p = 1; p < totalPages + 1; p++)
            {
                <li class="@(p == page ? "active" : string.Empty)">
                    <a href="?page=@p">@p</a>
                </li>
            }
            @if (page < totalPages)
            {
                <li><a href="?page=@(page+1)">Next</a></li>
            }
        </ul>
    </div>
}

}

hmmmm it not working ...got the error....it show this... Compiler Error Message: CS1502: The best overloaded method match for 'Umbraco.Web.UmbracoHelper.Truncate(System.Web.IHtmlString, int)' has some invalid arguments error i guess is about this @Umbraco.Truncate(item.GetPropertyValue("introText"), 150)

sorry for the trouble.... my coding very poor..

Copy Link

Søren Mastrup 122 posts 564 karma points c-trib

Nov 25, 2015 @ 08:08

What do you get if you just output item.GetPropertyValue("introText").GetType()?

As you can see in your error, Umbraco.Truncate only accepts a string.

You could also try:

@Umbraco.Truncate(item.GetPropertyValue("introText").ToString(), 150)

Copy Link

Shin Jin 7 posts 87 karma points

Nov 25, 2015 @ 08:15

Thanks you so much Søren Mastrup it work OMG!! Sorry for the trouble.... and Thank you :)

Copy Link

Nelson 94 posts 246 karma points

Mar 08, 2016 @ 07:38

Hello, I'm new with Umbraco and I'm working with my first website, I'm trying to implement the feature of pagination following the code displayed in this post. I'm using LeBlender for my grid editors, but I'm getting this error:

c:...\umbraco\Views\Partials\Work.cshtml(5): error CS1061: 'Lecoati.LeBlender.Extension.Models.LeBlenderModel' does not contain a definition for 'Content' and no extension method 'Content' accepting a first argument of type 'Lecoati.LeBlender.Extension.Models.LeBlenderModel' could be found (are you missing a using directive or an assembly reference?)

And here is my code:

@inherits UmbracoViewPage<Lecoati.LeBlender.Extension.Models.LeBlenderModel    @{
var pageSize = 6;
if(Model.Content.HasValue("numberOfItemsPerPage")){
    pageSize = Model.Content.GetPropertyValue<int>("numberOfItemsPerPage");
}
var page = 1; int.TryParse(Request.QueryString["page"], out page);
var items = Model.Items;
var totalPages = (int)Math.Ceiling((double)items.Count() / (double)pageSize);

if (page > totalPages)
{
    page = totalPages;
}
else if (page < 1)
{
    page = 1;
}


foreach(var item in items.Skip((page - 1) * pageSize).Take(pageSize).OrderBy(x=>x.Name)){

     <h2><a href="#">Olaaaaaaaa</a></h2>    
}


if (totalPages > 1)
{
    <div class="pagination">
        <ul>
            @if (page > 1)
            {
                <li><a href="?page=@(page-1)">Prev</a></li>
            }
            @for (int p = 1; p < totalPages + 1; p++)
            {
                <li class="@(p == page ? "active" : string.Empty)">
                    <a href="?page=@p">@p</a>
                </li>
            }
            @if (page < totalPages)
            {
                <li><a href="?page=@(page+1)">Next</a></li>
            }
        </ul>
    </div>
}

}

Would really appreciate some help on this.

Thank you very much!

Copy Link

is working on a reply...

Flag this post as spam?

Item Paging in Umbraco