Paging data in MVC3 AJAX

For the site I'm currently working on, I have a list of products which I need to display in a paged list. The list needs to be used on several different pages, each of which has their own rules for how to retrieve their list of products. The list pages need to refresh with AJAX. I'm using LINQ-2-SQL to talk to the database, and MVC3/Razor as the view engine.

So far so good.

What I need help with is figuring out how to implement this. I'll explain what I've done so far, and what isn't working, and I hope someone can give me some direction of the best way to get this working, whether it be bug fixes, missing options, or a redesign. Note that the setup described above is immutable, but everything else can be altered.

---

For the first set of data, I have Index.cshtml. This will be a list of all products. There will be other sets (such as a list of all products in a category, but I c开发者_运维问答an do the selection for that just fine), but this is the primary test case.

Currently, I have an object to represent the state of the grid: PagingData. The details of it aren't really important, but it takes an IEnumerable when first instantiated, it stores itself in HttpContext.Current.Session between requests, and it has a function that returns an IEnumerable of the products that are supposed to be on the current page. I tried it as an IQueryable<>, but that didn't work.

Currently, I am getting an IQueryable.ToList() and setting it as the data for a DataPager that's used as the Model of a Partial view called _ProductList.cshtml. _ProductList primarily consists of a pager control (another partial) and a foreach loop across the Model to display a partial for each Product.

_ProductList.cshtml:

@model PagingData
<script type="text/javascript">
$(function() {
$('#productList a.pagerControl').live('click', function() {
    $('#productList').load(this.href);
    return false;
});
</script>

<div id="productList">
@Html.Partial("_Pager", Model)

@foreach (var item in Model.ProductsOnPage)
{
    @Html.Partial("_ProductListGridDetail", item);
}

</div>

_Pager uses: @Html.ActionLink(page.ToString(), "_ProductListSetPage", new { newPage = page }, new { @class = "pagerControl" }) to provide the links to change pages (the page variable is the number of the page to draw, from a loop).

This solution works, kindof. The problem I'm having with it is that the only way to update the PagingData with the new page is via a Controller, and each method of modifying the pager (page, # of products per page, format, sort) will need its own controller because I can't overload them. This also means _Pager produces URLs like http://localhost:52119/Product/_ProductListSetPage?newPage=3 instead of http://localhost:52119/Product.

I've tried Ajax.ActionLink(), and wrapping the whole thing in an Ajax.BeginForm(), but neither seemed to work at all. I do have the jquery.unobtrusive-ajax.js library included.

---

Is this approach feasible? Should I replace the PagingData object with something else entirely? I do not want the paging data in the URL if it's at all possible to avoid it.

---

If you don't want the page in the url you could use a <form> instead of link, like this:

@using (Html.BeginForm("Index", "Product")
{
    @Html.Hidden("newPage", page)
    <input type="submit" value="@page" />
}

Which should generate a form for each page with a hidden field containing the actual page number, for example:

<form action="/Product" method="post">
    <input type="newPage" value="3" />
    <input type="submit" value="3" />
</form>

Now all that's left is to AJAXify this form:

$(function() {
    $('#productList form').live('submit', function() {
        $.post(this.action, $(this).serialize(), function(result) {
            $('#productList').html(result);
        });
        return false;
    });
});

Which would invoke the Index action on ProductController:

public ActionResult Index(int? newPage)
{
    var model = ... fetch the products corresponding to the given page number
    return PartialView(model);
}