Home > ASP.NET With C#, Lập Trình > BÀI HƯỚNG DẪN TẠO SHOPPING CART SHOW SẢN PHẨM – ASP.NET, C#

BÀI HƯỚNG DẪN TẠO SHOPPING CART SHOW SẢN PHẨM – ASP.NET, C#

hmweb – 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. Bạn có thể xem demo tại đây

Ở đâ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"
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> &nbsp;
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

Bạn có thể download Source và thư viện cần thiết tại đây
Trong bài viết sau tôi sẽ hướng dẫn bạn làm slide như trang demo này

Chúc bạn thành công

hungbv@hmweb.com.vn

 

  1. Maluc_it
    2011/07/17 at 4:45 pm

    Cảm ơn bạn rất nhiều.

    • Maluc_it
      2011/07/17 at 4:47 pm

      Cảm ơn bạn rất nhiều. Bạn hướng dẫn tiếp bài sau di ban.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: