How to do pagination and filtering in MVC applications

Question

I am using the example martijn Boland's to page.

The url of my app changes when I click on the page numbers:

http://localhost:1202/Issue?page=6

So far so good.

The problem is when I add a dropdownlist that submits on change, I can not page as well as filter.

If I change my dropdown, I should pass the projectId in the querysting, my partail view will refresh and display my filtered recoreds.
Now when I page the filter parameter does not stick in the querystring as well as the selection in my dropdown does not stick.

How can I page as well as filter?

Index.aspx

<form id="form-post-project-selection" class="post-comments" method="get">
 <label for="Country">Project:</label>
 <%= Html.DropDownList("ProjectList", "--All--") %>
</form>

<% Html.RenderPartial("MyIssues", Model); %>

<script type="text/javascript">
         $("#form-post-project-selection").submit(function(evt) {
         var frm = $("#form-post-project-selection");
         var action = frm.attr("action");
         var serializedForm = frm.serialize();
         var projectId = jQuery.trim($("ProjectList").val());
         if (projectId.length < 1 || projectId == "-1")
             return;
     });
     $("#ProjectList").change(function() {
         $("#form-post-project-selection").submit();
     });
</script>

Answer 1

I think you have a couple of options here.

The first one would to to use Ajax to call back to a controller to get a "Paged" object collection back so every time you filter the output you postback the filter ID to get only the results collections you need for the page you want. You could do the paging with Ajax as well passing back the Filter ID with the Ajax call so you will get the filtered and paged object back or you could redirect to a different url on paging explained below.

If you use full page postback to the server on changing the value in the dropdown then you could redirect the user to another url with the filter id in it eg. Issue/Filter/1

This way every time the paging links are used you will end up with a url like Issue/Filter/1?page=6 and you would not loose your filter.

Please note the view of the page does not need to vary.

All though the function ends up the same the answer to this question is in the comments below and posted here for ease.

<%= Html.Pager(ViewData.Model.PageSize, ViewData.Model.PageNumber, ViewData.Model.TotalItemCount, new { categoryname = ViewData["CategoryDisplayName"] } )%>