购物网第三阶段总结笔记5：商品内容页制作
来源：互联网 发布：java程序员进阶路线图 编辑：程序博客网 时间：2024/05/16 12:15
【一】新建pro.aspx页面，作为商品的内容页。
通过分析这个页面，可以把制作整合这个页面分为三步：
第一步：显示商品的基本信息。
第二步：商品评论。
第三步：页面按钮功能实现。
【二】：第一步，第二步：
（1）：在ProplDAO.cs中添加函数，用于获取商品评级：
//获得商品的评级 public int GetPJByProid(int proid) { string sql = "select AVG(pj) from Shop_propl where proid=@proid "; Database db = DatabaseFactory.CreateDatabase(); DbCommand cmd = db.GetSqlStringCommand(sql); db.AddInParameter(cmd,"proid",DbType.Int32,proid); object obj = db.ExecuteScalar(cmd); if (obj==null||obj.ToString()=="") { return 0; } return int.Parse(obj.ToString()); }aspx代码：
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="pro.aspx.cs" Inherits="Web.pro" %><asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <table border="0" height="136" width="785"> <tr> <td background="images/pic_005.gif" valign="top" width="167"> <table border="0" height="134" width="100%"> <tr> <td height="48"> </td> </tr> <tr> <td> 用户： <input name="textfield2" size="15" type="text" /> </td> </tr> <tr> <td> 密码： <input name="textfield" size="15" type="text" /> </td> </tr> <tr> <td align="center"> <a href="#">登录</a> <a href="#">注册</a> <a href="#">忘记密码</a> </td> </tr> </table> </td> <td width="405"> <img height="136" src="images/adad.jpg" width="396" /> </td> <td width="199"> <ul class="ul_znxw"> <li><a href="#">站内新闻一</a></li> <li><a href="#">站内新闻二</a></li> <li><a href="#">站内新闻三</a></li> <li><a href="#">站内新闻四</a></li> <li><a href="#">站内新闻五</a></li> </ul> </td> </tr> </table> <table border="1" width="789"> <tr> <td height="72" valign="top" width="168"> <img height="63" src="images/pic_008.gif" width="168" /> </td> <td align="left" rowspan="6" valign="top" width="605"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td background="images/bg1_4color_.jpg"> <img height="3" src="images/bg1_4color_.jpg%2522" width="1" /> </td> </tr> </table> <br /> <table align="center" border="0" cellpadding="0" cellspacing="1" width="98%"> <tr> <td bgcolor="cccccc" height="1"> <img border="0" height="1" src="images/dot_03.gif" width="9" /> </td> </tr> <tr> <td bgcolor="efefef" height="25"> <strong> <img border="0" height="9" src="images/dot_03.gif" width="9" /> </strong><b> <asp:Literal ID="litproname" runat="server"></asp:Literal>的商品信息：</b> </td> </tr> <tr> <td bgcolor="cccccc" height="1"> <img border="0" height="1" src="images/dot_03.gif" width="9" /> </td> </tr> </table> <table border="0" cellpadding="0" cellspacing="0" height="5" width="100%"> <tr> <td height="10"> </td> </tr> </table> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> <table align="center" border="0" cellpadding="0" cellspacing="0" width="98%"> <tr> <td valign="top" width="224"> <table border="0" cellpadding="2" cellspacing="0" width="100%"> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" height="100" width="120"> <tr> <td> <div align="center"> <asp:Image ID="imgproimg" Width="146" Height="140" runat="server" /> </div> </td> </tr> </table> </td> </tr> <tr> <td> <s><font color="#FF0000"><font color="#000000">市场价：<asp:Literal ID="litmarketprice" runat="server"></asp:Literal>元</font></font></s><strong> </strong><font color="#FF0000"> </font> </td> </tr> <tr> <td> <font color="#FF0000"> 会员价：<asp:Literal ID="litmemberprice" runat="server"></asp:Literal>元</font> <s>节省：<asp:Literal ID="litmemberprice2" runat="server"></asp:Literal>元</s> </td> </tr> <tr> <td> <font color="#FF0000"> VIP价：<asp:Literal ID="litvipprice" runat="server"></asp:Literal>元</font> <s>节省：<asp:Literal ID="litvipprice2" runat="server"></asp:Literal>元</s> </td> </tr> </table> </td> <td valign="top"> <table border="0" cellpadding="2" cellspacing="0" width="98%"> <tr> <td height="25"> 【商品名称】<asp:Literal ID="litproname2" runat="server"></asp:Literal> </td> </tr> <tr> <td height="25"> 【商品状态】<asp:Literal ID="litstate" runat="server"></asp:Literal> </td> </tr> <tr> <td height="25"> 【商品规格】<asp:Literal ID="litmorn" runat="server"></asp:Literal> </td> </tr> <tr> <td height="25"> 【商品单位】<asp:Literal ID="litprodw" runat="server"></asp:Literal> </td> </tr> <tr> <td height="25"> 【评分】 <asp:Literal ID="litPJ" runat="server"></asp:Literal> 共有<asp:Literal ID="litplnum2" runat="server"></asp:Literal>位网友参与打分 </td> </tr> <tr> <td height="25"> 【所属类别】<asp:Literal ID="litca" runat="server"></asp:Literal> </a> </td> </tr> <tr> <td height="40"> <a href="#"> <img border="0" height="36" src="images/gm1.gif" width="110" /></a> <a _blank="" href="#"> <img border="0" height="36" src="images/shc1.gif" width="98" /></a> <asp:HyperLink ID="hlfdtp" Target="_blank" runat="server"> <img border="0" height="36" src="images/detailview_off.gif" width="115" /></asp:HyperLink> </td> </tr> </table> </td> </tr> </table> <br /> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> <table align="center" border="0" cellpadding="0" cellspacing="0" width="95%"> <tr> <td> <table align="center" border="0" cellpadding="0" cellspacing="1" width="100%"> <tr> <td bgcolor="cccccc" height="1"> <img border="0" height="1" src="images/dot_03.gif" width="9" /> </td> </tr> <tr> <td bgcolor="efefef" height="25"> <strong> <img border="0" height="9" src="images/dot_03.gif" width="9" /> </strong><b> <asp:Literal ID="litproname3" runat="server"></asp:Literal> 的说明：</b> </td> </tr> <tr> <td bgcolor="cccccc" height="1"> <img border="0" height="1" src="images/dot_03.gif" width="9" /> </td> </tr> </table> <br /> <b> 商品说明</b><br /> <asp:Literal ID="litdesc" runat="server"></asp:Literal><br /> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td height="30"> <div align="center"> <a href="list.asp?id=163"><strong><font color="#FF0000"> <img border="0" height="19" src="images/ansh.gif" width="47" /></font></strong></a> <strong><a href="list.asp?id=165"><font color="#FF0000"> <img border="0" height="19" src="images/anx.gif" width="47" /></font></a> <a href="index.asp"> <img border="0" height="19" src="images/anf.gif" width="47" /></a></strong></div> </td> </tr> <tr> <td height="25"> <b>网友评论</b> 欢迎您对商品进行评论，表明您对此商品的感觉。 </td> </tr> <tr> <td height="12"> </td> </tr> <asp:Repeater ID="rep" runat="server"> <ItemTemplate> <tr> <td> <table align="center" bgcolor="#e8eef3" border="0" cellpadding="0" cellspacing="1" width="98%"> <tr bgcolor="#FFFFFF"> <td align="right" height="22" width="5%"> <img height="15" src="images/image002.gif" width="15" /> </td> <td bgcolor="#FFFFFF" colspan="2" height="22"> <b>主题：</b><%#Eval("title") %> </td> <td height="22" width="36%"> <%-- <img src="images/pingji/5.gif" />--%> <%#GetPJImg(Eval("pj")) %> </td> </tr> <tr bgcolor="#FFFFFF"> <td width="5%"> </td> <td bgcolor="#FFFFFF" colspan="2"> <b>作者：</b><%#Eval("username") %> (<%#Eval("createDate") %>) </td> <td bgcolor="#FFFFFF" width="36%"> <strong>IP：</strong><%#Eval("ip") %> </td> </tr> <tr bgcolor="#FFFFFF"> <td width="5%"> </td> <td colspan="3"> <%#Eval("body") %> </td> </tr> </table> <br /> </td> </tr> </ItemTemplate> </asp:Repeater> <tr> <td align="right" height="22"> <a href="proly.aspx">>>浏览该商品的全部<asp:Literal ID="litplnum" runat="server"></asp:Literal>条评论 </a> </td> </tr> <tr> <td align="center"> <table bgcolor="#CCCCCC" border="0" cellpadding="0" cellspacing="1" style="text-align: left;" width="98%"> <tr> <td bgcolor="#FFFFFF" height="25"> <img height="15" src="images/go.gif" width="15" /> <font color="#000000"><b><strong><font color="">发表您的评论：</font></strong></b></font> </td> </tr> <tr> <td bgcolor="#FFFFFF"> 姓名： <asp:TextBox ID="txtname" runat="server"></asp:TextBox> 标题： <asp:TextBox ID="txttitle" runat="server"></asp:TextBox> </td> </tr> <tr> <td bgcolor="#FFFFFF"> 评级： <asp:RadioButton ID="rad5" GroupName="pj" Checked="true" runat="server" /> <img height="12" src="images/pingji/5.gif" width="55" /> <asp:RadioButton ID="rad4" GroupName="pj" runat="server" /> <img height="12" src="images/pingji/4.gif" width="55" /> <asp:RadioButton ID="rad3" GroupName="pj" runat="server" /> <img src="images/pingji/3.gif" /> <asp:RadioButton ID="rad2" GroupName="pj" runat="server" /> <img src="images/pingji/2.gif" /> <asp:RadioButton ID="rad1" GroupName="pj" runat="server" /> <img height="12" src="images/pingji/1.gif" width="55" /> </td> </tr> <tr> <td bgcolor="#FFFFFF"> <font color="#000000"><b><strong></strong></b></font>请在以下填写评论正文：<br /> <asp:TextBox ID="txtbody" TextMode="MultiLine" runat="server" Height="37px" Width="322px"></asp:TextBox> </td> </tr> <tr> <td bgcolor="#FFFFFF"> </td> </tr> <tr> <td bgcolor="#FFFFFF"> <asp:Button ID="btnadd" class="go-wenbenkuang" runat="server" Text="提交保存" onclick="btnadd_Click" /> <asp:Button ID="btnclear" class="go-wenbenkuang" runat="server" Text="重置" onclick="btnclear_Click" /> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td valign="top"> <div class="ca"> <div class="ca_title"> <a href="#" style="color: #00CCFF">影视音乐</a></div> <a href="#">电影电视</a> <a href="#">百秋教育</a> <a href="#">港台影剧</a> <a href="#">韩国影剧</a> <a href="#">日本影剧</a> <a href="#">欧美大片</a> </div> <div class="ca"> <div class="ca_title"> <a href="#" style="color: #00CCFF">精品图片</a></div> <a href="#">计算机类</a> <a href="#">数学类</a> <a href="#">会计财务类</a> <a href="#">物理类</a> </div> <div class="ca"> <div class="ca_title"> <a href="#" style="color: #00CCFF">IT数码</a></div> <a href="#">数码相机</a> <a href="#">手机</a> <a href="#">电脑配件</a> <a href="#">数码配件</a> </div> </td> </tr> <tr> <td> <img height="63" src="images/pic_023.gif" width="168" /> </td> </tr> <tr> <td> <ul class="ul_zxzt"> <li><a href="#">商品最新专题1</a></li> <li><a href="#">商品最新专题2</a></li> <li><a href="#">商品最新专题3</a></li> <li><a href="#">商品最新专题4</a></li> <li><a href="#">商品最新专题5</a></li> <li><a href="#">商品最新专题6</a></li> <li><a href="#">商品最新专题7</a></li> <li><a href="#">商品最新专题8</a></li> <li><a href="#">商品最新专题9</a></li> <li><a href="#">商品最新专题10</a></li> </ul> </td> </tr> <tr> <td> <img height="63" src="images/pic_024.gif" width="168" /> </td> </tr> <tr> <td> <ul class="ul_zxzt"> <li><a href="#">商品最新专题1</a></li> <li><a href="#">商品最新专题2</a></li> <li><a href="#">商品最新专题3</a></li> <li><a href="#">商品最新专题4</a></li> <li><a href="#">商品最新专题5</a></li> <li><a href="#">商品最新专题6</a></li> <li><a href="#">商品最新专题7</a></li> <li><a href="#">商品最新专题8</a></li> <li><a href="#">商品最新专题9</a></li> <li><a href="#">商品最新专题10</a></li> </ul> </td> </tr> </table></asp:Content>
cs代码：
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace Web{ public partial class pro : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { string id=Request.QueryString["id"]; int x; if (int.TryParse(id,out x)) { MyShop.Model.Product model=new MyShop.DAL.ProductDAO().GetModel(x); litmarketprice.Text = model.marketprice.ToString("c2");//c2:货币，2位小数 litmemberprice.Text = model.memberprice.ToString("c2"); litvipprice.Text = model.vipprice.ToString("c2"); litproname.Text = model.proname; litproname2.Text = model.proname; litproname3.Text = model.proname; litstate.Text = model.state; litmorn.Text = model.norm; litprodw.Text = model.dw; litdesc.Text = model.prodesc; imgproimg.ImageUrl ="~/upload/"+ model.proimg; //节省多少钱 litmemberprice2.Text = (model.marketprice - model.memberprice).ToString("c2"); litvipprice2.Text = (model.memberprice - model.vipprice).ToString("c2"); //放大图片 hlfdtp.NavigateUrl = "~/upload/" + model.proimg; //显示商品类别 MyShop.Model.Categroy ca = new MyShop.DAL.CategroyDAO().GetModel(model.caid); if (ca!=null)//ca为二级分类 { MyShop.Model.Categroy ca2 = new MyShop.DAL.CategroyDAO().GetModel(ca.pid);//根据二级分类的pid获取一级分类 if (ca2!=null) { litca.Text ="<a href='prolist.aspx?caid="+ca2.id+"'>"+ca2.caname+"</a> > <a href='prolist.aspx?caid="+ca.id+"'>"+ca.caname+"</a>"; } } //商品评级 int pj = new MyShop.DAL.ProplDAO().GetPJByProid(model.id); litPJ.Text = GetPJImg(pj); } else { Response.Write("参数传入错误！"); Response.End(); return; } //绑定评论 litplnum.Text = new MyShop.DAL.ProplDAO().CalcCount("proid=" + id).ToString();//评论数目 litplnum2.Text = new MyShop.DAL.ProplDAO().CalcCount("proid=" + id).ToString();//评论数目 rep.DataSource = new MyShop.DAL.ProplDAO().GetList("proid="+id); rep.DataBind(); } } //重置 protected void btnclear_Click(object sender, EventArgs e) { txtbody.Text = ""; txtname.Text = ""; txttitle.Text = ""; rad5.Checked = true; rad4.Checked = false; rad3.Checked = false; rad2.Checked = false; rad1.Checked = false; } //评论 protected void btnadd_Click(object sender, EventArgs e) { string proid = Request.QueryString["id"]; string title = txttitle.Text.Trim(); string body = txtbody.Text.Trim(); string name = txtname.Text.Trim(); string ip = Request.UserHostAddress; int pj = 5; if (rad1.Checked) { pj = 1; } else if (rad2.Checked) { pj = 2; } else if (rad3.Checked) { pj = 3; } else if (rad4.Checked) { pj = 4; } new MyShop.DAL.ProplDAO().Add(new MyShop.Model.Propl() { proid=int.Parse(proid), title=title, body=body, username=name, ip=ip, pj=pj, createDate=DateTime.Now }); Page.ClientScript.RegisterStartupScript(Page.GetType(), "MsgBox", "<script>alert('评论成功！')</script>"); txtbody.Text = ""; txtname.Text = ""; txttitle.Text = ""; rad5.Checked = true; rad4.Checked = false; rad3.Checked = false; rad2.Checked = false; rad1.Checked = false; } //获取对应的评级图片 public string GetPJImg(object pj) { switch (pj.ToString()) { case "1": return "<img src='images/pingji/1.gif' />"; break; case "2": return "<img src='images/pingji/2.gif' />"; break; case "3": return "<img src='images/pingji/3.gif' />"; break; case "4": return "<img src='images/pingji/4.gif' />"; break; case "5": return "<img src='images/pingji/5.gif' />"; break; default: return ""; break; } } }}
【三】第三步：
（1）实现：
上一件和下一件商品的显示思路：
错误的思路：
不能用商品的id加1或者减1来实现，因为如果某些商品删除了，那么这些商品的id就会不存在，会出现“断层”。
把所有的商品都select出来，为它们as新增一个字段，这个字段保存了select出来的商品的排序数列，这样，用某件商品的数列加1或者减1，即可。
（1）：新建一个存储过程：用于根据商品ID获取上一件商品或者下一件商品
SET ANSI_NULLS ONGOSET QUOTED_IDENTIFIER ONGO-- =============================================-- Author:keithray-- Create date: 2011-10-15-- Description:根据商品ID获取上一件商品或者下一件商品-- =============================================CREATE PROCEDURE proc_PrevOrNextPro@proid int,--商品 @str nvarchar(20) --取的是上一件还是下一件,如果是prev则是上一件，否则是下一件ASBEGINdeclare @rowid intselect @rowid=rowid from (select ROW_NUMBER() over (order by createDate desc) as rowid,* from Shop_product)as a where a.id=@proidif @str='prev'set @rowid=@rowid-1elseset @rowid=@rowid+1select * from (select ROW_NUMBER() over (order by createDate desc) as rowid,* from Shop_product) as a where a.rowid=@rowidENDGO
（2）：在DAL中的ProductDAO.cs中添加一个函数用于执行这个存储过程：
/// <summary> /// 根据商品ID获取上一件商品或者下一件商品 /// </summary> /// <param name="proid">商品id</param> /// <param name="str">上一件:prev或者下一件:next</param> /// <returns></returns> public MyShop.Model.Product GetPrevOrNextProModel(int proid,string str) { string proc = "proc_PrevOrNextPro"; Database db = DatabaseFactory.CreateDatabase(); DbCommand dbCommand = db.GetStoredProcCommand(proc); db.AddInParameter(dbCommand, "proid", DbType.Int32, proid); db.AddInParameter(dbCommand, "str", DbType.String, str); MyShop.Model.Product model = null; using (IDataReader dataReader = db.ExecuteReader(dbCommand)) { if (dataReader.Read()) { model = ReaderBind(dataReader); } } return model; }（3）：aspx代码：
<asp:HyperLink ID="hlPrev" runat="server"> <img border="0" height="19" src="images/ansh.gif" width="47" /> </asp:HyperLink> <asp:HyperLink ID="hlNext" runat="server"> <img border="0" height="19" src="images/anx.gif" width="47" /> </asp:HyperLink>
（4）：cs代码：
//上一件 MyShop.Model.Product prev = new MyShop.DAL.ProductDAO().GetPrevOrNextProModel(model.id,"prev"); if (prev!=null) { hlPrev.NavigateUrl = "pro.aspx?id=" + prev.id; } else { hlPrev.Visible = false; } //下一件 MyShop.Model.Product next = new MyShop.DAL.ProductDAO().GetPrevOrNextProModel(model.id, "next"); if (prev != null) { hlNext.NavigateUrl = "pro.aspx?id=" + next.id; } else { hlNext.Visible = false; }- 购物网第三阶段总结笔记5：商品内容页制作
- 购物网第三阶段总结笔记2：添加商品页面
- 购物网第三阶段总结笔记6：商品收藏页面
- 购物网第三阶段总结笔记1：商品表的设计和后台产品分类界面制作
- 购物网第三阶段总结笔记4：新品上架页面和特价商品页面
- 购物网第三阶段总结笔记3：用户登陆主页显示登陆用户名
- 购物网第四阶段总结笔记1：购物车页面
- 购物网第四阶段总结笔记2：订单页面 order_modify.aspx, order_confirm.aspx,order_ok.aspx页面
- 购物网第四阶段总结笔记3：订单后期处理页面
- UI 第三阶段笔记
- 第三阶段-原型学习笔记
- 商品详情页+添加购物车
- React Native学习笔记（5）--ReactNative阶段综合项目--购物车
- 第三阶段 安全测试实验一总结
- (crm笔记)阶段一总结
- web阶段总结-课堂笔记
- 学习淘淘商城第一百零一课（删除购物车商品及购物车总结）
- 淘淘商城系列——删除购物车商品及购物车总结
- 苹果下一步做什么？
- Ubuntu+11.04+双显卡关闭独显方法
- PXE 远程批量安装linux 服务器
- PowerDesigner使用教程 —— 概念数据模型
- ok6410裸机开发_裸机编程_烧写工具
- 购物网第三阶段总结笔记5：商品内容页制作
- Powerdesigner使用建议
- C#做的工作流[初见成效]
- sql优化--上
- ThinkPHP结合PHPMailer自动发送邮件功能
- Android中使用Gson解析JSON数据
- 成为中兴人!
- 怎么成为优秀的软件模型设计者?
- mysql AB复制攻略
