图书信息浏览和购物车模块设计.ppt

第9-10章 图书信息浏览和购物车模块设计,杨叶芬,本章学习导航,本章任务,网上书店主页,用户自定义控件,本章任务,网上书店图书详细信息页,本章任务,添加标题文字,添加标题文字,网上书店购物车页面,本章学习要点,用户自定义控件 HyperLink控件 DataList控件 Repeater控件,任务1 添加自定义控件修改前台页面,在页面上应用自定义控件修改前台母版页,任务目标,用户登录自定义控件、版权信息自定义控件、导航栏自定义控件,知识要点,用户控件,用户控件可以实现页面代码的重用,搜狐首页,搜狐新闻页,用户控件,用户控件 是一种自定义的组合控件 封装独立的功能（显示列表等） 像页面一样方便的编辑，像控件一样使用拖拽方式使用 后缀名为.ascx 作用 页面代码的重用,母版页提供整个页面级的风格控制和代码重用； 用户控件提供小范围的风格控制和更灵活的代码重用,创建用户控件,将用户登录的部分放入用户控件 新建用户控件 在用户控件上放置相关的Web控件 编写用户控件的后台代码 在其他页面使用用户控件,演示示例1：登录的用户控件,创建用户控件,Control指令 后台代码,类似于Page指令,public partial class _Controls_UserLoginControl : System.Web.UI.UserControl protected void Page_Load(object sender, EventArgs e) . . ,也有Page_Load事件,使用用户控件,页面中注册和使用 TagPrefix属性定义了用户控件所使用的前缀 TagName定义了用户控件的名称 Src定义要包括在Web窗体页中的用户控件文件的虚拟路径, ,在页面中注册控件,将用户控件放入页面指定位置即可,注意事项,用户控件中可以使用其他用户控件 可以像页面一样，在用户控件中使用其他用户控件 但用户控件中不可包含自己，也不能发生任何循环嵌套,用户控件1,用户控件2,用户控件1,用户控件与Page,用户控件与页面的区别？ 后缀名：用户控件以.ascx为后缀名，而页面后缀名是.aspx 指令：用户控件为Control，页面是Page 继承：用户控件继承自System.Web.UI.UserControl，而页面继承自System.Web.UI.Page 用户控件不可直接访问，页面可直接访问,页面：容器； 用户控件：内容。,小结,可否在用户控件中访问外部页面的控件？为什么？ 用户控件编码使用哪个标记？ 用户控件和母版页分别在哪种情况下使用？,HyperLink控件,HTML提供链接的标签是什么？ . 缺点：改变链接困难 提供超链接的服务器控件 HyperLink控件用来在页上创建一个可以切换到其他页或位置的链接。 可通过设置NavigateUrl方便的改变链接路径 可使用ImageUrl设置为图片形式的链接,演示示例2： HyperLink控件的使用,练习实现导航栏自定义控件,训练要点： 创建用户自定义控件link_usercontrol.ascx HyperLink控件的使用 应用用户自定义控件link_usercontrol.ascx 需求说明：,课堂实践1,利用HyperLink控件设计导航栏，并修改前台母版页，添加自定义控件版权信息、导航栏。 提示：,任务2,修改前台母版页，添加自定义控件用户登录,任务1,任务2 图书信息展示,实现图书信息展示功能,任务目标,利用DataList控件实现显示图书信息、购物车功能。,知识要点,任务2 图书信息展示,DataList控件,添加标题文字,添加标题文字,DataList控件是Web服务器控件中的一个基本容器控件，用来以自定义格式显示Web页中任何数据源的数据。 这种格式可以使用模板和样式来定义，如果在定义模板时使用了按钮等交互控件，则可以在显示数据的同时控制对数据源的操作功能(如查询、修改、添加、删除)，这样构成了一个能够对数据源进行交互操作的界面。,任务2 图书信息展示,图书展示,添加标题文字,添加标题文字,任务2 图书信息展示,购物车,添加标题文字,添加标题文字,当当网的图书列表页,如何实现当当图书列表网页？,多行单列,标题,封面图片,作者,图书简介,定价,页面的呈现2-1,使用GridView控件展示数据,使用DataList或Repeater控件展示数据,DataList控件,以某种格式显示数据 格式可以使用模板和样式进行定义 可用于任何重复结构中的数据，如表 控件使用 HTML 中的相关的元素在列表中呈现项,在当当网图书列表页中，显示项就是多行单列的div,数据绑定,步骤 将DataList控件拖入页面 编辑模板列 通过右键 “编辑模板” 与GridView相比 增加 选定项模板（SelectedItemTemplate） 分隔符模板（SeparatorTemplate） 减少 InsertItemTemplate,DataList模板,“网上书店”商品展示页4-1,如何实现商品展示的页面效果？,每行显示的内容样式相同，只是数据不同,每行布局用 一个3行2列实现,“网上书店”商品展示页4-2,使用DataList 首先，将显示项分解出来 模板页面 内容页面 （循环显示） 项模板 （Table） 找到需要替换的部分，直接替换为绑定语句 编写页面，添加DataList，并在项模板中粘贴替换过的项模板 绑定数据源,容易忽略的地方：图片的alt属性,“网上书店”商品展示页4-3, “ style=“width: 96px; height: 108px“ alt= / ,页面代码1-1,浏览器中查看源文件，发现以HTML的方式呈现数据,数据项模板中绑定相应的数据,DataList控件是Web服务器控件中的一个基本容器控件， DataList是通过Item属性来获取某一项信息， 而GridView是通过Row属性来获取某一行信息。,“网上书店”商品展示页4-3, ,页面代码1-2,“网上书店”商品展示页4-4,string sqlstr; DB db = new DB(); DataSet ds = new DataSet(); protected void Page_Load(object sender, EventArgs e) if (Page.IsPostBack = false) sqlstr = “select * from 图书表“; ds = db.GetDataTableBySql(sqlstr); if (ds.Tables0.Rows.Count != 0) this.DataList1.DataSource = ds.Tables0.DefaultView; this.DataList1.DataBind(); ,后置代码,DataList重要属性,RepeatColumns与RepeatDirection2-1,如何实现下图中的商品排列的效果？,方法一：将DataList看成是单行，每行显示两列,RepeatColumns与RepeatDirection2-2,如何实现一列中显示两行的效果？,方法二：将DataList看成是单列，每列显示两行,RepeatColumns与RepeatDirection2-3,示例：一条记录分多行显示,将一条记录的多个字段分多行显示。,DataList-前台源视图的HTML代码, style=“width: 122px; height: 116px“ / . ,DataList-显示图书信息的后台代码, string sqlstr; DB db = new DB(); DataSet ds = new DataSet(); protected void Page_Load(object sender, EventArgs e) if (Page.IsPostBack = false) sqlstr = “select * from 图书表“; ds = db.GetDataTableBySql(sqlstr); if (ds.Tables0.Rows.Count != 0) this.DataList1.DataSource = ds.Tables0.DefaultView; this.DataList1.DataBind(); ,DataKeyField与DataKeys,通过DataKeys属性获取由DataKeyField属性设置的主键字段值,如何在每项商品信息后添加一个“删除”按钮 ？,删除按钮,DataList重要事件,指导实现“网上书店”购物车2-1,训练要点： 数据绑定 DataList控件的使用,DataList-前台源视图的HTML代码, 图书编号 图书名称 价格 数量 修改数量 删除 ,DataList-前台源视图的HTML代码, Width=“35px“ ,DataList-显示购物车的后台代码,if (Session“user“ != null) if (Session“book“ != null) sqlstr = “select * from 购物车表 where 会员名=“ + Session“user“ + “ and 图书编号=“ + Session“book“ + “; Ds = db.GetDataTableBySql(sqlstr); try if (Ds.Tables0.Rows.Count != 0) Response.Write(“alert(您已经购买了此产品，只要更改数量就行！)“); else sqlstr = “insert into 购物车表(会员名,图书编号,数量)values(“ + Session“user“ + “,“ + Session“book“ + “,1)“; Boolean insert_result; insert_result = db.UpdateDataBySql(sqlstr); catch (Exception) Response.Write(“alert(没有得到任何数据，请重试！)“); DataListBind(); /total_money(); else Response.Write(“alert(请登录！);document.location=Default.aspx;“); ,DataList-显示购物车的后台代码,/绑定数据方法 public void DataListBind() SqlStr = “select * from 购物车视图 where 会员名=“ + Session“Username“ + “; Ds = db.GetDataTableBySql(SqlStr); try this.DataList1.DataSource = Ds.Tables0.DefaultView; this.DataList1.DataBind(); catch (Exception) Response.Write(“alert(没有得到数据,请重试！)“); ,指导实现“网上书店”购物车2-3,实现思路： 编写Page_Load事件过程的代码 编写数据绑定方法的代码 编写计算总金额方法的代码,DataList-计算总金额的后台代码,public void total_money() sqlstr = “select * from 购物车视图 where 会员名=“ + Session“user“ + “; ds = db.GetDataTableBySql(sqlstr); if (ds.Tables0.Rows.Count != 0) double sum=0; for (int i = 0; i ds.Tables0.Rows.Count; i+) double price = double.Parse(ds.Tables0.Rowsi“价格“.ToString(); int count = int.Parse(ds.Tables0.Rowsi“数量“.ToString(); sum =sum + price * count; this.TextBox2.Text = sum.ToString(); ,指导实现“网上书店”购物车2-2,需求说明： 1.更新购物车数据 将【修改数量】按钮的“CommandName”属性为“Update”即触发修改事件，所以要编写DataList控件的“DataList1_UpdateCommand”事件 2.删除购物车数据 【删除】按钮功能就要编写DataList控件的DeleteCommand(删除命令)事件，此事件用来删除购物车中的一条记录 3.清空购物车数据 【清空购物车】按钮的功能即为删除购物车中所有记录,DataKeyField与DataKeys,实现步骤 将DataList控件的DataKeyField属性设置成图书编号 在“修改”或“删除”按钮引发的UpdateCommand或DeleteCommand事件 通过DataKeys属性获取到主键值，执行修改或删除操作, ,页面代码,将DataKeyField设置成图书编号,DataList-修改购物车数据的后台代码,protected void DataList1_UpdateCommand(object source, DataListCommandEventArgs e) String book_id = this.DataList1.DataKeyse.Item.ItemIndex.ToString(); TextBox count = (TextBox)this.DataList1.Itemse.Item.ItemIndex.FindControl(“count“); SqlStr = “update 购物车表 set 数量=“ + count.Text + “ where 图书编号=“ + book_id + “ and 会员名=“ + Session“Username“ + “; Boolean Update_Result; Update_Result = db.UpdateDataBySql(SqlStr); if (Update_Result = true) Response.Write(“alert(数量修改成功！)“); DataListBind();/绑定数据 total_money();/计算价格 else Response.Write(“alert(记录修改失败，请检查！)“); DataListBind(); ,获取图书编号,DataList-删除购物车数据的后台代码,protected void DataList1_DeleteCommand(object source, DataListCommandEventArgs e) String book_id = this.DataList1.DataKeyse.Item.ItemIndex.ToString(); SqlStr = “delete from 购物车表 where 图书编号=“ + book_id + “; Boolean Del_Result; Del_Result = db.UpdateDataBySql(SqlStr); if (Del_Result = true) Response.Write(“alert(记录删除成功！)“); DataListBind();/绑定数据 total_money();/计算价格 else Response.Write(“alert(记录删除失败，请检查！)“); DataListBind(); ,获取图书编号,课堂实践2,添加图书列表页面BookList.aspx，利用DataList控件实现“网上书店”商品展示。,任务4,在Default.aspx主页中，利用DataList控件将一条记录分多行显示的功能，完成书P221页如图9-18所示的页面。,任务3,添加购物车“shop_car.aspx”页面，设计shop_car.aspx页面，实现购物车功能，并完成shop_car.aspx页面上的【修改数量】、 【删除】、 【清空购物车】按钮功能。,任务5,任务3 图书详细信息展示,实现图书详细信息展示功能,任务目标,利用Repeater控件显示图书详细信息,知识要点,任务3 图书详细信息展示,Repeater控件,添加标题文字,添加标题文字,Repeater控件和DataList控件类似，也是Web服务器控件中的一个基本容器控件，它可用来显示页面中任何数据源的数据。该控件没有预先定义好的固有显示外观和布局，只有可用于自定义显示格式的可编辑模板。,Repeater控件,是一个容器控件 可以从页的任何可用数据中创建出自定义列表 可创建任何有循环属性的列表：表、XML等 效率很高 不会自动生成任何HTML代码 不具备内置的呈现功能，需要手写布局 与DataList相比，没有编辑和选择模板 不支持图形化编辑,任务3 图书详细信息展示,图书详细信息展示,添加标题文字,添加标题文字,使用Repeater控件显示图书详细信息,Repeater-前台源视图的HTML代码1, style=“width: 112px; height: 132px“ / 作者： 接后页,Repeater-前台源视图的HTML代码2, 价格： 印张： 字数： 版次： ,Repeater-显示图书详细信息的后台代码,protected void Page_Load(object sender, EventArgs e) if (Page.IsPostBack = false) bookid = Request.QueryString“bookid“; / bookid = Request.QueryString.Get(0).ToString().Trim(); sqlstr = “select * from 图书表 where 图书编号=“ + bookid; ds = db.GetDataTableBySql(sqlstr); if (ds.Tables0.Rows.Count != 0) this.Repeater1.DataSource = ds.Tables0.DefaultView; this.Repeater1.DataBind(); Session“bookid“ = bookid; ,课堂实践3,利用Repeater控件显示图书详细信息页bookDetail.aspx。,任务6,本章小结,本章学习内容,本章主要学习了如下内容： HyperLink控件：用来在页上创建一个可以切换到其他页或位置的链接； DataList控件：是Web服务器控件中的一个基本容器控件，用来以自定义格式显示Web页中任何数据源的数据； Repeater控件