Aspx.net / MVC — August 9, 2016 at 3:28 am

Xây dựng web bán hàng bằng MVC – Chương 5: Hiển thị dữ liệu (phần 2)

by

Hôm nay chúng ta sẽ tiếp tục chương 5 hiển thị dữ liệu, vấn đề nói tới hôm nay là làm cách nào để có thể hiển thị những sản phẩm một cách hiệu quả. Cho Khách hàng những sự lựa chọn sản phẩm tối ưu hơn hiệu quả khi click vào. Cùng tham khảo bài viết này các bạn nhé!

I. Hiển thị danh sách sản phẩm (product) theo loại sản phẩm

– Ta sẽ xây dựng các chức năng khi nhấn vào danh mục sản phẩm sẽ hiện tất cả các sản phẩm cùng danh mục .Và chức năng khi hiển thị chi tiết sản phầm khi nhấn và tên sản phẩm như hình sau :

image26

1. Controller :

Trong phần 5.1 ta đã tạo ra các thẻ link ( a) gọi tới Action ProductId của ProductController , trong phần này ta sẽ tạo Action và Controller này

@Html.ActionLink(item.CategoryName, “ProductId”, “Product”, new { id = item.CategoryID }, null)

– ActionLink này sẽ truyền 1 tham số là CategoryID tương ứng với CategoryName đang hiển thị , do vậy Action ProductId phải nhận 1 tham số có tên là id

– Mã Action ProductId như sau :

 

  public ActionResult ProductId(int id)

{

return View(db.Products.Where(m=>m.CategoryID==id));

}

2. View

Mã View ProductId như sau :

 

@model IEnumerable<ProductMvc.Models.Product>

@{

ViewBag.Title = “ProductId”;

Layout = “~/Views/Shared/_Layout.cshtml”;

}

@Html.Partial(“ShowPartial”,Model)

– View ProductId ta gọi PartialView ShowPartial đã tạo ở phần trước

Chạy ứng dụng , nhấn vào link loại sản phẩm để hiển thị danh sách sản phẩm tương ứng với loại sản phẩm như hình sau :

image27

Ta sẽ hiển thị được danh sách sản phẩm như hình sau :

image28

II. Hiển thị chi tiết sản phẩm

– Khi hiển thị danh sách sản phẩm theo danh mục sản phẩm , hay tại trang Index , khi nhấn và link tên sản phẩm sẽ hiển thị chi tiết sản phẩm như hình sau :

image30

Link tên sản phẩm gọi tới Action Details như sau :

@Html.ActionLink(@item.ProductName, “Details”, “Product”, new { id = item.ProductID }, null)

1. Ta xây dựng Action Details trong ProductController như sau :

 

public ActionResult Details(int id) {

return View(db.Products.Find(id));

}

2. View Details

– Mã View Details như sau :

 

@model ProductMvc.Models.Product

 

@{

ViewBag.Title = “Details”;

Layout = “~/Views/Shared/_Layout.cshtml”;

}

<div class=”float-left”>

<img src=”@Url.Content(“~/” + Model.Image)” width=”150″ height=”150″/>

</div>

<div>

<div class=”textHeader”>

@Html.DisplayFor(model => model.ProductName)

</div>

<div>

Giá:  @string.Format(“{0:0,0$}”, Model.Price).Replace(“,”, “.”)

</div>

<div>

<div style=”margin-top: 10px;”>

<a href=”#” data-id=”@Model.ProductID” class=”BuyProduct linkButton1″>Mua Sản Phẩm</a>

</div>

</div>

</div>

<div class=”clear-both”>

@MvcHtmlString.Create(Model.Description)

</div>

– Hầu như ta dùng lại mã html đã xây dựng ở các trang khác

– Một chú ý đó là trường Content là các chuỗi chứa mã html ( dùng thư viện CkEditor tạo nội dung) , vì vậy ta sẽ dùng đối tượng MvcHtmlString để chạy các mã html này

– Chạy ứng dụng , click vào các link liên kết tên sản phẩm ( có thể click vào ảnh minh họa sản phẩm ) như hình sau

image29

Trang chi tiết sản phẩm sẽ được gọi kết quả như hình sau :

image31

Nguồn: laptrinhvien.net

Leave a Comment

Your email address will not be published. Required fields are marked *