ThS. CNTT: Nguyễn Nghiệm – nghiemn@fpt.edu.vn Trang 1
BÀI 4: TRÌNH BÀY VÀ PHÂN TRANG HÀNG HÓA
MỤC TIÊU
Biết cách trình bày hàng hóa
Biết cách sử dụng các phương thức mở rộng Take() và Skip() để phân trang hàng hóa với LINQ
MÔ TẢ
Trong bài này ban sẽ phải xây dựng một trang web với MVC4 để trình bày các mặt hàng có phân trang
được mô tả như các hình sau đây.
Trình bày: Thông tin được hiển thị của mỗi mặt hàng gồm: tên, hình, giá và các hình ảnh biểu
tượng trang trí. Mỗi hàng gồm 3 mặt hàng.
Phân trang: mỗi trang 6 mặt hàng và mỗi nhóm gồm 5 trang
ThS. CNTT: Nguyễn Nghiệm – nghiemn@fpt.edu.vn Trang 2
THỰC HIỆN
Bước 1: Tạo ProductController và thêm Action Search()
Bước 2: Thiết kế View Search.cshtml
Bước 3: Phân trang
Bước 1: Tạo ProductController và Action Search()
Tạo một ProductController mới và thêm action Search vào. Sau đó viết mã để cấp danh sách hàng hóa
cho view Search.cshtml. Mã như sau:
public class ProductController : Controller
{
MVC4SeminarDB db = new MVC4SeminarDB();
public ActionResult Search()
{
var products = db.Products;
return View(products);
}
}
Bước 2: Thiết kế View Search.cshtml
Thêm view Search.cshtml và thiết kế để hiển thị danh sách hàng hóa như sau.
@model IEnumerable<Product>
@{
ViewBag.Title = "HÀNG HÓA";
}
<hr />
<div class="nn-prod-wrapper">
@foreach (var p in Model)
{
<! product >
<div class="nn-prod-box">
<div class="nn-prod-name">@p.Name</div>
<a href="/Product/Detail/@p.Id">
<img class="nn-prod-image" src="/images/products/@p.Image" />
</a>
<img class="nn-prod-icon" src="/images/others/new_icon.gif" />
<div class="nn-prod-footer">
<div class="nn-prod-price">@p.UnitPrice USD</div>
<div class="nn-prod-actions">
<img src="/images/icons/Letter.png" />
<img src="/images/icons/Favourites.png" />
<img src="/images/icons/Add%20to%20basket.png" />
</div>
</div>
</div>
<! /product >
}
</div>
Bước 3: Phân trang
Để có thể phân trang, bạn cần hiệu chỉnh mã ở action Search() và view Search.cshtml.
ThS. CNTT: Nguyễn Nghiệm – nghiemn@fpt.edu.vn Trang 3
Trong action Search() bạn cần hiệu chỉnh lại như sau:
public ActionResult Search()
{
var products = db.Products.ToList();
var pager = Pager.Set("pager1", 6, 5, products.Count);
return View(products.Skip(pager.StartRow).Take(pager.PageSize));
}
o Ý nghĩa các tham số của phương thức Pager.Set()
“pager1”: định danh phân trang – mỗi trang được đặt với 1 định danh khác nhau.
6 là số lượng hàng hóa được trình bày trên mỗi trang
5 là số trang trên mỗi nhóm
Products.Count là tổng số bản ghi được đưa vào để phân trang
Trong view Search.cshtml, bạn chỉ cần bổ sung thanh điều hướng phân trang vào đầu và cuối
danh sách là được.
@Pager.NavigationBar("pager1")
<hr />
<div class="nn-prod-wrapper">
@foreach (var p in Model)
{
<! product >
…
<! /product >
}
</div>
<hr />
@Pager.NavigationBar("pager1")
. Mã như sau:
public class ProductController : Controller
{
MVC4SeminarDB db = new MVC4SeminarDB();
public ActionResult Search()
{
var products