Problem Paging with Post Action in ASP.NET MVC

Question

I have a page that takes a number of parameters on a form and posts them to an action. It returns a number of search results that need to be paged through. My pager uses ActionLink;

<%= Html.ActionLink(i.ToString(), "Basic", new { page = (i - 1) })%>

The results comeback as expected but when I click on page two it goes to the default Action, not the one marked with post. The form values do no get submitted again and the results that are shown for page two are the default results not filters with the parameters.

I am not sure how to solve this problem? One way was to save the form values into the database on the post and reading them back on the default action but it seems overkill.

Thank You!

Answer 1

The MVCContrib Grid and Pager deals with this specific scenario. You can write your own but I would recommend both the Grid and Pager UI helpers.

http://mvccontrib.codeplex.com/

http://mvccontrib.codeplex.com/sourcecontrol/network/Show?projectName=MVCContrib&changeSetId=4112aa6f6d84#src%2fMVCContrib%2fUI%2fPager%2fPager.cs

private string CreateQueryString(NameValueCollection values)
        {
            var builder = new StringBuilder();

            foreach(string key in values.Keys)
            {
                if(key == _pageQueryName)
                    //Don't re-add any existing 'page' variable to the querystring - this will be handled in CreatePageLink.
                {
                    continue;
                }

                foreach(var value in values.GetValues(key))
                {
                    builder.AppendFormat("&{0}={1}", key, HttpUtility.HtmlEncode(value));
                }
            }

            return builder.ToString();
        }

Answer 2

Hi,

I came across the same scenario. And I choose to do paging with ajax form posts when the user clicks on 'previous' or 'next' link.

Following javascript function does that.

function searchResultsPage(pageNum) 

{

$("#searchResultPageNum").val(pageNum);

var frm = $("form#ajaxSearch");
$.post(frm.attr('action'),
        frm.serialize(),
        function(rData) {
            $("#rvwLstFrmContainer").html(rData);
        });

}

Where 'searchResultPageNum' is a hidden field to reflect the new page number to load.

'ajaxSearch' is ajax form id, rendered using Html helper for AjaxForm.

'rvwLstFrmContainer' is the div that contains the results.

Community! Sorry, about illformatted code. Couldn't post it right