对于我目前正在处理的网站,我有一个产品列表,我需要在分页列表中显示。该列表需要在几个不同的页面上使用,每个页面都有自己的规则来检索他们的产品列表。列表页面需要使用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中的分页数据,如果它可以避免它。
答案 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);
}