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

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 2

Yeah Brad, i was trying to avoid using some of the pre baked controls cause they might have some webforms codesmell in them.

What we need baked into the futures could be Html.PageNavigation(...) helper which takes a lot of arguments .. from number of records, total number of records, css classes, etc. or just even a PagedList (which i also use extensively .. along with LazyList (nod to Rob Con).

I've started writing up a PageNavigation : ViewUserControl view user control which can be dropped anywhere on any view. Having this baked in would be uber hawt also.

So maybe no one else has done any page navigation stuff (which i find hard to believe) or are using some data grid webform controls, like yourself?

Answer 3

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

Answer 4

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 5

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.