Umbraco Pagination Button Dynamic Class

Question

We've currently published an Umbraco site and we've managed to create and style pagination code using C# and razor.

Could anyone please advise the best way for the buttons to include a dynamic class to represent the page the user is on? So the link/pagebutton '1'has a class of 'active' applied when the user is on the first page and so on.

This is so that we can aid usability and limit UI confusion as we anticipate the number of pages to increase fairly soon.

The div of the pagination partial view on the main News page template:

<div class="section clearfix content">
<div class="wrapper clearfix">
        @Html.Partial("paginatedNews")  
</div><!--wrapper-->
</div><!--section content-->

The pagination partial view code:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{ 
int pageSize;// How many items per page
int page;// The page we are viewing

/* Set up parameters */


    pageSize =15;

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

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

 var nodes = CurrentPage.Site().FirstChild("News").Children("NewsItem").
 Where("Visible").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;
 }
 }




 @foreach (var item in nodes.Skip((page - 1) * pageSize).Take(pageSize))
 {
   <div class="news-item">
         <a href="@item.Url" title="@item.Title">
            <p class="title">@item.Name</p>
            <p>@item.Summary</p>
            <div class="button">Read More <i class="fa fa-chevron-right">    
 </i></div>
        </a>
    </div> 
  }


 <div class="page-number">
 @for (int p = 1; p < totalPages + 1; p++)
 {
         string selected = (p == page) ? "selected" : String.Empty;
         <a href="?page=@p" title="Go to page @p of results">@p</a> 
 }
 </div>

 The pagination CSS:

 /*pagination*/
.page-number {
 border-top: 1px dotted #9b480a;
 padding: 30px 0 0;
 text-align: center;
 font-size:0;
 }

.page-number a {
color:#fff;
background-color:#9b480a;
padding:10px 15px;
text-align:center;
border-right:1px solid #4c2203;
box-sizing:border-box;
font-size:16px;
display:inline-block;
margin:10px 0 0
}

.page-number a.active,
.page-number a:hover,
.page-number a:active,
.page-number a:focus {
background-color:#4c2203;
}

.page-number a:first-child {
    -moz-border-radius: 5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px;
    -khtml-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}

.page-number a:last-child {
    -moz-border-radius: 0 5px 5px 0;
    -webkit-border-radius: 0 5px 5px 0;
    -khtml-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
border-right:none;
}

Pheonyx Pheonyx · Accepted Answer · 2016-03-18T16:31:15

where are you getting an error? From a quick glance at your code you are basically there. It looks like your

Try this:

<a href="?page=@p" class="@(p == page ? "active" : String.Empty)" title="Go to page @p of results">@p</a>

Umbraco Pagination Button Dynamic Class

1 Answers