我正在开发产品页面,在这个页面上最多可以有200个项目,我想在Twitter或Facebook上实现无限滚动。这是索引视图:
@model IEnumerable<AccessorizeForLess.ViewModels.DisplayProductsViewModel>
@{
ViewBag.Title = "Products";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/Site.css" rel="stylesheet" />
<h2>Products - Necklaces</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<div id="container">
@foreach (var item in Model)
{
<div class="itemcontainer">
@Html.ActionLink(@item.Name, "Details", new { id = item.Id })
<br />
<div>@Html.DisplayFor(modelItem => item.Price)</div>
<div><img src="@item.Image.ImagePath" alt="@item.Image.AltText" /></div>
<div> </div>
<div>
Quantity: <input type="text" id="quantity" style="width:50px;" />
<button class="addtocart" type="button" data-id="@item.Id">Add to Cart</button>
</div>
<div style="height:35px;"></div>
</div>
}
</div>
我的ProductsController中的Index方法:
private AccessorizeForLessEntities entities = new AccessorizeForLessEntities();
// GET: /Products/
public ActionResult Index()
{
var products = entities.Products.Include(p => p.ProductImage).OrderBy(o => Guid.NewGuid());
IEnumerable<DisplayProductsViewModel> model = products.Select(p => new DisplayProductsViewModel()
{
Id = p.ProductId,
Name = p.ProductName,
Image = p.ProductImage,
Price = p.ProductPrice
}).ToList();
return View(model);
}
有人能告诉我一个如何实现这个目标的例子吗?