Hi,

All looks in order you just need to filter your nodes when outputting them:

Something like below will work:

    @foreach (var item in nodes.Skip((page - 1) * pageSize).Take(pageSize))
    {
        item specifcs here
    }

Thanks, Lewis

Hello,

I'm still having trouble trying to get paging to work, would appreciate if somebody could point me in the right direction.

This is my code;

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.Blog>
@using ContentModels = Umbraco.Web.PublishedContentModels;
@{
    Layout = "Master.cshtml";

    int pageSize = 3; // How many items per page
    int page; // The page we are viewing

    /* Set up parameters */

    if (!int.TryParse(Request.QueryString["page"], out page))
    {
        page = 1;
    }

    /* This is your basic query to select the nodes you want */

    var nodes = Model.Content.Children.Where(x => x.DocumentTypeAlias == "blogItem").OrderBy("CreateDate desc");

    int totalNodes = nodes.Count();
    int totalPages = (int)Math.Ceiling((double)totalNodes / (double)pageSize);

    /* Bounds checking */

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

    }

  <div class="body-section">
    <div class="body-container w-container">
      <h1 class="main-page-heading">@Umbraco.Field("blogTitle")</h1>
@Html.Partial("ListBlogItems")
@{
    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>
    }
    }
      </div>
  </div>

I think I know what the issue is I just don't know how to resolve it, I assume its because I'm using partial view and the top part of the code should be in the partial view section. But when doing that it doesn't read the "totalpages" at the bottom.

Hi Matt, can you post the code inside you partial view. It seems that you don't pass any parameters.

Mila

Yea I guessed that was the issue, but when I enter anything in the partial view it seems my main page wont pick up any of the code.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{
    var selection = Model.Content.Site().FirstChild("blog").Children("blogItem")
                        .Where(x => x.IsVisible())
                        .OrderBy("CreateDate desc");
}
@foreach (var item in selection)
{
    <article>
        <div class="blog-item-row w-row">
            <div class="w-col w-col-6">
                <div class="blog-block-left-new">
                    <div class="blog-post-date">@Umbraco.Field("createDate")</div><a href="@item.Url" class="blog-post-title-link">@item.Name</a>
                    <p class="blog-summary-paragraph">@item.GetPropertyValue("blogTeaser")</p>
                    <div class="post-author-title">Written by</div>
                    <div class="post-author">@Umbraco.Field("creatorName")</div>
                </div>
            </div>
            <div class="w-col w-col-6">
                <div class="blog-image-block">
                    <a href="@item.Url">

                        @{
                            var blogImage = item.GetPropertyValue<IPublishedContent>("blogImage");
                            if (blogImage != null)
                            {
                                string src = @Url.Content("~/") + blogImage.Url.Remove(0, 1);
                                <img src="@src" height="300" width="374" srcset="" class="blog-image">
                            }
                        }
                    </a>
                </div>
            </div>
    </article>
}

Hi Matt, I don't see where you iterate through your nodes. Bellow is an example without partial view.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

int pageSize = 3; // How many items per page
int page; // The page we are viewing

/* Set up parameters */

if (!int.TryParse(Request.QueryString["page"], out page))
{
    page = 1;
}

/* This is your basic query to select the nodes you want */

var nodes = Model.Content.Children.Where(x => x.DocumentTypeAlias == "blogItem").OrderBy("CreateDate desc");

int totalNodes = nodes.Count();
int totalPages = (int)Math.Ceiling((double)totalNodes / (double)pageSize);

/* Bounds checking */

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

}
 <div class="body-section">
    <div class="body-container w-container">
      <h1 class="main-page-heading">@Umbraco.Field("blogTitle")</h1>
    @foreach(var item in nodes.Skip((page-1)*pageSize).Take(PageSize))
    {
     <article>
    <div class="blog-item-row w-row">
        <div class="w-col w-col-6">
            <div class="blog-block-left-new">
                <div class="blog-post-date">@Umbraco.Field("createDate")</div><a href="@item.Url" class="blog-post-title-link">@item.Name</a>
                <p class="blog-summary-paragraph">@item.GetPropertyValue("blogTeaser")</p>
                <div class="post-author-title">Written by</div>
                <div class="post-author">@Umbraco.Field("creatorName")</div>
            </div>
        </div>
        <div class="w-col w-col-6">
            <div class="blog-image-block">
                <a href="@item.Url">

                    @{
                        var blogImage = item.GetPropertyValue<IPublishedContent>("blogImage");
                        if (blogImage != null)
                        {
                            string src = @Url.Content("~/") + blogImage.Url.Remove(0, 1);
                            <img src="@src" height="300" width="374" srcset="" class="blog-image">
                        }
                    }
                </a>
            </div>
        </div>
</article>
    }
    @{
        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>
        }
        }
          </div>
      </div>

Hello Mila,

Thanks, so in theory I can scrap the idea of using the partial view? and just use the query to select and dispay my nodes?

I tried your code just on my blog main page and get the following error;

is working on a reply...