Umbraco分页按钮动态类

Question

我们目前已经发布了一个Umbraco网站，我们已经设法使用C＃和razor创建和设置分页代码。

有人可以建议按钮的最佳方式是包含一个动态类来表示用户所在的页面吗？所以link / pagebutton＆＃39; 1＆＃39;有一类活跃的＆＃39;当用户在第一页上时应用，依此类推。

这样我们就可以提高可用性并限制用户界面的混淆，因为我们预计会很快增加页面数量。

主要新闻页面模板上的分页部分视图的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;
}

Answer 1

你在哪里得到错误？从快速浏览一下您的代码就可以了。它看起来像你的

试试这个：

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