MVC3 AJAX 中的分页数据

Question

对于我目前正在开发的网站，我有一个需要在分页列表中显示的产品列表。该列表需要在几个不同的页面上使用，每个页面都有自己的规则来检索他们的产品列表。列表页面需要使用 AJAX 刷新。我使用 LINQ-2-SQL 与数据库通信，并使用 MVC3/Razor 作为视图引擎。

到目前为止一切顺利。

我需要帮助的是弄清楚如何实现这一点。我将解释到目前为止我做了什么，什么不工作，我希望有人能给我一些指导，让我知道最好的方法，无论是错误修复、缺少选项还是重新设计。请注意，上述设置是不可变的，但其他所有内容都可以更改。

---

对于第一组数据，我有 Index.cshtml。这将是所有产品的列表。还会有其他集合（例如一个类别中所有产品的列表，但我可以为此进行选择），但这是主要的测试用例。

目前，我有一个对象来表示网格的状态：PagingData。它的细节并不重要，但它在第一次实例化时需要一个 IEnumerable，它在请求之间将自身存储在 HttpContext.Current.Session 中，并且它有一个函数返回应该在产品上的 IEnumerable当前页面。我将其作为 IQueryable 进行了尝试，但没有成功。

目前，我正在获取 IQueryable.ToList() 并将其设置为 DataPager 的数据，该 DataPager 用作名为 _ProductList.cshtml 的局部视图的模型。 _ProductList 主要由一个寻呼机控件（另一个部分）和一个跨模型的 foreach 循环组成，以显示每个 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 使用：@Html.ActionLink(page.ToString(), "_ProductListSetPage", new { newPage = page }, new { @class = "pagerControl" }) 提供更改页面的链接（页面变量是要绘制的页面编号，来自循环）。

这个解决方案有效，有点。我遇到的问题是，使用新页面更新 PagingData 的唯一方法是通过控制器，并且修改寻呼机的每种方法（页面、每页产品数量、格式、排序）都需要自己的控制器，因为我不能超载它们。这也意味着 _Pager 生成的 URL 类似于 http://localhost:52119/Product/_ProductListSetPage?newPage=3 而不是 http://localhost:52119/Product。

我已经尝试过 Ajax.ActionLink()，并将整个事情包装在 Ajax.BeginForm() 中，但似乎都不起作用。我确实包含了 jquery.unobtrusive-ajax.js 库。

---

这种方法可行吗？我应该用其他东西完全替换 PagingData 对象吗？如果可以避免的话，我确实不想要 URL 中的分页数据。

Answer 1

如果您不想在 url 中显示该页面，您可以使用 <form> 代替链接，如下所示：

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

这应该为每个页面生成一个包含实际页码的隐藏字段的表单，例如：

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

现在剩下的就是 AJAXify 这个表单了：

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

这将在ProductController 上调用Index 操作：

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