Динамический класс кнопки пагинации Umbraco

В настоящее время мы опубликовали сайт Umbraco, и нам удалось создать и стилизовать код разбивки на страницы с помощью C # и бритвы.

Может ли кто-нибудь посоветовать, как лучше всего включить в кнопки динамический класс для представления страницы, на которой находится пользователь? Таким образом, ссылка / кнопка страницы «1» имеет класс «активный», применяемый, когда пользователь находится на первой странице, и так далее.

Это сделано для того, чтобы мы могли повысить удобство использования и ограничить путаницу в пользовательском интерфейсе, поскольку мы ожидаем, что количество страниц в ближайшее время увеличится.

Div частичного представления разбивки на страницы в шаблоне главной страницы новостей:

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

Код частичного просмотра разбиения на страницы:

@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;
}