Các bước thực hiện.
Bước 1: Tận dụng Template xây dựng Layout mới và đặt tên là ProductLayout.
Bước 2: Tại controller sản phẩm tạo 1 action đặt tên là SanPham có 2 tham số truyền vào kiểu int tên tham số là MaLoaiSP và MaNSX.
- Trong action đó các bạn truy vấn trả về View với dữ liệu Model là sản phẩm được lọc theo id.
- Đồng thời tạo 1 view tương ứng kế thừa từ ProductLayout.
Bước 3: Về phần nội dung trang sản phẩm, tìm đến nội dung chi tiết từ Template ta sẽ tiến hành chỉnh sửa lại cho phù hợp.
Code tham khảo trong SanPhamController
public ActionResult SanPham(int? MaLoaiSP, int? MaNSX)
{
var lsp = db.SanPhams.Where(n => n.MaLoai == MaLoaiSP && n.MaNSX == MaNSX);
if(lsp==null)
{
return HttpNotFound();
}
return View(lsp);
}
Code trong View SanPham.shtml
@using ShopBanHang.Models
@model IEnumerable<SanPham>
@{
ViewBag.Title = "SanPham";
Layout = "~/Views/Layout/ProductLayout.cshtml";
}
<div class="product">
<div class="container">
<div class="col-md-3 product-price">
<div class=" rsidebar span_1_of_left">
<div class="of-left">
<h3 class="cate">Categories</h3>
</div>
<ul class="menu">
<li class="item1">
<a href="#">Men </a>
<ul class="cute">
<li class="subitem1"><a href="single.html">Cute Kittens </a></li>
<li class="subitem2"><a href="single.html">Strange Stuff </a></li>
<li class="subitem3"><a href="single.html">Automatic Fails </a></li>
</ul>
</li>
<li class="item2">
<a href="#">Women </a>
<ul class="cute">
<li class="subitem1"><a href="single.html">Cute Kittens </a></li>
<li class="subitem2"><a href="single.html">Strange Stuff </a></li>
<li class="subitem3"><a href="single.html">Automatic Fails </a></li>
</ul>
</li>
<li class="item3">
<a href="#">Kids</a>
<ul class="cute">
<li class="subitem1"><a href="single.html">Cute Kittens </a></li>
<li class="subitem2"><a href="single.html">Strange Stuff </a></li>
<li class="subitem3"><a href="single.html">Automatic Fails</a></li>
</ul>
</li>
<li class="item4">
<a href="#">Accesories</a>
<ul class="cute">
<li class="subitem1"><a href="single.html">Cute Kittens </a></li>
<li class="subitem2"><a href="single.html">Strange Stuff </a></li>
<li class="subitem3"><a href="single.html">Automatic Fails</a></li>
</ul>
</li>
<li class="item4">
<a href="#">Shoes</a>
<ul class="cute">
<li class="subitem1"><a href="product.html">Cute Kittens </a></li>
<li class="subitem2"><a href="product.html">Strange Stuff </a></li>
<li class="subitem3"><a href="product.html">Automatic Fails </a></li>
</ul>
</li>
</ul>
</div>
<!--initiate accordion-->
<script type="text/javascript">
$(function() {
var menu_ul = $('.menu > li > ul'),
menu_a = $('.menu > li > a');
menu_ul.hide();
menu_a.click(function(e) {
e.preventDefault();
if(!$(this).hasClass('active')) {
menu_a.removeClass('active');
menu_ul.filter(':visible').slideUp('normal');
$(this).addClass('active').next().stop(true,true).slideDown('normal');
} else {
$(this).removeClass('active');
$(this).next().stop(true,true).slideUp('normal');
}
});
});
</script>
<!---->
<div class="product-middle">
<div class="fit-top">
<h6 class="shop-top">Lorem Ipsum</h6>
<a href="single.html" class="shop-now">SHOP NOW</a>
<div class="clearfix"> </div>
</div>
</div>
<div class="sellers">
<div class="of-left-in">
<h3 class="tag">Tags</h3>
</div>
<div class="tags">
<ul>
<li><a href="#">design</a></li>
<li><a href="#">fashion</a></li>
<li><a href="#">lorem</a></li>
<li><a href="#">dress</a></li>
<li><a href="#">fashion</a></li>
<li><a href="#">dress</a></li>
<li><a href="#">design</a></li>
<li><a href="#">dress</a></li>
<li><a href="#">design</a></li>
<li><a href="#">fashion</a></li>
<li><a href="#">lorem</a></li>
<li><a href="#">dress</a></li>
<div class="clearfix"> </div>
</ul>
</div>
</div>
<!---->
<div class="product-bottom">
<div class="of-left-in">
<h3 class="best">Best Sellers</h3>
</div>
<div class="product-go">
<div class=" fashion-grid">
<a href="single.html"><img class="img-responsive " src="~/Content/images/p1.jpg" alt=""></a>
</div>
<div class=" fashion-grid1">
<h6 class="best2">
<a href="single.html">
Lorem ipsum dolor sit
amet consectetuer
</a>
</h6>
<span class=" price-in1"> $40.00</span>
</div>
<div class="clearfix"> </div>
</div>
<div class="product-go">
<div class=" fashion-grid">
<a href="single.html"><img class="img-responsive " src="~/Content/images/p2.jpg" alt=""></a>
</div>
<div class="fashion-grid1">
<h6 class="best2">
<a href="single.html">
Lorem ipsum dolor sit
amet consectetuer
</a>
</h6>
<span class=" price-in1"> $40.00</span>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class=" per1">
<a href="single.html">
<img class="img-responsive" src="~/Content/images/pro.jpg" alt="">
<div class="six1">
<h4>DISCOUNT</h4>
<p>Up to</p>
<span>60%</span>
</div>
</a>
</div>
</div>
<div class="col-md-9 product1">
<div class=" bottom-product">
@foreach (var item in Model.OrderBy(n=>n.DonGia))
{
<div class="col-md-4 bottom-cd simpleCart_shelfItem">
<div class="product-at ">
<a href="@Url.Action("ChiTietSanPham","SanPham",new { id=item.MaSP})">
<img class="img-responsive" src="~/Content/images/@item.HinhAnh" alt="">
<div class="pro-grid">
<span class="buy-in">Buy Now</span>
</div>
</a>
</div>
<p class="tun">@item.MoTa</p>
<a href="#" class="item_add"><p class="number item_price"><i> </i>@item.DonGia.Value.ToString("#,##")</p></a>
</div>
}
</div>
</div>
<div class="clearfix"> </div>
<nav class="in">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2 <span class="sr-only"></span></a></li>
<li><a href="#">3 <span class="sr-only"></span></a></li>
<li><a href="#">4 <span class="sr-only"></span></a></li>
<li><a href="#">5 <span class="sr-only"></span></a></li>
<li> <a href="#" aria-label="Next"><span aria-hidden="true">»</span> </a> </li>
</ul>
</nav>
</div>
</div>
Không có nhận xét nào:
Đăng nhận xét