MVC Grid View Paging

In my previous post, I discussedHow to customize columns in MVC grid view. In this post, I will talk about paging. When you are displaying data in a grid, you probably have lot of rows of data. Some time data set is too large that it is not practical to display all rows on a single page. I will not go into details about why we all should be using paging when displaying large data sets.

WebGrid Paging

WebGrid extension in MVC provides paging capability out of the box. In this post I will keep discussion limited to what is available by default.

@model WebGridSamples.Models.PostCollection
@{
    var grid = new WebGrid(source: Model.Posts,
                           defaultSort: "DateCreated",
                           rowsPerPage: 25, // Default value is 10
                           canSort: true,
                           canPage: true,
                           pageFieldName: "pageIndex");
}

If you look at above code snippet, you will notice that there are 3 parameters for WebGrid object that you can use to manipulate paging behavior when creating your grid.

• canPage: The name explains the intent of this property. Default value of this parameter is set to true. This means that WebGrid will page the rows by default. If you set this property to false. then default paging behavior of grid view is turned off.
• rowsPerPage: This property controls number of rows on one page. Default value of this property is set to 10. If you want to show different count of rows on a page, then you will need to change this value. This value should be a positive value greater than ZERO.
• pageFieldName: WebGrid sends the information about selected page in query string to your controller. This property controls the name of the query string parameter. If you do not set any field name in this property then default name of page is used to send value of selected page. The value for this query string parameter is 1 based value and not ZERO based value. Following screen shot show where you can see this value in request object.

  

MVC Grid Pager Style

Now that you have set the parameters for paging, next important part of customization is specifying style for your pager. There are two components of styling. One is how the page numbers are going to be rendered and second how do they look.

>
    @grid.GetHtml(
        columns: grid.Columns(
            grid.Column("Title", "Blog title"),
            grid.Column("Author", "Blog Author"),
            grid.Column("DateCreated", "Created On", @<i>@item.DateCreated.ToString("yyyy-MM")</i>, 
               "mystyle", false)
            ),
            mode: WebGridPagerModes.Numeric| WebGridPagerModes.NextPrevious,
            tableStyle: "table table-striped",
            footerStyle: "pagination"
         )

In above code snippet, there are two properties that allow you to control behavior of pager.

• mode: This property allows you to set how the pager is going to be rendered. As you can see from the example above, the value of this property is calculated by using WebGridPagerModes flag values. Following screen shots show behavior of pager for these values.

  

  

• footerStyle: This property allows you to set CSS style for your footer.

Accessing selected page in controller

Following code snipper shows how you can get value of selected page in server side in controller implementation.

public ActionResult Index()
{
    int page = 1;
    page = Int32.TryParse(Request["pageIndex"], out page) ? page : 1;
    System.Diagnostics.Debug.WriteLine(string.Format("Page: {0}", page));
    var blogRepository = 
     new BlogRepository(ConfigurationManager.ConnectionStrings["blogdb"].ConnectionString);
    var posts = blogRepository.GetAllPosts();
    var postCollection = new Models.PostCollection() 
        { 
            PageSize = PageSize, 
            TotalRecords = posts.Count(), 
            Posts = posts.Skip((page - 1)*PageSize).Take(PageSize) 
        };
    return View(postCollection);
}

As you can see how easy it is to use paging with your MVC grid view. In subsequent posts I will discuss some smart paging options.