Tạo Shopping Cart show sản phẩm
Được viết bởi
QuangIT
ngày 31/07/2012 lúc 02:41 PM
Trong bài biết này tôi sẽ hướng dẫn bạn cách sử dụng một thư viện để thực hiện Show ảnh minh họa như giới thệu sản phẩm trong Shopping cart.
Tạo Shopping Cart show sản phẩm
Trong bài biết này tôi sẽ hướng dẫn bạn cách sử dụng một thư viện để thực hiện Show ảnh minh họa như giới thệu sản phẩm trong Shopping cart.
Ở đây tôi sử dụng một thư viện miễn phí obout_Show_Net.dll. Bạn có thể download thư viện này và code bài viết tại liên kết cuối bài viết. Khi có thư viện này bạn Add vào thư mục Bin trong ứng dụng. (Bạn có thể Add vào Toolbox của Visual Studio để kéo thả cho dễ trong việc viết code)
Dữ liệu và ảnh minh họa cho sản phẩm bạn có thể lấy từ Database. Trong bài viết này tôi minh họa bằng các ảnh trực tiếp trên thư mục của ứng dụng nhưng tôi có viết trong vòng lặp để nếu bạn áp dụng có thể dễ dàng chuyển sang lấy từ Database.
Trong trang asp.net bạn viết code như sau:
01 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="obout_Show.aspx.cs" Inherits="obout_Show" %>
02 <%@ Register Assembly="obout_Show_Net" Namespace="OboutInc.Show" TagPrefix="hmweb" %>
03 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
04 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
05 <html xmlns="http://www.w3.org/1999/xhtml">
06 <head runat="server">
07 <title>hmweb.com.vn - Chia se la niem vui</title>
08 <style type="text/css">
09 .panelTable
10 {
11 background-color:white;
12 padding:7px;height:100%;width:100%;
13 border-collapse: separate;
14 border-spacing: expression(cellSpacing=0);
15 border-spacing: 0px;border-padding: 0px;
16 border-padding: expression(cellPadding=0);
17 }
18 .showContainer{width:400px;padding:7px;border:1px solid #cccccc;}
19 ul li{font-size:11px;}
20 a{font-size:11px;}
21 .examples{font-size:11px;}
22 body{font-family:Tahoma;}
23 .tdText {color:#333333;font:11px Verdana;}
24 </style>
25 </head>
26 <body>
27 <form id="form1" runat="server">
28 <div class="showContainer">
29 <hmweb:Show ID="Show2"
30 runat="server"
31 Width="400"
32 Height="220"
33 ShowType="Show"
34 SelectedPanel="1"
35 TransitionType="Scrolling"
36 ScrollDirection="Bottom" />
37 </div>
38 </form>
39 </body>
40 </html>
Khi sử dụng có mấy thuộc tính sau bạn có thể thay đổi.
- ScrollDirection: Left, Right, Top, Button là các hướng chuyển (ảnh) tương ứng
- TransitionType: Fading, QuickScroll, Scrolling
Ngoài ra còn các thuộc tính của Css có thể giúp tạo hover trong sản phẩm.
Tiếp theo trong code behind bạn viết code như sau:
01 protected void Page_Load(object sender, EventArgs e)
02 {
03 OboutInc.Show.Panel nPanen = new OboutInc.Show.Panel();
04 string sTemplate = "";
05 for (int i = 1; i <= 3; i++)
06 {
07 sTemplate = @"<table class='panelTable'>
08 <tr><td><img src='Common/Images/shoppingshow/notebook" + i.ToString() + @".jpg' /></td>
09 <td><div class='name'><a href='#'>Máy tính xách tay SP" + i.ToString() + @"</a><br /></div>
10 <div class='desc'>
11 <ul>
12 <li>Sản phẩm <b>" + i.ToString() + @"</b></li>
13 <li>Mô tả sản phầm thứ <b>" + i.ToString() + @"</b></li>
14 <li>1200 MHz</li>
15 <li>ATA100, 4200 rpm</li>
16 <li>DVD-RW Dual Layer (Extern)</li>
17 <li>Độ phân giải màn hình Sản phẩm <b>" + i.ToString() + @"</b></li>
18 </ul> <a href='#'>So sánh Sản phẩm <b>" + i.ToString() + @"</b></a>
19 <a href='#' style='color:red;font-weight:bold;'>Thêm vào giỏ hàng</a></div>
20 </td></tr></table>";
21 Show2.AddHtmlPanel(sTemplate);
22 }
23 }
Trong code trên bạn thấy tôi sử dụng một vòng lặp for và hiển thị theo chỉ số i tưởng ứng. Vậy nếu là lấy dữ liệu từ database cũng lấy dữ liệu cho vòng lặp tương ứng với sản phẩm trong Table của bạn
Nguồn bài viết:
hmweb