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

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?

Discussions

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...

Flag this post as spam?

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