MvcPaging 2.0

image

Last week, a new version of the MvcPaging library has been released. This time there are some breaking changes and that’s why the major version number is increased.

What’s new:

  • Simplified API with reduced number of Html.Pager overloads;
  • DisplayTemplate option and PaginationModel;
  • Configurable number of pages.

Simplified API

There have been some requests for extra configuration options, but I didn’t want to add more overloads to the Html.Pager helper. Instead, the number of overloads is reduced drastically:

Html.Pager(int pageSize, int currentPage, int totalItemCount)

and

Html.Pager(int pageSize, int currentPage, int totalItemCount, AjaxOptions ajaxOptions)

We now only have a method with the required parameters and one overload for Ajax scenarios. Also, the Ajax.Pager helper is removed. Note that this is a breaking change, so if you were using the Ajax.Pager helper, you now have to use the Html.Pager with the AjaxOptions overload.

Non-required configuration options are added via the Options() method. This interface also replaces the overloads in the previous version where you could set route values or controller actions. This is the second breaking change. You can now only set these values via the Options method.

Html.Pager(pageSize, pageNumber, totalItemCount).Options(o => o
    .Action("action")
    .AddRouteValue("q", mySearchQuery)
)

Below are all options:

  • Action(string action)Sets an alternative action for the pager that is different from the current action.
  • AddRouteValue(string name, object value)Adds a single route value parameter that is added to page url’s.
  • RouteValues(object routeValues)Adds route value parameters that are added to the page url’s.
  • RouteValues(RouteValueDictionary routeValues)Adds route value parameters that are added to the page url’s.
  • DisplayTemplate(string displayTemplate)When set, the internal HTML rendering is bypassed and a DisplayTemplate view with the given name is rendered instead. Note that the DisplayTemplate must have a model of type PaginationModel.
  • MaxNrOfPages(int maxNrOfPages)Sets the maximum number of pages to show.

DisplayTemplate option

A few people have been asking for configurable rendering, especially since Twitter Bootstrap has become popular. Rajeesh CV submitted a pull request that introduced a view model for the Pager, the PaginationModel. This view model made it very easy to create an option where you can specify a DisplayTemplate that is used for the actual rendering. It works like any other ASP.NET MVC DisplayTemplate and requires a model of PaginationModel. As a bonus, the PaginationModel makes unit testing a lot easier.

The MvcPaging.Demo project has an example DisplayTemplate that renders Html that is compatible with Twitter Bootstrap:

Html.Pager(pageSize, pageNumber, totalItemCount).Options(o => o
    .DisplayTemplate("BootstrapPagination")
    .MaxNrOfPages(14))

image

Configurable number of pages

As you can see in  the screenshot above, the pager can now be configured to show more or less than 10 pages via the MaxNrOfPages() option.

I’d like to thank Rajeesh CV, jbucht01 for the contributions and ideas. For more information, visit the GitHub project page, or install the Pager in your own projects with NuGet.

30 thoughts on “MvcPaging 2.0

  1. Pingback: Martijn Boland » Paging with ASP.NET MVC

  2. AM

    Hello, I just started using this library….great work. Is there back button support that I am missing somewhere? If it’s not included, would this be something that could be incorporated later on? Great work.

  3. JLR

    Hi Martin,

    I’ve been using your MVCPager for some time, great work, thanks.

    I do have a small problem which I hope you can help me with, the domain name is missing in the link within the pager whenever I don’t use the deepest url on my search controller.

    For example this page is fine

    http://www.independentmountain.com/ski-search/france/chamonix-mont-blanc/chamonix/catered/sleepsany

    However I have landing pages for each parameter in the above path (linked to within individual results) and hance use pages such as this

    http://www.independentmountain.com/ski-search/france/

    On the latter page you’ll see that the pager links are not fully qualified and hence broken, any thoughts on how I can fix this?

    TIA.

    JLR

  4. JLR

    I’ve fixed the above issue. I had all my url parameters using UrlParameter.Optional in my global.asax. Now using default values and the pager is working as expected.

    Hope this might help somebody else.

    JLR

  5. Prathiba

    Hi Martin,
    I am using your MVCPaging control.
    In one our page as
    @Html.Pager(Model.PageSize, Model.PageNumber, Model.TotalItemCount, new AjaxOptions { UpdateTargetId = “gridcontainer” }).Options(o => o.Action(“MyActionForAjaxPage”))
    But I face an issue like I have given the page size as 1 for testing purpose
    I get some 2 pages, When I navigate through pages, I am able to navigate.
    Then I logout the application and login is another user, who say for example has 3 pages
    when I navigat through pages it tries to show the previous user’s page, when I try to go to page 3, it show me as only 2 pages are there and that to previous users page is shown.

    I don’t have any cache mechanism in my application, Even I felt it may be due to temp data, I deleted the IE history, but even then I am gettting the same issue consistently, Can you please tell me If I am missing something,

    Even When I try to navigate to 2nd or 3rd page the breakpoint in the action method is not being hit.

    Please help me out as this is a critical issue we are facing.

  6. martijn Post author

    Could you please try a different browser than IE? IE is known to cache AJAX results very aggresively.
    You might also try to disable caching via an attribute on the AJAX action:
    [OutputCache(NoStore = true, Duration = 0, VaryByParam = “*”)].

  7. Prathiba

    Thanks a lot it is working perfectly now , after giving the specified option in the Ajax action, Also in firefox even without that cache disable option it is working fine

  8. Neptune

    Hello there and many thanks to your MvcPaging!!

    I have a question, I’m using partiall views for my pages, so I need to add to my partial view the option “Action”. This is fine, but.. Although I see the url is http://blahblah/blah?page=something at my link hover, when I actually click the link to go to the next page, the route value “page” disappears from my link ( the results are fine )
    How do I add it back??

    Thanks in advance!

  9. Neptune

    Uhm.. sorry for my question, I closed Visual Studio, I opened it again and everything worked!

  10. Hassan

    Hello

    Great library ! Really easy to install and make it working

    I have a question :

    I have a generated survey form with 10 Questions, I want to paginate it.
    All works but how can I assign to the Next and Previous button a submission of the form ?

    Thanks !

  11. martijn Post author

    @Hassan

    I don’t know if that’s easy. I’d probably try something like (javascript/jQuery):
    – intercept the pager click (link)
    – extract the page number from the pager link and put that in a hidden field in the form
    – submit the form
    – return false, so the original pager click is discarded

  12. Hassan

    Hello

    Your solution for the paging and submit works like a charm ! I have another issue, I tried to find a solution but I’ve not succeeded :

    I want to “customize” the paging. I explain :
    Example with a paging of 2 elements / page
    E1 – true -> Page 1
    E2 – true -> Page 1

    E3 – true -> Page 2
    E4 – false -> Page 2
    E5 – true -> Page 2

    E6 – true -> Page 3

    Each element with IsVisible = false, will be inserted to the page but will not be counted

    If you have any Idea, thank you very much again

  13. Nikolas

    Hi

    I am passing a routevaluedictionary to my Pager

    @Html.Pager(Model.Problems.PageSize, Model.Problems.PageNumber, Model.Problems.TotalItemCount).Options(o => o.RouteValues(tRVD).Action(“Search”))

    The problem is that my routevaluedictionary contains a list of (PostedSpecialties.PostedSpecialty) values (one key – multiple values)
    and Pager returns URL

    PostedSpecialties PostedSpecialty = 2,3,4

    instead of

    PostedSpecialties.PostedSpecialty=2&PostedSpecialties.PostedSpecialty=3&PostedSpecialties. PostedSpecialty=4

    Is there any way to solve this?

  14. martijn Post author

    Nikolas,
    I don’t know if this could be solved easily. What happens if you make an ActionLink with the same routevalues dictionary?

  15. martijn Post author

    @tryhp3: I think it will take very little to convert the bootstrap example to something that works with Zurb foundation. They’re the same, conceptually and you’ll probably only have to change some css class names in the DisplayTemplate.

  16. tryhp3

    I want to change the name of the parameter ‘page’. For example Controler/Action?page=1 to Controler/Action?PageNumber=1. Is it possible?

  17. tryhp3

    I have additional quesiton. I want use RouteValues(object routeValues) for my Filter model:
    public class ShopFilter
    {
    public string ProductCode { get; set; }
    public int[] SelectedSuppliers { get; set; } //list of checkboxes
    }
    but generated url is wrong:
    ?ProductCode=test&SelectedSuppliers=System.Int32%5B%5D&page=1

    Is possible serialize int[] ?
    should be:
    ?ProductCode=test&SelectedSuppliers=1&SelectedSuppliers=5&page=1 etc.

  18. Roger Frehen

    Hello Martijn,

    To be able to use your MvcPaging in a base view (for example, a general index page in a rather simple crud application), it would be good to add covariance to IPagedList. Therefore, two things need to be changed:
    1. The parameter T in the interface IPagedList needs to be marked as covariant, so it will be IPagedList
    2. Because IList doesn’t support covariance either, IPagedList can’t inherit from IList anymore. I solved this by having it inherit form IEnumerable instead.

    My question to you is: do you see any problem in doing the latter?

  19. martijn Post author

    @pty: You can add a route value to specify a different controller:
    .Action(“action”).AddRouteValue(“controller”, “MyController”)

  20. Pingback: benpowell.org

Comments are closed.