MVC4Seminar lab5

ThS. CNTT: Nguyễn Nghiệm – nghiemn@fpt.edu.vn 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 – nghiemn@fpt.edu.vn 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 – nghiemn@fpt.edu.vn 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>