Create Pagination in Umbraco Blog and News Page

Welcome to Programming Tutorial official website. Today - we are going to cover how to solve / find the solution of this error Create Pagination in Umbraco Blog and News Page on this date .

I am New to ASP.Net and Umbraco, Here i want to create a Pagination for Blog and News Listing Page. So here is my NewsLisitng.Xslt file. Please help me how can i create the pagination. Here i need a pagination like dispaly 1 to 10 links.

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet
  version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:msxml="urn:schemas-microsoft-com:xslt"
  xmlns:umbraco.library="urn:umbraco.library"
  xmlns:tagsLib="urn:tagsLib"
  xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings"
  xmlns:BlogLibrary="urn:BlogLibrary"
  exclude-result-prefixes="msxml umbraco.library tagsLib Exslt.ExsltStrings BlogLibrary">


    <xsl:output method="html" omit-xml-declaration="yes"/>

    <xsl:param name="currentPage"/>
    <xsl:variable name="numberOfPosts" select="2"/>

    <xsl:variable name="pageNumber">
        <xsl:choose>
            <xsl:when test="umbraco.library:RequestQueryString('page') &lt;= 0 or string(umbraco.library:RequestQueryString('page')) = '' or string(umbraco.library:RequestQueryString('page')) = 'NaN'">1</xsl:when>
            <xsl:otherwise>
                <xsl:value-of select="umbraco.library:RequestQueryString('page')"/>
            </xsl:otherwise>
        </xsl:choose>
    </xsl:variable>

    <xsl:variable name="filter">
        <xsl:choose>
            <xsl:when test="string-length(umbraco.library:Request('filterby')) &gt; 0">
                <xsl:value-of select="umbraco.library:Request('filterby')"/>
            </xsl:when>
            <xsl:otherwise>
                <xsl:value-of select="''"/>
            </xsl:otherwise>
        </xsl:choose>
    </xsl:variable>

    <xsl:variable name="numberOfRecords">
        <xsl:choose>
            <xsl:when test="$filter = ''">
                <xsl:value-of select="count($currentPage/ancestor-or-self::umbBlog//umbBlogPost)"/>
            </xsl:when>
            <xsl:otherwise>
                <xsl:value-of select="count($currentPage/ancestor-or-self::umbBlog//umbBlogPost [contains(Exslt.ExsltStrings:lowercase(./tags), Exslt.ExsltStrings:lowercase($filter))])"/>
            </xsl:otherwise>
        </xsl:choose>
    </xsl:variable>

    <xsl:template match="/">


        <xsl:if test="$filter != ''">
            <h2 class="page-title">
                Archive for tag:
                <span>
                    <xsl:value-of select="$filter"/>
                </span>
            </h2>
        </xsl:if>

        <xsl:if test="$currentPage [name() = 'umbDateFolder']">
            <h2 class="page-title">
                Monthly Archives: <xsl:value-of select="umbraco.library:FormatDateTime(concat($currentPage/../@nodeName,'-',$currentPage/@nodeName,'-11T10:24:46'),'MMMM yyyy')"/>
            </h2>
        </xsl:if>

        <xsl:if test="$numberOfRecords &gt; $numberOfPosts">
            <div id="nav-above" class="navigation">

                <div class="nav-previous">
                    <xsl:if test="(($pageNumber ) * $numberOfPosts) &lt; ($numberOfRecords)">
                        <span class="meta-nav">&#171; </span>
                        <a href="?page={$pageNumber +1}">Older posts</a>
                    </xsl:if>
                </div>

                <div class="nav-next">
                    <xsl:if test="$pageNumber &gt; 1">
                        <a href="?page={$pageNumber -1}">Newer posts</a>
                        <span class="meta-nav"> &#187;</span>
                    </xsl:if>
                </div>

            </div>
        </xsl:if>

        <xsl:if test="$filter = ''">


            <xsl:for-each select="$currentPage/ancestor-or-self::umbBlog//umbBlogPost">
                <xsl:sort select="./PostDate" order="descending" />

                <xsl:if test="position() &gt; $numberOfPosts * (number($pageNumber)-1) and
        position() &lt;= number($numberOfPosts * (number($pageNumber)-1) +
        $numberOfPosts )">

                    <xsl:call-template name="showpost">
                        <xsl:with-param name="post" select="."/>
                    </xsl:call-template>

                </xsl:if>

            </xsl:for-each>
        </xsl:if>

        <xsl:if test="$filter != ''">

            <xsl:for-each select="$currentPage/ancestor-or-self::umbBlog//umbBlogPost [contains(Exslt.ExsltStrings:lowercase(./tags), Exslt.ExsltStrings:lowercase($filter))]">
                <xsl:sort select="./PostDate" order="descending" />
                <xsl:if test="position() &gt; $numberOfPosts * (number($pageNumber)-1) and
        position() &lt;= number($numberOfPosts * (number($pageNumber)-1) +
        $numberOfPosts )">
                    <xsl:call-template name="showpost">
                        <xsl:with-param name="post" select="."/>
                    </xsl:call-template>
                </xsl:if>
            </xsl:for-each>
        </xsl:if>

    </xsl:template>

    <xsl:template name="showpost">
        <xsl:param name="post"/>

        <div class="latestnews-wrap one-column-block hentry post publish author-{$post/@writername} tag-boat tag-lake {umbraco.library:FormatDateTime($post/@updateDate, 'yYYYY mMM')} y2008 m10 d17 h04">
            <ul>
                <li>
                    <div class="left-column">
                        <div class="entry-date calendar">
                            <abbr class="published" title="{umbraco.library:ShortDate($post/PostDate)}">
                                <span class="day">
                                    <xsl:value-of select="umbraco.library:FormatDateTime($post/PostDate, 'MM/yy')"/>
                                </span>
                            </abbr>
                        </div>
                    </div>
                    <!--.left-column-->
                    <div class="right-column">
                        <h4 class="entry-title" id="post-{$post/@id}">
                            <a href="{umbraco.library:NiceUrl($post/@id)}" title="Permalink to {$post/@nodeName}">
                                <xsl:value-of select="$post/@nodeName"/>
                            </a>
                        </h4>
                        <xsl:if test="$post/photo != ''">
                            <xsl:variable name="media" select="umbraco.library:GetMedia($post/photo, 0)" />
                            <xsl:if test="$media">
                                <div class="thumbNail">
                                    <img src="{$media/umbracoFile}" alt="{$media/altText}"/>
                                    <xsl:if test="$post/photoCaption">
                                        <span class="caption">
                                            <xsl:value-of select="$post/photoCaption" />
                                        </span>
                                    </xsl:if>
                                </div>
                            </xsl:if>
                        </xsl:if>

                        <div class="entry-content">
                            <xsl:value-of select="$post/shortDescription" disable-output-escaping="yes"/>
                        </div>

                        <a href="{umbraco.library:NiceUrl($post/@id)}" class="more-link news-more">Read More</a>
                    </div>
                    <!--.right-column-->
                </li>
            </ul>

        </div>
    </xsl:template>
</xsl:stylesheet>

Answer

I would highly suggest reading this. and this.

You will get to learn along the way which is helpful considering you’re starting off with ASP.NET and Umbraco.