无限滚动jQuery,MVC 5,EF6

时间:2015-07-23 15:45:00

标签: jquery asp.net-mvc-5

我正在开发产品页面,在这个页面上最多可以有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>&nbsp;</div>
            <div>
                Quantity: <input type="text" id="quantity" style="width:50px;" />&nbsp;
                <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);
}

有人能告诉我一个如何实现这个目标的例子吗?

0 个答案:

没有答案