购 物 车 实例
一.创建数据库
create database shoppingBus
use shoppingBus
--宠物类别
create table petType
(
petTypeID varchar(10) primary key, --类别编号
petTypeName varchar(50) not null unique --类别名称
--unique 约束禁止输入相同数据
)
--插入测试数据(宠物类别)
insert into petType values('pt1001','鸟类')
insert into petType values('pt1002','狗')
insert into petType values('pt1003','猫')
--宠物表
create table pet
(
petID varchar(20) primary key, --宠物编号
petName varchar(100) not null, --宠物名称
petTypeID varchar(10) foreign key references petType(petTypeID), --所属类别
petPrice money, --售价
petPhoto varchar(30), --照片
petRemark varchar(1000) --描述
)
--插入测试数据(宠物表)
insert into pet values('pet1001','波斯猫1','pt1003',100,'0001.gif','好猫啊,绝对纯种!')
insert into pet values('pet1002','波斯猫2','pt1003',100,'0002.gif','好猫啊,绝对纯种!')
insert into pet values('pet1003','波斯猫3','pt1003',100,'0003.gif','好猫啊,绝对纯种!')
insert into pet values('pet1004','波斯猫4','pt1003',100,'0004.gif','好猫啊,绝对纯种!')
二.ASP.NET Web应用程序
(1)在建立main.aspx中建立表格(3行1列)
欢迎光临(水平居中 24px blue)
(2)在第二行中添加"您可以选购的商品种类如下: "
(3)在第三行中添加GridView控件(取消页眉显示)
ItemStyle:height(20px)
三.添加连接数据库的类DB.CS
using System.Data.SqlClient;
public static SqlConnection CreateCon()
{
return new SqlConnection("server=.;database=shoppingBus;uid=sa;pwd=;");
}
四.回到main.aspx.cs中
using System.Data.SqlClient;
private void Page_Load(object sender,EventArgs e)
{
if(!this.IsPostBack)
{
SqlConnection con=DB.CreateCon();
con.Open();
SqlCommand cmd=new SqlCommand("select * from petType",con);
SqlDataReader sda=cmd.ExecuteReader();
this.GridView1.DataSource=sda;
this.GridView1.DataBind();
}
}
五.通过CSS样式表控制字体
<style type=text/css> table{font-size=12px} </style>
GridView属性面板中:
(1)取消"在运行时自动创建列":AutoGenerateColumns(False)
(2)添加"模板列"
(3)添加"超级链接列"(文本字段DataTextField:petTypeName URL字段DataNavigateUrlFields:petTypeID URL格式字符串DataNavigateUrlFormatString:showPetByTypeID.aspx?typeID={0} 目标:_blank
(4)GridView上右键"编辑模板":ItemTemplate(输入:*)
(5)进入main.aspx的"源"中,输入: ItemStyle-Width=10px ItemStyle-HorizontalAlign=Center
即:
<asp:GridView>
<Columns>
<asp:TemplateField ItemStyle-Width=10px ItemStyle-HorizontalAlign=Center>
<ItemTemplate>
*
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
(6)调整GridView所在的<TD>属性面板:valign:top
六.建立showPetByTypeID.aspx文件
(1)调整页面属性面板中,style中"位置模式"为:正常流中的位置
(2)插入表:3行1列 调整align:center border:0
第一行输入文字:类别名称 添加:Label控件
第二行插入:GridView
第三行插入:LinkButton(ID:btnShowBus text:察看购物车) align:center
注:
<style type=text/css>
table{font-size=12px}
</style>
七.进入showPetByTypeID.aspx.cs文件
using System.Data.SqlClient;
if(!this.IsPostBack)
{
string PetTypeID=Request.QueryString["typeID"].ToString();
SqlConnection con=DB.CreateCon();
con.Open();
SqlCommand cmd=new SqlCommand("select petTypeName from petType where petTypeID='"+PetTypeID+"'",con);
this.Label1.Text=Convert.ToString(cmd.ExecuteScalar());
cmd.CommandText="select * from pet where petTypeID='"+PetTypeID+"'";
SqlDataReader sdr=cmd.ExecuteReader();
this.GridView1.DataSource=sdr;
this.GridView1.DataBind();
}
八.在showPetByTypeID.aspx文件中
在GridView控件属性面板中,设置:
(1)取消"在运行时自动创建列":AutoGenerateColumns(False)
(2)选取"绑定列" 页眉文本:宠物照片 数据字段:petPhoto 数据格式设置表达式:
<img src='petPhoto/{0}' width=60 height=80>
注:在当前站点中,建立文件夹:petPhoto,将照片拷贝到其中.
(3)选取“绑定列”直接添加 页眉文本:宠物名称
数据字段:petName
(4)选取“绑定列”直接添加 页眉文本:售价
数据字段:petPrice 数据格式设置表达式: {0:c}
(5)选取“绑定列”直接添加 页眉文本:描述
数据字段:petRemark
(6)选取“绑定列”直接添加 文本:购买
命令名:AddToBus 按钮类型:LinkButton
(7)格式:宠物名称(宽度:100px) 售价(宽度:50px)
描述(宽度:250px) 购买(宽度:50px)
(8)在showPetByTypeID.aspx.cs文件Page_Load中配置sdr语句下,添加: this.GridView1.DataMember="petID";
(9) GridView控件事件:RowCommand 双击进入cs文件
if (e.CommandName == "AddToBus")
{
string petID = GridView1.DataKeys.ToString();
if (Session["bus"] == null)
{
//使用集合对象
System.Collections.Hashtable ht = new Hashtable();
ht.Add(petID, 1);
Session["bus"] = ht;
//Session.Add("but",ht);
}
else
{
System.Collections.Hashtable ht = (Hashtable)Session["bus"];
if (ht[petID] == null)
{
ht[petID] = 1;
}
else
{
ht[petID] = (int)ht[petID] + 1;
}
Session["bus"] = ht;
}
}
10)双击"查看购物车"LinkButton按钮,添加:
protected void btnShowBus_Click(object sender,EventArgs e)
{
Response.Redirect("showBus.aspx");
}
九.创建showBus.aspx文件,在其cs文件中:
private void Page_Load(object sender,System.EventArgs e)
{
if(!this.IsPostBack)
{
//HashTable是一个数据集合,可直接做为控件的数据源
this.DataList1.DataSource=(Hashtable)Session["bus"];
this.DataList.DataBind();
}
}
十.在showBus.aspx文件中,DataList控件上右键"编辑模板":
在"ItemTemplate"模板中添加:TextBox,
单击其右键菜单中的:
DataBindings “自定义绑定表达式”:
DataBinder.Eval(Container.DataItem,"value")
在showBus.aspx文件的"源"中修改DataList控件模板:
<ItemTemplate>
您选了
<asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"value") %>'>
</asp:Label>
商品
</ItemTemplate>