Umbraco Razor paging

Question

I'm having some trouble figuring out a paging mechanism in Umbracos Razor viewengine using AJAX.

Thing is, that the paging needs to be like this:

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

When the user has clicked on anything greater than 4 it needs to be like this:

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

So it displays the previous two pages and the next to pages.

Now, when a user clicks all the way to the last 4 pages, the paging needs to be like this:

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

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 :-)

The code (make sure you have a nice, warm cup of coffee ;-))

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

The result variable is the collection found in the filter/search. The pageNumber variable is the page number that the user has clicked.

I know the above code is complex and not pretty, but any help/hint is greatly appreciated!

Thanks in advance.

Anderson Fortaleza · Answer 1 · 2013-03-26T19:37:19.277

What about this approach: you can consider that your paging has three possible states and 7 components. State #1 is what I would call left (or left_extended if there's more than 4 pages total), that's when the user is still on the first 4 pages. State #2 is middle, that's when the user is navigating and has not reached the last 4 pages yet. State #3 is what I'd call right, meaning the user has reached the last 4 pages.

The seven components are disposed like this:

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

The component in the middle 6 | 7 | 8 | 9 | 10 is what I call middle block. Given the three states and 7 components the following code would probably be enough for all states:

// 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>
}

I have shortened the ajaxFilterSearch() calls for better readability. I hope this helps :)

Umbraco Razor paging

1 Answers1