Feature - Internal Links - Pagination

Display child pages in a paginated card grid with Bootstrap pagination controls

The Internal Links - Pagination feature displays child pages of the current page as a card grid with Bootstrap pagination controls. It shows a fixed number of pages per view (currently 3) with Prev/Next buttons and numbered page links.

This is ideal for sections with many child pages where showing them all at once would overwhelm the page. The pagination controls include a fragment anchor so clicking a page number scrolls back to the pagination section rather than the top of the page.

The view reads a page query parameter from the URL to determine which subset of child pages to display. It calculates the start index based on the page number and page size, then uses LINQ's Skip() and Take() to select the correct slice of pages.

Pagination controls are rendered using Bootstrap's pagination component. The active page is highlighted, and Prev/Next links are disabled when at the boundaries. Each link includes a #pagination fragment anchor to keep the user's scroll position near the pagination controls.

In BlockPreview mode (when HttpContext is null), the view shows a simple preview message instead of the full pagination UI, since query parameters aren't available in the backoffice preview context.

@using Microsoft.AspNetCore.Http
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<BlockGridItem<FeatureInternalLinksPagination>>
@inject IHttpContextAccessor HttpContextAccessor

@{
    Layout = "_Layout_Features.cshtml";

    var currentPage = UmbracoContext?.PublishedRequest?.PublishedContent;
    var childPages = currentPage?.Children<WebPage>()?.ToArray() ?? [];

    var pageSize = 3;
    var queryPageValue = HttpContextAccessor.HttpContext?.Request.Query["page"];
    var currentPageNumber = string.IsNullOrWhiteSpace(queryPageValue)
        ? 1 : Convert.ToInt32(queryPageValue);

    var startItemIndex = currentPageNumber * pageSize - pageSize;

    var displayedPages = childPages
        .Where(x => x.IsVisible())
        .OrderBy(x => x.SortOrder)
        .Skip(startItemIndex)
        .Take(pageSize);
}

// ... pagination nav + card grid rendering

Feature - Internal Links - Pagination

What It Does^#

How It Works^#

Child Page 01

Child Page 02

Child Page 02

On this page

Child Page 01

Child Page 02

Child Page 02

featureInternalLinksPagination.cshtml^#