【一】新建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="提交保存"
οnclick="btnadd_Click" />
<asp:Button ID="btnclear" class="go-wenbenkuang" runat="server" Text="重置"
οnclick="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 ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- =============================================
-- Author: keithray
-- Create date: 2011-10-15
-- Description: 根据商品ID获取上一件商品或者下一件商品
-- =============================================
CREATE PROCEDURE proc_PrevOrNextPro
@proid int,--商品
@str nvarchar(20) --取的是上一件还是下一件,如果是prev则是上一件,否则是下一件
AS
BEGIN
declare @rowid int
select @rowid=rowid from
(select ROW_NUMBER() over (order by createDate desc) as rowid,* from Shop_product)
as a where a.id=@proid
if @str='prev'
set @rowid=@rowid-1
else
set @rowid=@rowid+1
select * from (
select ROW_NUMBER() over (order by createDate desc) as rowid,* from Shop_product
) as a where a.rowid=@rowid
END
GO
(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;
}