Umbraco Razor paging

Question

У меня возникли проблемы с поиском механизма поискового вызова в Umbracos Razor viewengine с использованием AJAX.

Дело в том, что подкачки должен быть таким:

1 | 2 | 3 | 4 ... 16 Next >> 

Когда пользователь нажал на что-либо большее, чем 4 это должно быть так:

<< Previous 1 ... 6 | 7 | 8 | 9 | 10 ... 16 Next >> 

Так отображает предыдущие две страницы и рядом со страницами.

Теперь, когда пользователь щелкает вплоть до последних 4-х страниц, подкачки должен быть таким:

<< Previous 1 ... 13 | 14 | 15 | 16 

Я получил это работает, но код ... не очень, по меньшей мере. Это неуклюже, и у меня есть ощущение, что это может быть сделано намного проще, чем это - просто не уверен, как именно :-)

Код (убедитесь, что у вас есть приятная, теплая чашка кофе;))

 @* Paging *@ 
     var resultCount = result.Count(); 

     if(resultCount > take) 
     { 
      <div class="paging"> 
      @{ 
       int previous = pageNumber - 1; 

       if(previous >= 0) 
       { 
        <a class="previous" id="prev" href="#" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @previous, '@action', '@ingredientIds', '@ingredientId');"><img src="/img/buttons/pink-hand-left.png" />@umbraco.library.GetDictionaryItem("Previous")</a> 
       } 

       double numOfPagingLinks = Convert.ToDouble(resultCount)/take; 
       int roundedNumOfPagingLinks = Convert.ToInt32(Math.Floor(numOfPagingLinks)); 
       int lastPage = roundedNumOfPagingLinks + 1; 

       if(lastPage > 4) 
       { 
        // Always show first page number 
       <a href="#" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', '0', '@action', '@ingredientIds', '@ingredientId');">1</a> 

        if(pageNumber + 1 == lastPage) 
       { 
        <span> ... </span> 
        for(int i = lastPage - 4; i < lastPage - 1; i++) 
        { 
         int pagingNumber = i; 
         int numberToDisplay = i + 1; 

         string className = i == pageNumber ? "active" : "inactive";            
         <a href="#" class="@className" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @pagingNumber, '@action', '@ingredientIds', '@ingredientId');">@numberToDisplay</a> 
         <span> | </span> 
        } 
       } 
       else 
       { 
        if(pageNumber < 3) 
        { 
         for(int i = 1; i < 5; i++) 
         { 
         int pagingNumber = i; 
         int numberToDisplay = i + 1; 

         string className = i == pageNumber ? "active" : "inactive"; 

         if(i == 1) 
         { 
          <span> | </span> 
         }      
         <a href="#" class="@className" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @pagingNumber, '@action', '@ingredientIds', '@ingredientId');">@numberToDisplay</a> 
         if(i < 4) 
         { 
          <span> | </span> 
         } 
         else 
         { 
          <span> ... </span> 
         } 
         } 
        } 
        else 
        { 
         if(pageNumber == 3) 
         { 
         for(int i = 1; i < 6; i++) 
         { 
          int pagingNumber = i; 
          int numberToDisplay = i + 1; 

          string className = i == pageNumber ? "active" : "inactive"; 

          <a href="#" class="@className" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @pagingNumber, '@action', '@ingredientIds', '@ingredientId');">@numberToDisplay</a> 
          if(i < 5) 
          { 
           <span> | </span> 
          } 
          else 
          { 
           <span> ... </span> 
          } 
         } 
         } 
         else if(pageNumber > 3) 
         { 
         <span> ... </span>      
         if(pageNumber >= lastPage - 4) 
         { 
          for(int i = pageNumber - 2; i < lastPage - 1; i++) 
          { 
           int pagingNumber = i; 
           int numberToDisplay = i + 1; 

           string className = i == pageNumber ? "active" : "inactive"; 

           <a href="#" class="@className" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @pagingNumber, '@action', '@ingredientIds', '@ingredientId');">@numberToDisplay</a> 
           <span> | </span>        
          } 
         }       
         else 
         {       
          var firstPrevious = pageNumber - 1; 
          var secondPrevious = pageNumber - 2; 
          var firstPreviousToDisplay = firstPrevious + 1; 
          var secondPreviousToDisplay = secondPrevious + 1; 

          <a href="#" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @secondPrevious, '@action', '@ingredientIds', '@ingredientId');">@secondPreviousToDisplay</a>       
          <span> | </span> 

          <a href="#" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @firstPrevious , '@action', '@ingredientIds', '@ingredientId');">@firstPreviousToDisplay </a>       
          <span> | </span> 

          for(int i = pageNumber; i < pageNumber + 3; i++) 
          { 
           int pagingNumber = i; 
           int numberToDisplay = i + 1; 

           string className = i == pageNumber ? "active" : "inactive"; 

           <a href="#" class="@className" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @pagingNumber, '@action', '@ingredientIds', '@ingredientId');">@numberToDisplay</a> 
           if(i < pageNumber + 2) 
           { 
           <span> | </span> 
           } 
          } 

          <span> ... </span> 
         } 
         }        
        } 
       } 
        // Always show last pagenumber      
        <a href="#" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @roundedNumOfPagingLinks, '@action', '@ingredientIds', '@ingredientId');">@lastPage</a> 
       } 
       else 
       { 
        for (int i = 0; i < roundedNumOfPagingLinks + 1; i++) 
       { 
        int pagingNumber = i; 
        int numberToDisplay = i + 1; 

        string className = i == pageNumber ? "active" : "inactive"; 

        <a href="#" class="@className" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @pagingNumber, '@action', '@ingredientIds', '@ingredientId');">@numberToDisplay</a><span> | </span> 
       } 
       } 

       int next = pageNumber + 1; 
       if (next <= roundedNumOfPagingLinks) 
       { 
        <a class="next" id="next" href="#" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @next, '@action', '@ingredientIds', '@ingredientId');">@umbraco.library.GetDictionaryItem("Next")<img src="/img/buttons/pink-hand-right.png" /></a>   
       } 

      } 
      </div> 
     }        

result переменная коллекция находится в фильтр/поиск. Переменная pageNumber - это номер страницы, которую пользователь нажал.

Я знаю, что вышеуказанный код является сложным и не красивым, но любая помощь/подсказка очень ценится!

Заранее спасибо.

Answer 1

Как насчет этого подхода: вы можете считать, что ваш пейджинг имеет три возможных состояния и 7 компонентов. Состояние № 1 - это то, что я бы назвал left (или left_extended, если общее количество более 4 страниц), то есть пользователь остается на первых 4 страницах. Состояние № 2 - middle, это когда пользователь перемещается и еще не достиг последних 4 страниц. Состояние № 3 - это то, что я бы назвал right, что означает, что пользователь достиг последних 4 страниц.

Семь компонентов расположены так:

<< Previous1...6 | 7 | 8 | 9 | 10...16Next >>

компонент в середине 6 | 7 | 8 | 9 | 10 является то, что я называю middle block. Учитывая три состояния и 7 компонентов следующий код, вероятно, будет достаточно для всех состояний:

// Middle block limits 
var middleBlockStart = 0; 
var middleBlockFinish = 0; 
var middleBlockCount = 4; 

int resultCount = result.Count(); 
int pageNumber = // Get information from query string 
int numberOfPages = // Get the total number of pages 

// There are three possible paging states: left, middle and right 
// First we determine what state the paging is at and 
// set the middle block limits 
var pagingState = string.Empty; 

if (pageNumber >= 4) { 
    if (numberOfPages > middleBlockCount) 
     pagingState = "left_extended"; 
    else 
     pagingState = "left"; 

    middleBlockStart = 1; 
} 
else if (pageNumber >= resultCount - middleBlockCount + 1) { 
    pagingState = "right"; 
    middleBlockStart = resultCount - middleBlockCount + 1; 
} 
else { 
    pagingState = "middle"; 
    middleBlockStart = pageNumber - 2; 
    middleBlockCount = 5; 
} 

middleBlockFinish = middleBlockStart + middleBlockCount; 

// Now we print each one of the seven components 
// based on the state of the paging 

@if (pagingState == "middle" || pagingState == "right") { 
    <a class="previous" id="prev" href="#" onclick="ajaxFilterSearch(...);"> 
     <img src="/img/buttons/pink-hand-left.png" />@umbraco.library.GetDictionaryItem("Previous") 
    </a> 
    <a href="#" onclick="ajaxFilterSearch(...);">1</a> 
    <span> ... </span> 
} 

@for (int i = middleBlockStart; i < middleBlockFinish; i++) { 
    <a href="#" class="@className" onclick="ajaxFilterSearch(...);">@i</a> 

    if (i != middleBlockFinish - 1) 
     <span> | </span> 
} 

@if (pagingState == "left_extended" || pagingState == "middle") { 
    <span> ... </span> 
    <a href="#" onclick="ajaxFilterSearch(...);">@lastPage</a> 
} 

@if (pagingState.StartsWith("left") || pagingState == "middle") { 
    <a class="next" id="next" href="#" onclick="ajaxFilterSearch(...);"> 
     @umbraco.library.GetDictionaryItem("Next")<img src="/img/buttons/pink-hand-right.png" /> 
    </a> 
} 

Я сократил ajaxFilterSearch() звонки для лучшей читаемости. Надеюсь, это поможет :)