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

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

by

Đến với chương 5 hiển thị dữ liệu phần cuối chúng ta sẽ học đến cách làm cho các sản phẩm nổi bật. Việc làm cho sản phẩm nổi bật hay được nhiều chọn lựa sẽ làm cho khách hàng ghé thăm trang web của mình nhiều hơn. Vì thế lượng sản phẩm trong trang web sẽ được lựa chọn tốt hơn. Qua bài viết sau đây hãy cùng học với chúng tôi về những tin nổi bật này nhé!

1. Hiển thị các sản phẩm nổi bật

– Sản phẩm nổi bật cũng được hiển thị trên layout nên ta cần tạo 1 Action trả về PartialView chứa danh sách tin nổi bật sau đó gọi chúng trên layout .

– Việc hiển thị sản phẩm nổi bật có tính biến đổi tùy theo yêu cầu .Đôi khi có những yêu cầu cần ta thiết kế lại cấu trúc cơ sở dữ liệu .Giả sử sản phẩm nổi bật dựa theo tiêu tri được mua nhiều nhất , được chỉ định hiển thị là sản phẩm nổi bật ( cần thêm thuộc tính định nghĩa CSDL là true hoặc false chẳng hạn) .Vì thế việc hiển thị tin nổi bật rất đa dạng

– Mấu chốt ở đây chỉ là lấy về danh sách sản phẩm dưới CSDL thỏa mãn điều kiện nào đó .Để ví dụ đơn giản ta lấy về 5 sản phẩm mới nhất dưới CSDL làm sản phẩm nổi bật để làm ví dụ

Controller

– Tạo Action Top5Product trong ProductController như sau :

public ActionResult Top5Product()

{

return PartialView(db.Products.Take(5));

}

PartialView : Top5Product

– Chuột phải vào Action Top5Product ta chọn add view như hình sau :

image32

– Chọn các thông số cho PartialView như hình sau :

image33

– Mã Top5Product PartialView như hình sau :

 

@model IEnumerable<ProductMvc.Models.Product>

<div class=”header1″>

Sản Phẩm Nổi Bật

</div>

<ul>

@foreach (var item in Model)

{

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

}

</ul>

Gọi Action Top5Product trong Layout

– ta thay lời gọi tới SidebarPartial bằng gọi tới Action Top5News như sau :

 

@Html.Action(“Top5Product”,”Product”)

– Mã Layout như sau :

<header>

<div>@Html.Partial(“HeaderPartial”)</div>

<nav class=”mainMenu”>@Html.Partial(“MenuPartial”)</nav>

</header>

<div class=”body”>

<article class=”inline-block main”>

@RenderBody()

</article>

<aside class=”inline-block sidebar”>

@Html.Action(“Top5Product”, “Product”)

</aside>

</div>

<footer>

@Html.Partial(“FooterPartial”)

</footer>

@Scripts.Render(“~/bundles/jquery”)

@RenderSection(“scripts”, required: false)

Chạy lại ứng dụng được kết quả như hình sau :

image34

– Ta thấy nội dung trái ( sidebar) đã hiển thị thông tin động dưới CSDL

– Mỗi sự thay đổi nội dung dưới CSDL đều sẽ cập nhật lại lên View .Phần tới chúng ta sẽ đề cập tới các vấn đề thay đổi nội dung CSDL .

2. Tổng kết

– Chúng ta đã hiển thị nội dung sản phẩm , loại sản phẩm theo cấu trúc dữ liệu đã thiết kế

– Đồng thời đã cắt CSS , HTML ở mức độ cơ bản .

– Qua đây các bạn thấy việc xây dựng 1 ứng dụng trên nền mô hình Asp.net MVC thật đơn giản .Các bạn học được cách lấy thông tin từ dưới CSDL rồi dùng C# để sinh mã HTML tùy thích theo ý muốn .

– Việc xử lý view tương tự công việc cắt CSS , HTML đơn thuần

– việc lấy dữ liệu từ CSDL trong Entity Framework dùng các truy vấn Linq nên rất đơn giản .Bạn cần có những hiểu biết tối thiểu về truy vấn Linq để đọc hiểu code các Action truy vấn dữ liệu .Di nhiên Linq đơn giản hơn Ado.net rất nhiều .Khi làm việc với nó các bạn có thể quyên đi cả các truy vấn T-Sql thông thường .

– Chúng tôi không định dạng CSS phức tạp để tạo nên giao diện đẹp, chủ yếu để mã nguồn đơn giản cho các bạn học .Để thấy việc định dạng giao diện đẹp hơn như thế nào các bạn có thể tham khảo mã nguồn mở về Web tin tức của chúng tôi để thấy rõ việc định dạng giao diện bằng CSS một cách phức tạp hơn .

Nguồn: laptrinhvien.net

Leave a Comment

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