在MVC3 AJAX中分页数据

时间:2011-07-25 18:48:19

标签: c# asp.net-mvc-3 razor pagination

对于我目前正在处理的网站,我有一个产品列表,我需要在分页列表中显示。该列表需要在几个不同的页面上使用,每个页面都有自己的规则来检索他们的产品列表。列表页面需要使用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的唯一方法是通过Controller,每个修改寻呼机的方法(页面,每页产品数量,格式,排序)都需要自己的方法控制器因为我无法超载它们。这也意味着_Pager会生成http://localhost:52119/Product/_ProductListSetPage?newPage=3而非http://localhost:52119/Product的网址。

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


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

1 个答案:

答案 0 :(得分:3)

如果您不想要网址中的网页,可以使用<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;
    });
});

哪会调用Index上的ProductController操作:

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