MVC4Seminar lab6

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

BÀI 6: HOÀN THIỆN PARTIALVIEW
MỤC TIÊU
 Sử dụng EF để bổ sung cho các phần giao diện còn thiếu dữ liệu trên Layout chính
MÔ TẢ
Trong bài này ban sẽ phải hoàn thiện mã để hiển thị dữ liệu đầy đủ cho một số PartialView của Layout
chính. Cụ thể bạn phải hiển thị chủng loại trên _Category.cshtml, nhà cung cấp trên _Supplier.cshtml và
3 math hàng ngẫu nhiên trên _Promotion.cshtml. Sau đây là các PartailView đã được cấp dữ liệu đầy đủ.



Hình 1: _Category.cshtml
Hình 2: _Supplier.cshtml
Hình 3: _Promotion.cshtml
THỰC HIỆN
 Bước 1: Hoàn thiện _Category.cshtml
 Bước 2: Hoàn thiện _Supplier.cshtml
 Bước 3: Hoàn thiện _Promotion.cshtml

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

Bước 1: Hoàn thiện _Category.cshtml
Mở partial view _Category.cshtml trong Views/Shared và hiệu chỉnh mã razor như sau để hiển thị tất cả
các nhà cung cấp và khi nhấp vào mỗi nhà cung cấp sẽ gọi action Search() của ProductController với
tham số là CategoryId.
@{
var db = new MVC4SeminarDB();
}
<div class="art-vmenublock clearfix">

<div class="art-vmenublockheader">
<h3 class="t">Chủng Loại</h3>
</div>
<div class="art-vmenublockcontent">
<ul class="art-vmenu">
@foreach(var c in db.Categories){
<li><a href="/Product/Search?CategoryId=@c.Id">@c.Name</a></li>
}
</ul>
</div>
</div>
Bước 2: Hoàn thiện _Supplier.cshtml
Mở partial view _Supplier.cshtml trong Views/Shared và hiệu chỉnh mã razor như sau để hiển thị tất cả
các nhà cung cấp và khi nhấp vào mỗi nhà cung cấp sẽ gọi action Search() của ProductController với
tham số là SupplierId.
@{
var db = new MVC4SeminarDB();
}
<div class="art-vmenublock clearfix">
<div class="art-vmenublockheader">
<h3 class="t">Nhà Cung Cấp</h3>
</div>
<div class="art-vmenublockcontent">
<ul class="art-vmenu">
@foreach(var s in db.Suppliers){
<li><a href="/Product/Search?SupplierId=@s.Id">@s.Name</a></li>
}
</ul>
</div>
</div>

Bước 3: Hoàn thiện _Promotion.cshtml
Mở partial view _Promotion.cshtml trong Views/Shared và hiệu chỉnh mã razor như sau để hiển thị 3
mặt hàng ngẫu nhiên. Khi nhấp chuột vào mỗi mặt hàng sẽ gọi action Detail() của ProductController với
tham số là mã hàng hóa được chọn.
@{
var db = new MVC4SeminarDB();
var promos = db.Products.OrderBy(p => Guid.NewGuid()).Take(3);
}
<div class="art-block clearfix">

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

<div class="art-blockcontent nn-promo">
@foreach (var p in promos)
{
<a href="/Product/Detail/@p.Id"><img src="/images/products/@p.Image" /></a>
}
</div>
</div>