Menu

Razor Paging

February 25, 2015 by Christopher Sherman

When you have large numbers of a particular object, it can be beneficial to add paging to limit the number of instances displayed. In this tutorial, I’ll demonstrate a Razor paging implementation that you can use with the Umbraco CMS as well as other projects that make use of Razor.

Open your project in Visual Studio. If you don’t have the App_Code folder, right-click on your project and select Add > Add ASP.NET Folder > App_Code.

Next, right-click the App_Code folder and add a Razor view page named RazorHelpers.cshtml.

Inside the Razor helper file, add the paging function to display the page numbers and anchor tags on the page. To avoid having page numbers stretch across the page, the code displays an ellipsis in place of page numbers not near the current page. Note that the HTML includes Zurb Foundation classes, but you can adapt the code for use with other stylesheets.

@helper GeneratePaging(int currentPage, int totalPages)
{
var previousPageIsEllipsis = false;

    if (totalPages > 1)
    {
        <div class="pagination-centered">
            <ul class="pagination">
                @*/* Loop through each page */*@
                @for (int p = 1; p <= totalPages; p++)
                {
                    @* Add left arrow *@
                    if (p == 1)
                    {
                        if (p == currentPage)
                        {
                            <li class="arrow unavailable">
                                
                            </li>
                        }
                        else
                        {
                            <li class="arrow"><a href="?page=@(currentPage - 1)" title="Previous page"></a></li>
                        }
                    }

                    if (p == currentPage ||
                        p == 1 ||
                        p == currentPage - 1 ||
                        p == currentPage + 1 ||
                        p == totalPages - 1 ||
                        p == totalPages)
                    {
                        string current = (p == currentPage) ? "current" : String.Empty;
                        <li class="@current">
                            <a href="?page=@p" title="Go to page @p">@p</a>
                        </li>
                        previousPageIsEllipsis = false;
                    }
                    else
                    {
                        if (previousPageIsEllipsis)
                        {
                            continue;
                        }
                        else
                        {
                            <li class="unavailable">
                                
                            </li>
                            previousPageIsEllipsis = true;
                        }
                    }

                    @* Add right arrow *@
                    if (p == totalPages)
                    {
                        if (p == currentPage)
                        {
                            <li class="arrow unavailable">
                                
                            </li>
                        }
                        else
                        {
                            <li class="arrow"><a href="?page=@(currentPage + 1)" title="Next page"></a></li>
                        }
                    }
                }
            </ul>
        </div>
    }
    else
    {
        <div class="pagination-centered">
            <ul class="pagination">
                <li class="current">
                    <a>1</a>
                </li>
            </ul>
        </div>
    }

}

Finally, in your view template, add a call to the Razor helper function as shown in the example below, passing the current page number and the total number of pages as parameters.

@RazorHelpers.GeneratePaging(page, totalPages)

Razor Umbraco Zurb Foundation