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

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

by

Trong một trang web những thông tin liên quan đến sản phẩm là những thông tin thiết yếu cho một trang web. Ngoài ra việc sử dụng dành cho hiển thị dữ liệu các sản phẩm của trang web rất được ít làm ở trước kia. Qua bài viết sau đây chúng tôi sẽ giúp bạn hoàn thiện kỹ năng hiển thị dữ liệu cho trang web của bạn.

Hiển thị danh mục sản phẩm trên trang chủ

– Trang chủ ta sẽ hiển thị danh mục các loại sản phẩm , mỗi loại sản phẩm ta sẽ hiển thị 1 vài sản phẩm đại diện tương ứng ( không hiển thị hết để tránh nặng website)

1. Chỉnh lại mã code Action Index ProductController :

public class ProductController : Controller

{

VinaEntity db = new VinaEntity();

public ActionResult Index()

{

return View(db.Categorys);

}

 

}

2. PartialView ShowPartial:

– View Index hiển thị danh sách Category và Product tương ứng với Category

– Để tránh nặng khi load website lần đầu ( vì Action Index được load đầu tiên khi vào website) nên ta chỉ hiển thị 3 sản phẩm tương ứng với 1 loại sản phẩm ( có thể hiển thị nhiều – ít hơn tùy ý ) .

– Khi nhấn vào Link của Category cụ thể nào thì sẽ hiển thị toàn bộ sản phẩm của Category đó

– Do vậy ta tạo chung 1 PartialView hiển thị danh sách Product , sau đó gọi lại trong các View này

Tạo ShowPartial PartialView như hình sau :

Chuột phải thư mục Product trong view , chọn add view

image20

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

image21

– Ta chọn mã template là Empty vì ta phải code lại toàn bộ nội dung html và css

Chú ý nếu trong mục Model class chưa hiện lớp Category , thì các bạn cần Rebuild lại Project bằng cách Right Project chọn Rebuild như hình sau :
image22

Code ShowPartial View như sau :

@model IEnumerable<ProductMvc.Models.Product>

@foreach (var item in Model.Take(3))

{

<div class=”inline-block” style=”width: 30%; height: 225px; overflow: auto; border: 1px solid #d1cdcd; margin: 8px;”>

<div class=”header1″>

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

</div>

<div class=”float-left”>

<a href=”@Url.Action(“Details”, “Product”, new { id = item.ProductID })”>

<img src=”@Url.Content(“~/” + @item.Image)” style=”width:100px; height:100px; margin:5px 2px;”/>

</a>

</div>

<div>@item.ShortDescription</div>

<div class=”clear-both”>

<div>

Price : @string.Format(“{0:0,0 VNĐ}”, item.Price).Replace(“,”, “.”)

</div>

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

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

</div>

</div>

</div>

}

3. Định dạng CSS :

– Có 1 vài định dạng chỉ sử dung trong trang này nên chúng tôi định dạng CSS trực tiếp trong thẻ html ( thông qua thuộc tính Style của tag html ) .Các bạn sẽ thấy kỹ thuật định dạng này trong webform khi Visual tự động sinh mã định dạng

– Các lớp dùng nhiều cho các trang như float , clear được chúng tôi định dạng trong file BasicStyle.css .Các bạn mở file BasicStyle.css ( đã tạo ở phần 3.4) thêm vào code sau:

– lớp inline-block đã định nghĩa trong phần layout trong file BasicStyle.css

.float-left {

float: left;

}

 

.float-right {

float: right;

}

 

.clear-both {

clear: both;

}

Định dạng link header trong file BasicStyle.CSS

.header1 {

background: #d1cdcd;

border-radius: 5px;

padding: 3px;

}

 

.header1, .header1 a {

color: #000;

font-weight: bold;

font-size: 16px;

}

– Các bạn xem lại mã CSS phần 3.4 , chúng tôi đã cung cấp sẵn các mã CSS định dạng sẵn cho các đối tượng và các thẻ html

– Ngoài ra chúng tôi còn định dạng hiển thị trường Giá (Price ) theo định dạng tiền tệ Việt Nam

4. View Index

– Như đã nói chúng ta sẽ hiển thị danh sách loại sản phẩm ( Category) và 3 sản phẩm tương ứng với mỗi Category tại View Index

– Chúng ta sẽ dùng ShowPartial đã tạo ở trên để hiển thị danh sách sản phẩm

– Code View Index như sau :

@model IEnumerable<ProductMvc.Models.Category>

@{

ViewBag.Title = “Index”;

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

}

@foreach (var item in Model)

{

<div class=”header1″>

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

</div>

if (item.Products.Count() > 0)

{

@Html.Partial(“ShowPartial”, item.Products)

}

}

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

image23

– Trở về VS , nhấn Refresh , show file ẩn như hình sau sẽ thấy được file CSDL có tên là ProductMvcDB được tạo ra trong thư mục App_Data .Tên CSDL được đặt trong file web.config lúc khai báo chuỗi kết nối

– Mở file NewsMvcDB.sdf bằng VisualStudio được kết quả như hình sau :

image24

– Ta có thể xem thông tin CSDL được tạo ra các bảng như Menu , User , News …Hoặc có thể thêm dữ liệu trực tiếp trong File này bằng cách chọn chuột phải / Show Table data như hình sau :

image25

Được kết quả như hình sau :

– Khi đã xem xong ta cần đóng kết nối lại để có thể chỉnh sửa nội dung file CSDL , nếu không sẽ báo lỗi do file CSDL đang được mở bởi 1 chương trình khác .Đóng kết nối bằng cách chuột phải vào CSDL  chọn Close connection như hình sau :

image26

 

Nguồn: laptrinhvien.net

Leave a Comment

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