Any page navigation helpers for ASP.NET MVC?

Question

Are there any html helpers for page navigation. eg. if i have 1000 records to display, i want to display the Previous 1 2 3 4 ... etc Next link stuff under the filtered collection.

Anyone know of anything out there?

Answer 1

Checkout Paging with ASP.NET MVC,PageList Strikes Back and Create a Page HTML Helper

Answer 2

If you are creating a table of data from JSON data, I highly recommend the YUI (Yahoo UI Library) DataTable component (http://developer.yahoo.com/yui/datatable/). It does paging very well and you have the option of returning the whole record set to start with and then paging through that all client-side or returning a paged set from the server.

Probably won't fit your scenario, but just thought I'd mention it.

Answer 3

I have a paging grid in my Dynamic Data for MVC sample application, but the grid is hand rendered. The data is using PagedList, which came from Rob Conery (who in turn I think got it from ScottGu).

I've been thinking about what a paged-grid helper might look like for MVC...

Answer 4

What I've done for paging so far is create a Pager control, It takes a paging url, html element id for update, page number, page size and total count.

The paging url is of the form controller/action where the action returns an html string (the rendered page of data)

The pager appends a list of javascript links for the pages. These links call a jQuery based ajax function that hits the paging url. Each page click replaces the current contents of the html element with the results of the ajax call. Something like this:

public string Render()
{
    var buffer = new StringBuilder( 1000 );
    buffer.AppendLine( @"<ul class=""datatable_pager"">" )
        .AppendLine( "\t<li>Additional Pages:</li>" );
    int numberOfPages = TotalItemCount % PageSize == 0 ? TotalItemCount / PageSize : TotalItemCount / PageSize + 1;

    for( int i = 0; i < numberOfPages; i++ )
    {
        AppendPageLink( buffer, i );
    }

    buffer.AppendLine( "\t</ul>" );
    AppendPagingJS( buffer );

    return buffer.ToString( );
}

private void AppendPageLink( StringBuilder buffer, int i )
{
    buffer.Append( "\t\t<li><a href=\"" )
    .Append( PagingLink.Replace( "$PAGE$", i.ToString( ) ) )
    .Append( "\">" )
    .Append( i.ToString( ) )
    .Append( "</a>" )
    .AppendLine( "\t\t</li>" );
}


private void AppendPagingJS( StringBuilder buffer )
{
    buffer.AppendLine( @"
        <script type=""text/javascript"">
        function page( page, size, updateElement )
        {
            $.post( '" + PagingUrl + @"',
                {
                    pageNumber: page, 
                    pageSize: size,
                },
                function(response) 
                {
                    $(""#"" + updateElement).html(response);
                },
                ""html""
            );
        }
        </script>" );
}

The javascript posts to the paging url, so the action will need to then do something like:

int.TryParse( Request.Params[ "pageNumber" ], out page ) int.TryParse( Request.Params[ "pageSize" ], out size ) )

and use the results with your data access components to grab the data page, render it as html and return it.

Hope that helps, I can expand upon it if needed.