articulate pager on listcshtml view, show current page number but be a link to respective page of article

Steven Willett 10 posts 30 karma points

Feb 05, 2015 @ 16:41

Articulate Pager on list.cshtml view, show current page number but be a link to respective page of article?

Hi,

I have the pager rending newer & older correctly and I have made use of the numeric value

@(Model.CurrentPageIndex +1)

This shows the number of pages of articles however they are not linked so when I click the number the respective page of articles does not show?

<span class="page-number">Page @(Model.CurrentPageIndex + 1) of
@Model.TotalPages</span>

So taking the above, I need to wrap this in a link that is the current

@Model.Url

for example and not

@Model.PreviousUrl

@Model.NextUrl

How can I get the Blog's Root Url as the PagerModel does not allow for

@Model.RootUrl

I was planning on setting this as a variable of say rootUrl & then use this to populate the variable for the pageUrl

So far I have tried the following with no luck, almost but just this last bit:

@{
    var rootUrl = node.UrlName;
    var pageUrl = rootUrl.Model.CurrentPageIndex.Url;
}

<div class="row">
            <span class="page-number">@(Model.CurrentPageIndex + 1) of @Model.TotalPages</span>
            <nav>
                <ul class="pagination">

                    @if (Model.HasPrevious) {
                        <li class="" role="pagination">
                            <a class="" href="@Model.PreviousUrl" aria-label="Newer">
                                <span aria-hidden="true">«</span>
                            </a>
                        </li>
                    } else {
                        <li><span aria-hidden="true">«</span></li>
                    }

                    @for (int cpi = Model.CurrentPageIndex - 3; cpi < Model.CurrentPageIndex + 3; cpi++)
                    {
                        <li><a href="@pageUrl" aria-label="Page">@(Model.CurrentPageIndex +1)</a></li>
                    } 

                    @if (Model.HasNext)
                    {
                        <li class="" role="pagination">
                            <a class="" href="@Model.NextUrl" aria-label="Previous">
                                <span aria-hidden="true">»</span>
                            </a>
                        </li>
                    }
                    else
                    {
                       <li><span aria-hidden="true">»</span></li>
                    }

                </ul>
            </nav>
    </div>

Any advice or suggestions appreciated.

Copy Link

Jesse Andrews 191 posts 716 karma points c-trib

Feb 06, 2015 @ 02:44

You can get the base url from Model.PreviousUrl and Model.NextUrl using Regex. Here is how I handled it.

    //ensures that logic has a url to work with if the index is at the end or the beginning 
    string baseUrl = Model.PreviousUrl.IsNullOrWhiteSpace() ? Model.NextUrl : Model.PreviousUrl; 
    //regex to filter out the pagination query strings 
    Regex clipPage = new Regex(@".+(?=\?p=\d+$)"); 
    //removes the query string from the base url 
    baseUrl = clipPage.Match(baseUrl).Value;

Then to link to a particular page you just use @(baseUrl)?p={page} where {page} is the page number.

Also, be sure to use cpi in your for loop, as Model.CurrentPageIndex +1 will be constant for the whole loop.

Hope that helps.

Copy Link

Steven Willett 10 posts 30 karma points

Feb 06, 2015 @ 11:05

@Jesse Andrews,

Thank you for this, I have managed to make some head way with this now as a result of your response, thank you.

My last hurdle is to now restrict the numerical results based on actual available pages plus to not show the - (Minus) symbol next to the negative previous pages (most don't actually exist), this is my code so far:

@using System.Text.RegularExpressions
@model Articulate.Models.PagerModel

@{
    @* ##### Initial Logic ##### *@
    var rootUrl = Model.PreviousUrl.IsNullOrWhiteSpace() ? Model.NextUrl : Model.PreviousUrl;
    var clipPage = new Regex(@".+(?=\?p=\d+$)");
    rootUrl = clipPage.Match(rootUrl).Value;

    if (rootUrl != null) {
        rootUrl = rootUrl.Substring(0, rootUrl.IndexOf("?p=") + 3);

        <div class="row">
            @* ##### Show number of pages ##### *@
            <span class="page-number">@(Model.CurrentPageIndex + 1) of @Model.TotalPages</span>

            @* ##### Horizontal Pager Navigation ##### *@
            <nav>
                <ul class="pagination">
                    @* ##### Previous Button ##### *@
                    @if (Model.HasPrevious) {
                        <li class="" role="pagination">
                            <a class="" href="@Model.PreviousUrl" aria-label="Newer">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                    } else {
                        <li><span aria-hidden="true">&laquo;</span></li>
                    }


                    @* ##### Page Numbers ##### *@
                    @for (int cpi = Model.CurrentPageIndex - 3; cpi < Model.CurrentPageIndex + 4; cpi++)
                    {
                        var pageUrl = rootUrl + (Model.CurrentPageIndex + cpi);

                        <li><a href="@pageUrl" aria-label="Page">@(Model.CurrentPageIndex + cpi)</a></li>
                    }


                    @* ##### Next Button ##### *@
                    @if (Model.HasNext) {
                        <li class="" role="pagination">
                            <a class="" href="@Model.NextUrl" aria-label="Previous">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    } else {
                        <li><span aria-hidden="true">&raquo;</span></li>
                    }

                </ul>
            </nav>
        </div>
    }
}

It's starting to look good:

Copy Link

Steven Willett 10 posts 30 karma points

Feb 06, 2015 @ 11:43

Solution:

@model Articulate.Models.PagerModel

@{
    @* ##### Initial Logic ##### *@
    var rootUrl = Model.PreviousUrl ?? Model.NextUrl;

    if (rootUrl != null) {
        rootUrl = rootUrl.Substring(0, rootUrl.IndexOf("?p=", StringComparison.Ordinal) + 3);

        <div class="row">
            @* ##### Show number of pages ##### *@
            <span class="page-number">@(Model.CurrentPageIndex + 1) of @Model.TotalPages</span>

            @* ##### Horizontal Pager Navigation ##### *@
            <nav>
                <ul class="pagination">
                    @* ##### Previous Button ##### *@
                    @if (Model.HasPrevious) {
                        <li class="" role="pagination">
                            <a class="" href="@Model.PreviousUrl" aria-label="Newer">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                    } else {
                        <li><span aria-hidden="true">&laquo;</span></li>
                    }


                    @* ##### Page Numbers ##### *@
                    @for (int cpi = Math.Max(Model.CurrentPageIndex - 3, 0); cpi < Math.Min(Model.CurrentPageIndex + 4, Model.TotalPages); cpi++)
                    {
                        var pageUrl = rootUrl + (cpi + 1);

                        <li><a href="@pageUrl" aria-label="Page">@(cpi + 1)</a></li>
                    }


                    @* ##### Next Button ##### *@
                    @if (Model.HasNext) {
                        <li class="" role="pagination">
                            <a class="" href="@Model.NextUrl" aria-label="Previous">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    } else {
                        <li><span aria-hidden="true">&raquo;</span></li>
                    }

                </ul>
            </nav>
        </div>
    }
}

Copy Link

is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Continue discussion

Flag this post as spam?

Articulate Pager on list.cshtml view, show current page number but be a link to respective page of article?