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

《图书信息浏览和购物车模块设计.ppt》由会员分享，可在线阅读，更多相关《图书信息浏览和购物车模块设计.ppt（67页珍藏版）》请在三一办公上搜索。

1、第9-10章 图书信息浏览和购物车模块设计,杨叶芬,本章学习导航,本章任务,网上书店主页,用户自定义控件,本章任务,网上书店图书详细信息页,本章任务,添加标题文字,添加标题文字,网上书店购物车页面,本章学习要点,用户自定义控件HyperLink控件DataList控件Repeater控件,任务1添加自定义控件修改前台页面,在页面上应用自定义控件修改前台母版页,任务目标,用户登录自定义控件、版权信息自定义控件、导航栏自定义控件,知识要点,用户控件,用户控件可以实现页面代码的重用,搜狐首页,搜狐新闻页,用户控件,用户控件是一种自定义的组合控件封装独立的功能（显示列表等）像页面一样方便的编辑，像控件

2、一样使用拖拽方式使用后缀名为.ascx作用页面代码的重用,母版页提供整个页面级的风格控制和代码重用；用户控件提供小范围的风格控制和更灵活的代码重用,创建用户控件,将用户登录的部分放入用户控件新建用户控件在用户控件上放置相关的Web控件编写用户控件的后台代码在其他页面使用用户控件,演示示例1：登录的用户控件,创建用户控件,Control指令后台代码,类似于Page指令,protected void Page_Load(object sender,EventArgs e).,也有Page_Load事件,使用用户控件,页面中注册和使用TagPrefix属性定义了用户控件所使用的前缀TagName定义

3、了用户控件的名称Src定义要包括在Web窗体页中的用户控件文件的虚拟路径,在页面中注册控件,将用户控件放入页面指定位置即可,注意事项,用户控件中可以使用其他用户控件可以像页面一样，在用户控件中使用其他用户控件但用户控件中不可包含自己，也不能发生任何循环嵌套,用户控件1,用户控件2,用户控件1,用户控件与Page,用户控件与页面的区别？后缀名：用户控件以.ascx为后缀名，而页面后缀名是.aspx指令：用户控件为Control，页面是Page继承：用户控件继承自，而页面继承自用户控件不可直接访问，页面可直接访问,页面：容器；用户控件：内容。,小结,可否在用户控件中访问外部页面的控件？为什么？用户

4、控件编码使用哪个标记？用户控件和母版页分别在哪种情况下使用？,HyperLink控件,HTML提供链接的标签是什么？.缺点：改变链接困难提供超链接的服务器控件HyperLink控件用来在页上创建一个可以切换到其他页或位置的链接。可通过设置NavigateUrl方便的改变链接路径可使用ImageUrl设置为图片形式的链接,演示示例2：HyperLink控件的使用,练习实现导航栏自定义控件,训练要点：创建用户自定义控件link_usercontrol.ascxHyperLink控件的使用应用用户自定义控件link_usercontrol.ascx需求说明：,课堂实践1,利用HyperLink控件设

5、计导航栏，并修改前台母版页，添加自定义控件版权信息、导航栏。提示：,任务2,修改前台母版页，添加自定义控件用户登录,任务1,任务2图书信息展示,实现图书信息展示功能,任务目标,利用DataList控件实现显示图书信息、购物车功能。,知识要点,任务2图书信息展示,DataList控件,添加标题文字,添加标题文字,DataList控件是Web服务器控件中的一个基本容器控件，用来以自定义格式显示Web页中任何数据源的数据。这种格式可以使用模板和样式来定义，如果在定义模板时使用了按钮等交互控件，则可以在显示数据的同时控制对数据源的操作功能(如查询、修改、添加、删除)，这样构成了一个能够对数据源进行交互

6、操作的界面。,任务2图书信息展示,图书展示,添加标题文字,添加标题文字,任务2图书信息展示,购物车,添加标题文字,添加标题文字,当当网的图书列表页,如何实现当当图书列表网页？,多行单列,标题,封面图片,作者,图书简介,定价,页面的呈现2-1,使用GridView控件展示数据,使用DataList或Repeater控件展示数据,DataList控件,以某种格式显示数据格式可以使用模板和样式进行定义可用于任何重复结构中的数据，如表控件使用 HTML 中的相关的元素在列表中呈现项,在当当网图书列表页中，显示项就是多行单列的div,数据绑定,步骤将DataList控件拖入页面 编辑模板列 通过右键“编

7、辑模板”与GridView相比增加选定项模板（SelectedItemTemplate）分隔符模板（SeparatorTemplate）减少InsertItemTemplate,DataList模板,“网上书店”商品展示页4-1,如何实现商品展示的页面效果？,每行显示的内容样式相同，只是数据不同,每行布局用一个3行2列实现,“网上书店”商品展示页4-2,使用DataList首先，将显示项分解出来模板页面 内容页面（循环显示）项模板（Table）找到需要替换的部分，直接替换为绑定语句编写页面，添加DataList，并在项模板中粘贴替换过的项模板绑定数据源,容易忽略的地方：图片的alt属性,“网上

8、书店”商品展示页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(objec

9、t 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看成是单行，每行显示两列,R

10、epeatColumns与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 s

11、ender,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重要事

12、件,指导实现“网上书店”购物车2-1,训练要点：数据绑定DataList控件的使用,DataList-前台源视图的HTML代码,图书编号 图书名称 价格 数量 修改数量 删除,DataList-前台源视图的HTML代码,Width=35px,DataList-显示购物车的后台代码,if(Sessionuser!=null)if(Sessionbook!=null)sqlstr=select*from 购物车表 where 会员名=+Sessionuser+and 图书编号=+Sessionbook+;Ds=db.GetDataTableBySql(sqlstr);try if(Ds.Table

13、s0.Rows.Count!=0)Response.Write(alert(您已经购买了此产品，只要更改数量就行！);else sqlstr=insert into 购物车表(会员名,图书编号,数量)values(+Sessionuser+,+Sessionbook+,1);Boolean insert_result;insert_result=db.UpdateDataBySql(sqlstr);catch(Exception)Response.Write(alert(没有得到任何数据，请重试！);DataListBind();/total_money();else Response.Wri

14、te(alert(请登录！);document.location=Default.aspx;);,DataList-显示购物车的后台代码,/绑定数据方法 public void DataListBind()SqlStr=select*from 购物车视图 where 会员名=+SessionUsername+;Ds=db.GetDataTableBySql(SqlStr);try this.DataList1.DataSource=Ds.Tables0.DefaultView;this.DataList1.DataBind();catch(Exception)Response.Write(al

15、ert(没有得到数据,请重试！);,指导实现“网上书店”购物车2-3,实现思路：编写Page_Load事件过程的代码编写数据绑定方法的代码编写计算总金额方法的代码,DataList-计算总金额的后台代码,public void total_money()sqlstr=select*from 购物车视图 where 会员名=+Sessionuser+;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

16、=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控件的D

17、eleteCommand(删除命令)事件，此事件用来删除购物车中的一条记录3.清空购物车数据【清空购物车】按钮的功能即为删除购物车中所有记录,DataKeyField与DataKeys,实现步骤将DataList控件的DataKeyField属性设置成图书编号在“修改”或“删除”按钮引发的UpdateCommand或DeleteCommand事件通过DataKeys属性获取到主键值，执行修改或删除操作,页面代码,将DataKeyField设置成图书编号,DataList-修改购物车数据的后台代码,protected void DataList1_UpdateCommand(object sou

18、rce,DataListCommandEventArgs e)String book_id=this.DataList1.DataKeys.ToString();TextBox count=(TextBox)this.DataList1.Itemse.Item.ItemIndex.FindControl(count);SqlStr=update 购物车表 set 数量=+count.Text+where 图书编号=+book_id+and 会员名=+SessionUsername+;Boolean Update_Result;Update_Result=db.UpdateDataBySql(S

19、qlStr);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.DataKe

20、ys.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，利用Da

21、taList控件实现“网上书店”商品展示。,任务4,在Default.aspx主页中，利用DataList控件将一条记录分多行显示的功能，完成书P221页如图9-18所示的页面。,任务3,添加购物车“shop_car.aspx”页面，设计shop_car.aspx页面，实现购物车功能，并完成shop_car.aspx页面上的【修改数量】、【删除】、【清空购物车】按钮功能。,任务5,任务3图书详细信息展示,实现图书详细信息展示功能,任务目标,利用Repeater控件显示图书详细信息,知识要点,任务3图书详细信息展示,Repeater控件,添加标题文字,添加标题文字,Repeater控件和Data

22、List控件类似，也是Web服务器控件中的一个基本容器控件，它可用来显示页面中任何数据源的数据。该控件没有预先定义好的固有显示外观和布局，只有可用于自定义显示格式的可编辑模板。,Repeater控件,是一个容器控件可以从页的任何可用数据中创建出自定义列表 可创建任何有循环属性的列表：表、XML等效率很高不会自动生成任何HTML代码不具备内置的呈现功能，需要手写布局与DataList相比，没有编辑和选择模板不支持图形化编辑,任务3图书详细信息展示,图书详细信息展示,添加标题文字,添加标题文字,使用Repeater控件显示图书详细信息,Repeater-前台源视图的HTML代码1,style=wi

23、dth:112px;height:132px/作者：接后页,Repeater-前台源视图的HTML代码2,价格：印张：字数：版次：,Repeater-显示图书详细信息的后台代码,protected void Page_Load(object sender,EventArgs e)if(Page.IsPostBack=false)bookid=Request.QueryStringbookid;/bookid=Request.QueryString.Get(0).ToString().Trim();sqlstr=select*from 图书表 where 图书编号=+bookid;ds=db.G

24、etDataTableBySql(sqlstr);if(ds.Tables0.Rows.Count!=0)this.Repeater1.DataSource=ds.Tables0.DefaultView;this.Repeater1.DataBind();Sessionbookid=bookid;,课堂实践3,利用Repeater控件显示图书详细信息页bookDetail.aspx。,任务6,本章小结,本章学习内容,本章主要学习了如下内容：HyperLink控件：用来在页上创建一个可以切换到其他页或位置的链接；DataList控件：是Web服务器控件中的一个基本容器控件，用来以自定义格式显示W

25、eb页中任何数据源的数据；Repeater控件：是Web服务器控件中的一个基本容器控件，它可用来显示页面中任何数据源的数据；利用DataList控件和Repeater控件灵活显示数据；用户自定义控件：可以保证各页面相同内容更新一致、方便页面设计；,GridView、DataList、Repeater总结,GridView自身功能强大，带有丰富的数据绑定列，有许多的内置事件帮助处理程序内置了分页、排序功能开发效率高，但是占用资源也比较高示例：网上书店后台管理：（1）图书信息和用户信息的显示（2）图书信息多选删除和用户信息的单选删除（3）图书信息和用户信息的编辑（4）图书信息的查询、分页和排序,G

26、ridView、DataList、Repeater总结,DataList它的模板不如GridView多，以表的形式呈现数据，通过DataList可以使用不同的布局显示数据记录本身不带分页、排序功能示例：网上书店前台：（1）首页展示图书（2）图书列表页展示图书信息，并实现查询、分页、排序功能（3）购物车页显示、编辑和删除购买信息,GridView、DataList、Repeater总结,Repeater不提供任何布局，即不会生成任何HTML代码，需要用户通过编辑模板实现布局功能开发的周期长示例：网上书店前台：（1）图书详细信息页显示,课外拓展,打开OnlineShop网站，添加一个新的Web窗体“commodity_show.aspx”。,任务1,仿照“国美电器”网站设计“commodity_show.aspx”商品展示页面。,任务2,利用DataList控件显示商品信息。,任务3,课外拓展,添加一个新的Web窗体“commodity_details.aspx”。,任务4,利用Repeater控件显示商品详细信息。,任务5,打开OnlineShop网站，完成商品展示页面“commodity_show.aspx”的商品展示功能。,任务6,课外拓展,完成商品详细信息页面“commodity_details.aspx”的功能。,任务7,