电子商务设计学生.ppt

-购货车与订单 模块,电子商务网站规划与实现,购货车与订单,传统观念中的商店除必须有商品以外，还需要有店房、门面和货架等。而网上商店主要依靠网络技术来完成商品展示、订购以及支付等项工作，网上商店既没有店房、门面也没有货架，因此网上商店常被称之为“虚拟”商店。 人们到超级商场去购买东西时，总得先将想买的商品从货架上取下来，放到购货车中，然后集中起来一起算账、付款。网上商店模拟这个购物过程，先让客户从不同的网页中选取商品，并将这些商品集中到“购货车”中一起算账，最后生成完整的订单。网上购货车不同于实际的购货车，它是一种虚拟结构，称为“虚拟购货车”。 “虚拟购货车”和“订单”是商品采购中的核心部分，创建虚拟购货车和订单是一门综合技术，可以采用多种方式。下面将要使用的技术包括：利用用户控件和主控页进行界面设计；实现数据表多表之间的同步；完成对数据表的显示、修改和统计。除此以外，还要动态生成内存中的数据表以及使用Session对象保存数据并在网页之间进行传递等。因此本章讲述的内容是前面多章内容的综合应用。,购货车与订单,概 述 设计用户控件及主控页 设 计 主 页 产品类型与产品目录之间同步 选 择 商 品 显示购货车 结 账 保 存 订 单 查 看 订 单 小 结,1 概 述,1 Northwind样板库简介 2 本系统的功能 3 主要数据表的结构及其他准备工作,1 Northwind样板库简介,SQL Server提供的Northwind样板库是一个虚拟的国外食品公司的数据库，我们将利用这个数据库(加以简化)来创建自己的购货车与订单。下面先对Northwind样板库做一个简单的介绍。 Northwind样板库包括十几张数据表，各表的关联以及数据表中各字段。 Northwind样板库的数据表包括以下4部分。 订单部分：包含订单表(Orders)、订单细目(Order Details)、订单发货(Shippers)。 产品部分：包括类型表(Categories)、产品表(Products)、产品提供者(Suppliers)。 雇员信息部分：包括有关雇员(Employees)的4张表。 顾客信息：包括顾客表(Customers)等。 本设计将集中与订单相关的部分，除此以外还需要在数据库中自行建立一个简化的订单表，订单表的结构将在下面讲述。,1 Northwind样板库简介,图 Northwind样板库中数据表的结构及相互关系,2 本系统的功能,2 本系统的功能,2 本系统的功能,理解系统的关键是搞清GridView、内存数据表与Session对象三者之间的关系。系统的执行过程是：进入“主界面”(主页面这里没有画)，显示商品分类，以及欢迎界面；在分类数据表(Categories)中任选一种数据类型，同步打开“产品.aspx”网页，用GridView控件分类显示Products数据表中相应的商品；单击想要购买的商品，将该商品的数据取出来，放到下面的动态数据表中(数据表用虚线画的长方形表示)，然后再将数据表放入“购货车”中，这里的购货车用Session“ShoppingCart“表示；打开“购货车.aspx”网页，控件GridView以Session“ShoppingCart“作为数据源显示数据，并在新网页中确定购买的数量，并输入“客户标志”；与此同时生成新的内存数据表，并将新数据表存入新的Session“ShoppingCart2“中；打开“结账.aspx”网页，以新Session对象作为数据源在GridView控件中显示数据，同时通过Session“khbj“将客户标志传入到网页中；在“结账”网页中完成计算总价的工作，最后存入订单；在“查看订单.aspx”网页中以客户标志作为查询条件显示订单，以便只显示客户本人的订单部分。 在上述各个阶段中，都允许客户对数据进行选择和修改。除开始阶段和最后阶段需要直接存取数据库以外，其他部分均采用内存动态数据表来组织数据，这样做可以提高系统的运行效率。 客户标志是识别客户的惟一标志，平时存放在客户登录表中，包括有联系地址、联系方法等。具体项目由网络商店事先确定。,3 主要数据表的结构及其他准备工作,3 主要数据表的结构及其他准备工作,3 主要数据表的结构及其他准备工作,2 设计用户控件及主控页,为了使得系统具有很好的可重用性和可维护性，应该尽可能使用用户控件(User Control) 以便发挥代码重用的优势以减少重复劳动，并且使得各个网页的显示风格一致。 1. 创建用户控件 商店的商标，网页之间链接的图标以及查询部分是大多数网页都需要显示的部分，可以先将其建成用户控件。例如，这里我们将商店商标、几个网站浏览的控件(hyperLink)以及查询界面等分别做成用户控件。用户控件中的代码可以以后再补充上去。 2. 创建主控页 先创建主控页然后再创建模板中的网页比较方便。主控页的布局如图所示。 主控页的上方放的是用户控件，左下方放的是GridView控件，该控件与类型表(Categories)进行数据绑定，右下方是给各网页留下的空间。,2 设计用户控件及主控页,主控页的布局,3 设 计 主 页,主页是客户访问的第一个页面，可以给客户提供第一印象。它的主要任务是吸引客户并引导客户进入选购界面。一个好的主页应该生动、清晰，能够激发出客户购买的兴趣。 在主控页中生成一个主页，设计欢迎界面，其简要情况如图 所示。 在主控页中分别再生成其他网页。例如“商品.aspx”、“购货车.aspx”、“结账.aspx”、“订单.aspx”等。这些网页的内容可以以后再补充。在用户控件中将链接指针分别与各个网页链接。,3 设 计 主 页,欢迎界面,4 产品类型与产品目录,5 选 择 商 品,5.1 选择按钮触发的事件 5.2 如何取出数据 5.3 如何创建数据表,5 选 择 商 品,为了选择商品，在产品表中的栏目(Column)中增加一按钮(Button)，并且在它的CommdName属性中取名为“select”(也可以取其他名字)。当单击该按钮时，将该产品的副本取出来动态生成数据表，利用这个动态数据表来生成“购货车”。 为了生成这个数据表，需要解决以下三个问题： 单击按钮时将触发什么事件； 如何提取GridView控件中的数据； 如何创建动态数据表并将取出的数据放入其中。,5.1 选择按钮触发的事件,GridView 控件中的RowCommand事件，是GridView控件内任一按钮都将触发的事件。因此在使用这个事件时，先要判断当前点击的是哪个按钮。判断的方法是根据按钮的命令名，语句如下： If (e.CommandName=“按钮命令名“) ,5.2 如何取出数据,根据鼠标点击的“行”以及在GridView中的“列”，可以取出相应的数据。确定点击行的语句是： int index = Convert.ToInt32(e.CommandArgument); GridViewRow row = GridView1.Rowsindex; 取出某列的语句是： string bhText = row.Cells1.Text; string mcText = row.Cells2.Text; 上述语句提取出鼠标点击的行中第2列和第3列中的数据(列的序号从0开始)。,5.3 如何创建数据表,先根据类库中的类生成数据表对象，然后定义数据表的结构，定义数据表各列的数据类型及标题。语句如下： System.Data.DataTable Cart = new System.Data.DataTable();/ 定义数据表对象 if (e.CommandName = “select“) if (Session“ShoppingCart“ = null) Cart.Columns.Add(“商品编号“, typeof(int); / 确定各列的标题及类型 Cart.Columns.Add(“商品名称“, typeof(string); Cart.Columns.Add(“单元含量“, typeof(string); Cart.Columns.Add(“单价“, typeof(double); Session“ShoppingCart“ = Cart; / 再取出各列的数据，同时进行类型转换 Cart = (System.Data.DataTable)Session“ShoppingCart“; int index = Convert.ToInt32(e.CommandArgument); GridViewRow row = GridView1.Rowsindex; string bhText = row.Cells1.Text; string mcText = row.Cells2.Text; string dyText = row.Cells4.Text; string djText = row.Cells5.Text; int bh = int.Parse(bhText); double dj = double.Parse(djText); / 然后增加数据行，并将数据填入该行的各列之中。 System.Data.DataRow rr = Cart.NewRow(); rr“商品编号“=bh; rr“商品名称“ = mcText; rr“单元含量“ = dyText; rr“单价“ = dj; Cart.Rows.Add(rr); / 将新行加入数据表中 Session“ShoppingCart“ = Cart; ,5.3 如何创建数据表,由于默认情况下，网页之间不保持状态，当你选择多行时，购货车中只会保留最后一项选择。为了能够在购货车中保留多项选择，需要利用Session 对象来保持状态。下列语句的作用就是通过Session来保持状态。 if(Session“ShoppingCart“=null) Cart = new DataTable(); Session“ShoppingCart“=Cart; Cart = (System.Data.DataTable)Session“ShoppingCart“; 综合以上所述，创建内存数据表的完整代码如下： void GridView1_RowCommand(object sender, GridViewCommandEventArgs e) System.Data.DataTable Cart = new System.Data.DataTable(); / 生成内存数据表对象 if (e.CommandName = “select“) if (Session“ShoppingCart“ = null) / 定义数据表结构 Cart.Columns.Add(“商品编号“, typeof(int);,5.3 如何创建数据表,Cart.Columns.Add(“商品名称“, typeof(string); Cart.Columns.Add(“单元含量“, typeof(string); Cart.Columns.Add(“单价“, typeof(double); Session“ShoppingCart“ = Cart; Cart = (System.Data.DataTable)Session“ShoppingCart“; int index=Convert.ToInt32(e.CommandArgument); / 确定点击的行 GridViewRow row = GridView1.Rowsindex; string bhText = row.Cells1.Text; / 取出列中的数据 string mcText = row.Cells2.Text; string dyText = row.Cells4.Text; string djText = row.Cells5.Text; int bh = int.Parse(bhText); / 数据的类型转换 double dj = double.Parse(djText); System.Data.DataRow rr = Cart.NewRow(); rr“商品编号“=bh; / 将取出的数据放入数据表中 rr“商品名称“ = mcText; rr“单元含量“ = dyText; rr“单价“ = dj; Cart.Rows.Add(rr); / 将新行加入数据表中 Session“ShoppingCart“ = Cart; / 将数据表放入Session中 ,6 显示购货车,6.1 输入客户标志 6.2 在GridView中增加按钮 6.3 增加模板列 6.4 在窗体页的Page_Load事件中增加条件 6.5 在GridView的RowCommand事件中编写代码,6 显示购货车,在购货车的显示页面中，将Session“ShoppingCart“作为数据源显示在GridView中，语句如下： private void Page_Load(object sender, System.EventArgs e) GridView1.DataSource= Session“ShoppingCart“; DataBind(); 购货车在这里就是放在Session对象中的数据表。用Session对象保存购货车是最恰当的方式。因为每个客户都有属于自己的Session对象，即使多个客户同时进行网上购买时，他们的数据也不会混杂。另外Session对象是一种临时性的容器，非常符合购货车的特点。 首先在数据库中创建“订单表”。结账窗体界面中的表的结构最好与数据库中的“订单表”一致。和购货车相比，数据表中增加了几个字段(如订购数量、合计等)，因此应该重新组织数据表，并使用另一个Session对象(这里使用ShoppingCart2)。 为了完善购货车中的数据以便转入结账界面，在购货车的窗体中还需要执行以下5方面的工作。 (1) 在窗体页中用一TextBox控件以输入用户标志。 (2) 在GridView控件中增加一个按钮(Button)，将其CommandName属性设成“select”。 (3) 在GridView控件中增加一模板列，放入TextBox控件，以便输入购买数量。 (4) 在窗体页的Page_Load事件中加上条件：if(!IsPostBack) 。 (5) 在GridView的RowCommand事件中编写代码(代码在下一节中讲述)。 购货车窗体的界面如图所示。,6 显示购货车,购货车的窗体界面,6.1 输入客户标志,客户标志必须具有惟一性和可靠性，根据该标志能够与客户联系，确定发货的方法和地址，为此须增加输入客户标志的TextBox控件，以及相应的RequiredFieldValidator校验控件，以防止输入中的遗漏。,6.2 在GridView中增加按钮,通过GridView的Columns属性中增加一按钮，并为它的CommandName属性命名(例如命名为“buy”)，以便确认选择项。,6.3 增加模板列,在GridView控件中增加一个模板列，将TextBox1控件放入ItemTemplate模板中，以便输入购买数量。先将其默认值设为1。,6.4 在窗体页的Page_Load事件中增加条件,为了进行结账的计算，须在Page_Load事件中增加以下条件： private void Page_Load(object sender, System.EventArgs e) if(!IsPostBack) GridView1.DataSource= Session“ShoppingCart“; DataBind(); IsPostBack属性是为了区分网页是第一次被打开，还是后续打开(事件处理后的返回)。当网页为后续打开时，该属性为true，否则为false。 if(!IsPostBack) / 执行语句 以上代码表明只有网页第一次(不是后续)打开时才执行大括号中的语句。,6.5 在GridView的RowCommand事件中编写代码,void GridView1_RowCommand(object sender, GridViewCommandEventArgs e) System.Data.DataTable Cart = new System.Data.DataTable();/生成数据表 if (e.CommandName = “buy“) if (Session“ShoppingCart2“ = null) Cart.Columns.Add(“商品编号“, typeof(int); /建立数据表结构 Cart.Columns.Add(“商品名称“, typeof(string); Cart.Columns.Add(“单元含量“, typeof(string); Cart.Columns.Add(“单价“, typeof(double); Cart.Columns.Add(“订购数量“, typeof(int); Cart.Columns.Add(“折扣“, typeof(double); Cart.Columns.Add(“合计“, typeof(double); Session“ShoppingCart2“ = Cart; Cart = (System.Data.DataTable)Session“ShoppingCart2“; if (TextBox2.Text = “) / 输入客户标志 Validate(); / 调用校验控件进行校验 else ,6.5 在GridView的RowCommand事件中编写代码,Session“khbj“ = TextBox2.Text; int index = Convert.ToInt32(e.CommandArgument); GridViewRow row = GridView1.Rowsindex; TextBox tt = (System.Web.UI.WebControls.TextBox)row.Cells1.FindControl(“TextBox1“); string dgl = tt.Text; int dg = int.Parse(dgl); if (dg = 1) dg = 1; / 若购货量小于1时，定为1 string bhText = row.Cells2.Text; string mcText = row.Cells3.Text; string dyText = row.Cells4.Text; string djText = row.Cells5.Text; int bh = int.Parse(bhText); double dj = double.Parse(djText); System.Data.DataRow rr = Cart.NewRow(); rr“商品编号“=bh; rr“商品名称“ = mcText; rr“单元含量“ = dyText; rr“单价“ = dj; rr“订购数量“ = dg; int zk = 1; rr“折扣“ = zk; double hj = dj * dg * zk; / 合计使用三者的乘积 rr“合计“ = hj; Cart.Rows.Add(rr); Session“ShoppingCart2“ = Cart; ,7 结 账,7.1 结账网页的数据显示 7.2 在GridView控件中增加复选框 7.3 汇总的计算,7.1 结账网页的数据显示,在结账网页中的GridView控件应该以Session“ShoppingCart2“作为数据源显示数据，其语句如下： private void Page_Load(object sender, System.EventArgs e) GridView1.DataSource= Session“ShoppingCart2“; DataBind(); ,7.2 在GridView控件中增加复选框,为了允许客户在结账时有机会对自己的选择做进一步调整，可以在结账界面的每条记录前面增加一复选框。默认情况下这些复选框都被选中，如果想撤销该项选择时，只须取消该复选框的选择即可，订单表中将不会存入被取消的选项。 为了增加复选框，需要在GridView中通过Column属性增添一“模板”字段，并且在模板中增添复选框控件。模板的设置代码如下： 结账的界面如图所示。 在这个界面中，客户标志和表格中的数据均从上一个网页传来。在结账界面主要完成汇总计算以及将订单表存入数据库的操作。,7.2 在GridView控件中增加复选框,结账的界面,7.3 汇总的计算,当单击【汇总】按钮时，显示框中将显示总和。如果改变了复选框的选择，汇总的结果也应该跟随着改变。为了进行汇总计算，需设置循环语句，逐条检查复选框的选择状态，只有该复选框被选中时，才将该记录的数据计入汇总中。此处需要用到的类和方法 如下。 GridView1.Rowsii用来表示 GridView 控件中的某一行。 FindControl(“控件的id“)方法：用来在当前的命名容器中搜索带指定 id 参数的服务器控件。 汇总按钮的代码如下： void Button2_Click(object sender, EventArgs e) double sum=0.0; for(int ii=0; ii GridView1.Rows.Count;ii+) CheckBox cc = (CheckBox)GridView1.Rowsii.Cells0.FindControl(“CheckBox1“); if(cc.Checked) / 若复选框被选中 sum = sum + (double.Parse(GridView1.Rowsii.Cells7.Text); TextBox2.Text=sum.ToString(); / 显示汇总结果 为实现复选框的功能，在Page_Load事件中需要做一些改变。代码如下： void Page_Load(object sender, EventArgs e) if (!IsPostBack) TextBox1.Text = Session“khbz“.ToString(); GridView1.DataSource = Session“ShoppingCart2“; GridView1.DataBind(); ,8 保 存 订 单,如果客户对结果感到满意时，可单击【存入数据库】按钮，将订单存入数据库的“订单表” 中。存入时使用存储过程，为此需要先建立订单表，表的结构如前面所示，另外还需要在数据库端创建存储过程，这里需要创建一个增加新记录的存储过程。使用的语句如下： INSERT INTO dbo.订单表(客户ID, 产品ID, 产品名称, 单位数量, 单价, 订购量, 订购时间) VALUES (客户ID, 产品ID, 产品名称, 单位数量, 单价, 订购量, 订购时间); 在数据库端设置的存储过程如图 所示。 为了调用存储过程，从【工具箱】中拖入一SqlDataSource控件并与存储过程连接。连接过程中最大的不同点是对待定参数赋值的方式。这些待定参数的值不是从固定的控件中读取，而是通过循环语句从GridView控件(代表内存中的订单)的字段中获得。 待定参数的赋值过程是：开始对GridView控件逐条记录进行循环；在循环语句中首先取出复选框的状态，判断复选框是否被选中；如果被选中，先清除原有参数，然后给各参数赋值；最后调用存储过程以存入订单。具体的代码如下： void Button1_Click(object sender, EventArgs e) for (int ii=0; iiGridView1.Rows.Count; ii+) / 循环语句,8 保 存 订 单,存入订单的存储过程,8 保 存 订 单, / 先判断复选框是否被选择 CheckBox cc=(CheckBox)GridView1.Rowsii.Cells0.FindControl(“CheckBox1“); if (cc.Checked) / 如果被选中则取出数据存入数据表中 Sq