How do I display my products on separate pages?
So I have an ASP.NET MVC 5 based shopping cart project and one of the requirements is to show 8 products per page. I have 21 products in total. This is how I am displaying them at the moment:
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());
}
This is the 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>
How should I do it?
+3
source to share
2 answers
Place two parameters in your method that will display the page number and items on the page:
public ActionResult Index(int pageNumber, int itemsPerPage)
Then add Skip and Take where you grab data from the database:
var products = db.Products.SqlQuery(SQL, CategoryName)
.Skip(pageNumber * itemsPerPage)
.Take(itemsPerPage);
Then send the parameters via url:
http: // your-url / ControllerName / Index? pageNumber = 2 & itemsNumber = 8
+3
source to share