网站开发项目教程 陈密芳 第5章 商品展示模块设计

《网站开发项目教程 陈密芳 第5章 商品展示模块设计》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第五章商品展示模块设计主编：陈密芳主审：吕延岗出版社：中国铁道出版社本章导读本章通过商品展示模块的设计，学习了TreeView控件、DataList控件和DataView控件的使用，学习了数据绑定、分页和表格中高亮显示行等技术。1本章主要内容5.1商品展示模块的需求分析5.2商品分类列表模块5.3商品信息列表模块5.4商品详细显示模块5.5商品搜索模块5.6本章小结5.7课后任务与思考25.1商品展示模块的需求分析商品展示模块是网上商店的一个重要模块，具有呈现商品列表、展示商品信息、查询商品信息等基本功能。和实际购物商店一样，用户可以在这里

2、查阅商品的分类，这样更有利于用户发现需要的商品，将商品放入购物车。35.2商品分类列表模块5.2.1商品分类列表模块分析商品分类列表可以将不同的商品类别通过列表方式显示出来，就跟目录一样，这样用户在浏览商品时非常清晰明确，比如可以通过商品的功能分类，商品的品牌分类，商品的颜色分类等。用户可以点击相应的商品分类项目进入商品信息列表查看商品的基本信息。5.2.2TreeView控件简介有时会看到一些网站在左边采用类似资源管理器的树形结构，在树形结构中单击，会在右边显示内容，层次清晰且方便快捷，本文主要对ASP.NET服务器控件treeview进

3、行简单的介绍。4TreeView控件显示Node对象的分层列表，每个Node对象均由一个标签和一个可选的位图组成。TreeView一般用于显示文档标题、索引入口、磁盘上的文件和目录、或能被有效地分层显示的其它种类信息。创建了TreeView控件之后，可以通过设置属性与调用方法对各Node对象进行操作，这些操作包括添加、删除、对齐和其它操作。可以编程展开与折回Node对象来显示或隐藏所有子节点。Collapse、Expand和NodeClick三个事件也提供编程功能。Node对象使用Root、Parent、Child、FirstSibling

4、、Next、Previous和LastSibling属性。在代码中可通过检索对Node对象的引用，从而在树上定位。也可以使用键盘定位。UPARROW键和DOWNARROW键向下循环穿过所有展开的Node对象。从左到右、从上到下地选择Node对象。若在树的底部，选择便跳回树的顶部，必要时滚动窗口。RIGHTARROW键和LEFTARROW键也穿过所有展开的Node对象，但是如果选择了未展开的Node之后再按RIGHTARROW键，该Node便展开；第二次按该键，选择将移向下一个Node。相反，若扩展的Node有焦点，这时再按LEFTARROW

5、键，该Node便折回。如果按下ANSI字符集中的键，焦点将跳转至以那个字母开头的最近的Node。后续的按该键的动作将使选择向下循环，穿过以那个字母开头的所有展开节点。控件的外观有八种可用的替换样式，它们是文本、位图、直线和+/-号的组合，Node对象可以任一种组合出现。TreeView控件使用由ImageList属性指定的ImageList控件，来存储显示于Node对象的位图和图标。任何时刻，TreeView控件只能使用一个ImageList。这意味着，当TreeView控件的Style属性被设置成显示图象的样式时，TreeView控件中每

6、一项的旁边都有一个同样大小的图象。55.2.3任务十七：商品分类列表模块的实现商品分类列表模块在很多页面中都需要显示，所以将此模块做成一个用户控件页面，这样可以重复利用，提高开发效率。这里我们只做了商品的两个类别的二级列表显示，读者根据下面讲解的方法可以设置多级，也可以设置多种商品类别的显示。此任务的详细实现过程请参阅本书P12365.3商品信息列表模块5.3.1商品信息列表模块简介商品信息列表可以根据不同的类别浏览商品信息。浏览商品信息列表是用户获得商品信息的一个快速通道，但并不是用户最终了解商品信息的信息源。用户可以点击商品名称和图片转

7、到商品详细信息页面。在商品信息列表页面中，每一条商品信息显示商品名称、商品图片、商品价格3个主要方面，并提供了两个链接，一个是单击商品名称可以进入商品详细信息页，另一个是单击商品图片进入商品详细信息页。75.3.2DataList控件简介DataListWeb服务器控件以某种格式显示数据，这种格式可以使用模板和样式进行定义。DataList控件对于显示数据行很有用。可以选择将DataList控件配置为允许用户编辑或删除信息。还可以自定义该控件以支持其他功能，如选择行。注意：若要精确地控制用于呈现列表的HTML，请使用RepeaterWeb服

8、务器控件。如果要包括自动分页和排序功能，请使用DataGridWeb服务器控件。DataList控件具有自定义布局显示方式，但其不具备GridView数据表格控件灵活分页功能，需