MVC4Seminar lab5

ThS. CNTT: Nguyễn Nghiệm – Trang 1

BÀI 5: MASTER-DETAILS
MỤC TIÊU
 Khai thác quan hệ thực thể kết hợp để trình bày dạng master-details
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 chi tiết một mặt hàng và
thông qua thực thể kết hợp để lấy và trình bày các mặt hàng cùng loại và hàng cùng nhà cung cấp. Trang
web được mô tả như các hình sau đây.
Giao diện gồm 2 phần:
 Phần trên: trình bày thông tin chi tiết hàng hóa được xem
 Phần dưới: trình bày các mặt hàng cùng loại và cùng nhà cung cấp

Hình 1: Thông tin chi tiết hàng hóa

ThS. CNTT: Nguyễn Nghiệm – Trang 2


Hình 2: Hàng cùng loại

Hình 3: Hàng cùng nhà cung cấp
THỰC HIỆN
 Bước 1: Thêm Action Detail() vào ProductController
 Bước 2: Thiết kế View Detail.cshtml
Bước 1: Thêm Action Detail() vào ProductController
Bổ sung action Detail() vào ProductController để nhận vào tham số mã hàng hóa sau đó tìm hàng hóa và
chuyển thông tin cho view Detail.cshtml
public ActionResult Detail(int Id = 1001)
{
var product = db.Products.Find(Id);

return View(product);
}

ThS. CNTT: Nguyễn Nghiệm – Trang 3

Bước 2: Thiết kế View Detail.cshtml
View Detail.cshtml chỉ việc khai thác model chia sẻ từ action Detail() để hiển thị thông tin chi tiết. View
này cũng hiển thị các mặt hàng cùng loại và cùng nhà cung cấp bằng cách khai thác thực thể kết hợp
trong EF. Khi nhấp chuột vào một mặt hàng cùng loại hay cùng nhà cung cấp thì chi tiết của mặt hàng đó
được trình bày thay cho mặt hàng đang xem.
@model Product
@{
ViewBag.Title = "Chi tiết hàng hóa";
}
<! Thông tin chi tiết hàng hóa >
<table class="details">
<tr>
<td style="width:200px;">
<img class="detail-image" src="/images/products/@Model.Image" />
</td>
<td>
<ul>
<li><label>Mã hàng hóa</label>: @Model.Id</li>
<li><label>Tên hàng hóa</label>: @Model.Name</li>
<li><label>Đơn giá</label>: @Model.UnitPrice USD</li>
<li><label>Chủng loại</label>: @Model.Category.Name</li>
<li><label>Nhà cung cấp</label>: @Model.Supplier.Name</li>
</ul>
</td>
</tr>

</table>
<div class="detail-description">
<p>@Html.Raw(@Model.Description)</p>
</div>

<! Thực thể kết hợp >
<div class="tabs">
<ul>
<li><a href="#tabCate">Hàng cùng loại (@Model.Category.Name)</a></li>
<li><a href="#tabSupp">Hàng nhà cung cấp bởi @Model.Supplier.Name</a></li>
</ul>

<! Hàng cùng loại >
<div class="detail-thumbs" id="tabCate">
@foreach(var p in Model.Category.Products){
<a href="/Product/Detail/@p.Id"><img src="/images/products/@p.Image" /></a>
}
</div>

<! Hàng cùng nhà cung cấp >
<div class="detail-thumbs" id="tabSupp">
@foreach(var p in Model.Supplier.Products){
<a href="/Product/Detail/@p.Id"><img src="/images/products/@p.Image" /></a>
}
</div>
</div>