title: Umbraco Razor paging
body: <p>I'm having some trouble figuring out a paging mechanism in Umbracos Razor viewengine using AJAX.</p>
  
  <p>Thing is, that the paging needs to be like this:</p>
  
  <pre><code>1 | 2 | 3 | 4 ... 16    Next &gt;&gt;
  </code></pre>
  
  <p>When the user has clicked on anything greater than <code>4</code> it needs to be like this:</p>
  
  <pre><code>&lt;&lt; Previous  1 ... 6 | 7 | 8 | 9 | 10 ... 16  Next &gt;&gt;
  </code></pre>
  
  <p>So it displays the previous two pages and the next to pages.</p>
  
  <p>Now, when a user clicks all the way to the last 4 pages, the paging needs to be like this:</p>
  
  <pre><code>&lt;&lt; Previous  1 ... 13 | 14 | 15 | 16 
  </code></pre>
  
  <p>I have got it working, but the code is ... not pretty, to say the least. It's clumsy and I've got a feeling that it could be made a lot more simple than it is - just not sure how exactly :-)</p>
  
  <p>The code (make sure you have a nice, warm cup of coffee ;-))</p>
  
  <pre><code>        @* Paging *@
          var resultCount = result.Count();
  
          if(resultCount &gt; take)
          {
             &lt;div class="paging"&gt;
               @{
                   int previous = pageNumber - 1;
  
                 if(previous &gt;= 0)
                 {
                    &lt;a class="previous" id="prev" href="#" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @previous, '@action', '@ingredientIds', '@ingredientId');"&gt;&lt;img src="/img/buttons/pink-hand-left.png" /&gt;@umbraco.library.GetDictionaryItem("Previous")&lt;/a&gt;
                 }
  
                 double numOfPagingLinks = Convert.ToDouble(resultCount) / take;
                 int roundedNumOfPagingLinks = Convert.ToInt32(Math.Floor(numOfPagingLinks));
                 int lastPage = roundedNumOfPagingLinks + 1;
  
                 if(lastPage &gt; 4)
                 {
                     // Always show first page number
                   &lt;a href="#" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', '0', '@action', '@ingredientIds', '@ingredientId');"&gt;1&lt;/a&gt;
  
                    if(pageNumber + 1 == lastPage)
                   {
                      &lt;span&gt; ... &lt;/span&gt;
                      for(int i = lastPage - 4; i &lt; lastPage - 1; i++)
                      {
                         int pagingNumber = i;
                           int numberToDisplay = i + 1;
  
                           string className = i == pageNumber ? "active" : "inactive";                                            
                           &lt;a href="#" class="@className" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @pagingNumber, '@action', '@ingredientIds', '@ingredientId');"&gt;@numberToDisplay&lt;/a&gt;
                           &lt;span&gt; | &lt;/span&gt;
                      }
                   }
                   else
                   {
                     if(pageNumber &lt; 3)
                     {
                        for(int i = 1; i &lt; 5; i++)
                        {
                           int pagingNumber = i;
                           int numberToDisplay = i + 1;
  
                           string className = i == pageNumber ? "active" : "inactive";
  
                           if(i == 1)
                           {
                              &lt;span&gt; | &lt;/span&gt;
                           }                      
                           &lt;a href="#" class="@className" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @pagingNumber, '@action', '@ingredientIds', '@ingredientId');"&gt;@numberToDisplay&lt;/a&gt;
                           if(i &lt; 4)
                           {
                             &lt;span&gt; | &lt;/span&gt;
                           }
                           else
                           {
                             &lt;span&gt; ... &lt;/span&gt;
                           }
                        }
                     }
                     else
                     {
                        if(pageNumber == 3)
                        {
                           for(int i = 1; i &lt; 6; i++)
                           {
                              int pagingNumber = i;
                               int numberToDisplay = i + 1;
  
                               string className = i == pageNumber ? "active" : "inactive";
  
                              &lt;a href="#" class="@className" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @pagingNumber, '@action', '@ingredientIds', '@ingredientId');"&gt;@numberToDisplay&lt;/a&gt;
                              if(i &lt; 5)
                               {
                                 &lt;span&gt; | &lt;/span&gt;
                               }
                               else
                               {
                                 &lt;span&gt; ... &lt;/span&gt;
                               }
                           }
                        }
                        else if(pageNumber &gt; 3)
                        {
                           &lt;span&gt; ... &lt;/span&gt;                       
                           if(pageNumber &gt;= lastPage - 4)
                           {
                              for(int i = pageNumber - 2; i &lt; lastPage - 1; i++)
                              {
                                 int pagingNumber = i;
                                 int numberToDisplay = i + 1;
  
                                string className = i == pageNumber ? "active" : "inactive";
  
                                &lt;a href="#" class="@className" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @pagingNumber, '@action', '@ingredientIds', '@ingredientId');"&gt;@numberToDisplay&lt;/a&gt;
                                &lt;span&gt; | &lt;/span&gt;                              
                              }
                           }                         
                           else
                           {                          
                             var firstPrevious = pageNumber - 1;
                             var secondPrevious = pageNumber - 2;
                             var firstPreviousToDisplay = firstPrevious + 1;
                             var secondPreviousToDisplay = secondPrevious + 1;
  
                             &lt;a href="#" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @secondPrevious, '@action', '@ingredientIds', '@ingredientId');"&gt;@secondPreviousToDisplay&lt;/a&gt;                         
                             &lt;span&gt; | &lt;/span&gt;
  
                             &lt;a href="#" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @firstPrevious , '@action', '@ingredientIds', '@ingredientId');"&gt;@firstPreviousToDisplay &lt;/a&gt;                         
                             &lt;span&gt; | &lt;/span&gt;
  
                             for(int i = pageNumber; i &lt; pageNumber + 3; i++)
                             {
                                int pagingNumber = i;
                                 int numberToDisplay = i + 1;
  
                                 string className = i == pageNumber ? "active" : "inactive";
  
                                &lt;a href="#" class="@className" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @pagingNumber, '@action', '@ingredientIds', '@ingredientId');"&gt;@numberToDisplay&lt;/a&gt;
                                if(i &lt; pageNumber + 2)
                                {
                                  &lt;span&gt; | &lt;/span&gt;
                                }
                             }
  
                             &lt;span&gt; ... &lt;/span&gt;
                           }
                        }                            
                     }
                   }
                    // Always show last pagenumber                    
                    &lt;a href="#" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @roundedNumOfPagingLinks, '@action', '@ingredientIds', '@ingredientId');"&gt;@lastPage&lt;/a&gt;
                 }
                 else
                 {
                    for (int i = 0; i &lt; roundedNumOfPagingLinks + 1; i++)
                 {
                    int pagingNumber = i;
                    int numberToDisplay = i + 1;
  
                     string className = i == pageNumber ? "active" : "inactive";
  
                     &lt;a href="#" class="@className" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @pagingNumber, '@action', '@ingredientIds', '@ingredientId');"&gt;@numberToDisplay&lt;/a&gt;&lt;span&gt; | &lt;/span&gt;
                 }
                 }
  
                 int next = pageNumber + 1;
                 if (next &lt;= roundedNumOfPagingLinks)
                  {
                      &lt;a class="next" id="next" href="#" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @next, '@action', '@ingredientIds', '@ingredientId');"&gt;@umbraco.library.GetDictionaryItem("Next")&lt;img src="/img/buttons/pink-hand-right.png" /&gt;&lt;/a&gt;           
                  }
  
               }
             &lt;/div&gt;
          }                            
  </code></pre>
  
  <p>The <code>result</code> variable is the collection found in the filter/search. The <code>pageNumber</code> variable is the page number that the user has clicked.</p>
  
  <p>I know the above code is complex and not pretty, but any help/hint is greatly appreciated!</p>
  
  <p>Thanks in advance.</p>