XÂY DỰNG TRANG CHI TIẾT SẢN PHẨM

Một phần của tài liệu CÔNG NGHỆ WEB NÂNG CAO XÂY DỰNG WEBSITES VỚI ASP.NET 2.0 (Trang 78)

4.4.1. Thiết kế giao diện

Giao diện của trang chi tiết sản phẩm bao gồm: hình ảnh (có thể phóng lớn ảnh bằng cách click chuột vào nút zoom), tên sản phẩm, giá, mô tả của sản phẩm, nút thêm sản phẩm vào giỏ hàng và một danh sách các sản phẩm liên quan.

<script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects"

type="text/javascript"></script>

<script src="js/lightbox.js" type="text/javascript"></script> <script type="text/javascript" src="js/java.js"></script> <div class="crumb_nav">

<a href="Default.aspx">Trang chủ</a> &gt;&gt; <asp:Literal ID="lit_LinkSach"

runat="server"></asp:Literal> </div>

<div class="title"><span class="title_icon">

<img src="images/bullet1.gif" alt="" title="" /></span>

<asp:Literal ID="lit_ProductName"

runat="server"></asp:Literal> </div>

<div class="feat_prod_box_details"> <div class="prod_img">

<img alt="" id="img_Image" runat="server" title=""

border="0" />

<br /><br />

<a id="a_Image" runat="server" rel="lightbox">

<img src="images/zoom.gif" alt="" title="" border="0" /></a>

</div>

<div class="prod_det_box">

<div class="box_top"></div>

<div class="box_center">

<div class="prod_title">Chi tiết</div>

<p class="details">

<asp:Literal ID="lit_MoTaNgan"

runat="server"></asp:Literal></p>

<div class="price"><strong>GIÁ:</strong> <span class="red">

<asp:Literal ID="lit_Price"

runat="server"></asp:Literal>

VNĐ</span></div>

<asp:LinkButton ID="lbt_OrderNow" runat="server"

CssClass="more" OnClick="lbt_OrderNow_Click">

<img src="images/order_now.gif" alt="" title=""

border="0" />

</asp:LinkButton>

<div class="clear"></div>

</div>

</div>

<div class="clear"></div> </div>

<div id="demo" class="demolayout">

<ul id="demo-nav" class="demolayout">

<li><a class="active" href="#tab1">Thông tin thêm</a></li>

<li><a class="" href="#tab2">Sách liên quan</a></li>

</ul>

<div class="tabs-container">

<div style="display: block;" class="tab" id="tab1">

<p class="more_details">

<asp:Literal ID="lit_MoTa"

runat="server"></asp:Literal>

</p> </div>

<div style="display: none;" class="tab" id="tab2">

<asp:Repeater ID="rep_Related" runat="server"

OnItemDataBound="rep_Related_ItemDataBound">

<ItemTemplate>

<div class="new_prod_box">

<a href="Detail.aspx">

<asp:Literal ID="lit_TenSach"

runat="server"></asp:Literal>

</a>

<div class="new_prod_bg">

<a

href="Detail.aspx?id=<%#Eval("MaSach") %>">

<img

src="Photos/Thumb/<%#Eval("HinhMinhHoa") %>" alt="" title=""

class="thumb" border="0" /></a>

</div> </div>

</ItemTemplate>

</asp:Repeater>

<div class="clear"></div>

</div>

</div>

</div>

<div class="clear"></div>

<script type="text/javascript"> var tabber1 = new Yetii({

id: 'demo'

</script>

4.4.2. Xử lý tải dữ liệu

Khi ngƣời dùng vào trang chi tiết sản phẩm, chƣơng trình lấy ID của sản phẩm thông qua đối tƣợng Request, sau đó lấy các thông tin chi tiết của sản phẩm đó hiển thị cho khách hàng.

Sau đó chƣơng trình tiến hành lấy danh sách các sản phẩm cùng chủ đề với sản phẩm mà khách hàng đang xem gán cho thuộc tính DataSource của Repeater danh sách sản phẩm liên quan.

protected void Page_Load(object sender, EventArgs e) {

Session["Page"] = MainMenu.Detail; if (!IsPostBack)

{

LoadData(); }

}

private void LoadData() {

try

{

int iD =

int.Parse(Request.QueryString["id"].ToString()); tbSach sach = tbSachBUS.GetByID(iD); lit_LinkSach.Text = sach.TenSach; lit_ProductName.Text = sach.TenSach;

img_Image.Src = "Photos/Thumb/" + sach.HinhMinhHoa; a_Image.HRef = "Photos/" + sach.HinhMinhHoa;

lit_MoTaNgan.Text = sach.MoTa.Substring(0, 250) + "..."; lit_MoTa.Text = sach.MoTa; lit_Price.Text = sach.DonGia.ToString(); lbt_OrderNow.CommandArgument = sach.MaSach.ToString(); int total = 0;

Criteria cri = new Criteria();

cri.add(Condition.AND, tbSachColumns.MaCD.ToString(),

Condition.EQUAL, sach.MaCD); rep_Related.DataSource =

tbSachBUS.Get(cri.Criter, 1, 9,

tbSachColumns.MaSach.ToString(),

OrderDirection.DESC.ToString(), out total); rep_Related.DataBind();

} catch { Response.Redirect("~/Default.aspx"); } }

protected void rep_Related_ItemDataBound(object sender,

RepeaterItemEventArgs e) {

if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)

{

tbSach sach = (tbSach)e.Item.DataItem; Literal lit_TenSach =

(Literal)e.Item.FindControl("lit_TenSach"); if (sach.TenSach.Length > 16) lit_TenSach.Text = sach.TenSach.Substring(0, 16) + "..."; else lit_TenSach.Text = sach.TenSach; } }

Một phần của tài liệu CÔNG NGHỆ WEB NÂNG CAO XÂY DỰNG WEBSITES VỚI ASP.NET 2.0 (Trang 78)

Tải bản đầy đủ (PDF)

(93 trang)