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

时间:2017-04-14 07:15:24

标签: c# html asp.net asp.net-mvc asp.net-mvc-5

所以我有一个基于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>

我该怎么做呢?

2 个答案:

答案 0 :(得分:3)

在您的方法中放置两个参数,它们代表页码和每页的项目:

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

答案 1 :(得分:1)

您可以使用LINQ SkipTake来实现分页。

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);