如何在单独的页面中显示我的产品？

Question

所以我有一个基于 ASP.NET MVC 5 的购物车项目，其中一个要求是每页显示 8 个产品。我总共有 21 种产品。这就是我现在向他们展示的方式：

 public ActionResult Index()
    {
        String SQL = "SELECT ProductId, Products.CategoryId AS CategoryId, Name, ImageFileName, UnitCost"
            + ", SUBSTRING(Description, 1, 100) + '...' AS Description, isDownload, DownloadFileName "
            + "FROM Products INNER JOIN Categories ON Products.CategoryId = Categories.CategoryId ";

        String CategoryName = Request.QueryString.Get("CategoryName");
        if (CategoryName != null)
        {
            if (CategoryName.Length > 20 || CategoryName.IndexOf("'") > -1 || CategoryName.IndexOf("#") > -1)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            SQL += "WHERE CategoryName = @p0";
            ViewBag.CategoryName = CategoryName;
        }
        var products = db.Products.SqlQuery(SQL, CategoryName);
        return View(products.ToList());
    }

这是cshtml：

@model IEnumerable<PiClub.Models.Product>
@{
    ViewBag.Title = "Shop";
}
@Styles.Render("~/Content/Site.css")
<h2>Shop</h2>

<table class="table">
<tr>
    <th>
        Name
    </th>
    <th>
        Image
    </th>
    <th>
        Price
    </th>
    <th>
        Description
    </th>
    <th>
        Category
    </th>
    <th></th>
</tr>

@foreach (var item in Model)
{
<tr>
    <td>
        @item.Name
    </td>
    <td>
        <img src="/Images/@item.ImageFileName" style="width:200px" />
    </td>

    <td style="text-align:right">
        @item.UnitCost
    </td>
    <td>
        @item.Description
    </td>
    <td>
        @item.Category.CategoryName
    </td>
    <td>
        <input type="button" value="Add to Cart" onclick="NavCart('@item.ProductId')" />
    </td>
    <td>
        <input type="button" value="Details" onclick="NavDetails('@item.ProductId')" />
    </td>
</tr>
}
</table>

<script type="text/javascript">
function NavDetails(ProductId) {
    window.location.replace("/Shop/Details?PrdouctId=" + ProductId);
}

function NavCart(ProductId) {
    window.location.replace("/OrderDetails/ShoppingCart?ProductId=" + ProductId);
}
</script>

我该怎么做呢？

Answer 1

在你的方法中放两个参数，分别代表页码和每页项目数：

public ActionResult Index(int pageNumber, int itemsPerPage)

然后在从数据库中获取数据的地方添加 Skip 和 Take：

var products = db.Products.SqlQuery(SQL, CategoryName)
                          .Skip(pageNumber * itemsPerPage)
                          .Take(itemsPerPage);

然后通过url发送参数：

http://your-url/ControllerName/Index?pageNumber=2&itemsNumber=8

Answer 2

您可以使用LINQ Skip 和Take 来实现分页。

const int itemsPerPage = 8;
int currentPage = 0; // parameter to the passed; first page has index 0

var result = db.Products.SqlQuery(SQL, CategoryName)
                 .Skip(currentPage * itemsPerPage)
                 .Take(itemsPerPage);